cocosCreator中Protobuf的简单使用
cocosCreator中Protobuf的简单使用
proto文件格式:
![](https://upload-images.jianshu.io/upload_images/2625556-b07eecb41d31723b.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/554)
准备工具:
- cocosCreator
- webStorm或者VSCode
- 安装node.js
- 下载protobufjs6.8.6
步骤:
- 安装protobufjs到全局
npm install -g protobufjs
使用npm install -g 参数将模块安装到全局,目的主要是方便使用protobufjs提供的pbjs命令行工具。pbjs可以将proto原文件转换成json、js等,以提供不同的加载proto的方式,我们可以根据自己的实际情况选择使用,还有pbts,用来将转化后的js文件转为ts - 找到下载的protobuf.js
文件在\nodejs\node_modules\protobufjs\dist中
![](https://upload-images.jianshu.io/upload_images/2625556-cbb49858c432c82e.png?imageMogr2/auto-orient/strip|imageView2/2/w/611)
把这个文件拖到Creator工程中并且导入为插件
![](https://upload-images.jianshu.io/upload_images/2625556-b14f5694d75a6567.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/283)
-
在保存proto文件的目录下打开命令行执行如下命令
pro5.jpeg
pbjs -t static-module -w commonjs -o proto.js *.proto
这句代码可以将文件中所有的.proto文件转化为一个proto.js文件
-
然后把proto.js文件放入代码目录中
pro6.jpeg -
修改proto.js中protobuf的引用:
![](https://upload-images.jianshu.io/upload_images/2625556-4bbce4c3fb0115e0.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/535)
因为protobuf已经被设置为插件了
- 如果想使用TS格式可以通过protobufjs6新功能来实现
执行如下命令:
pbts -o proto.d.ts proto.js
注意:这里proto.d.ts一定要有.d
现在代码目录结构的样式就是这样的
![](https://upload-images.jianshu.io/upload_images/2625556-8733c64dff4b296a.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/187)
- 测试使用:
![](https://upload-images.jianshu.io/upload_images/2625556-c6529e6c0938c6b3.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/554)
![](https://upload-images.jianshu.io/upload_images/2625556-137be6b4ed58341d.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/239)
![](https://upload-images.jianshu.io/upload_images/2625556-25907ee5939bdf35.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/237)
![](https://upload-images.jianshu.io/upload_images/2625556-e751d0da6bd41827.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/554)
经过测试在手机上也是可以正常运行的
第二种方式:
由于现在工程中使用的TS,为了有更好的效果,所以还有另一种方式来依赖protobufjs6
1.安装protobufjs到全局
npm install -g protobufjs
使用npm install -g 参数将模块安装到全局,目的主要是方便使用protobufjs提供的pbjs命令行工具。pbjs可以将proto原文件转换成json、js等,以提供不同的加载proto的方式,我们可以根据自己的实际情况选择使用,还有pbts,用来将转化后的js文件转为ts
- 打开工程目录执行命令行:
npm init
执行后一路回车会在工程目录下生成package.json
- 在工程目录中执行命令行:
npm install protobufjs
会生成protobufjs的依赖库
![](https://upload-images.jianshu.io/upload_images/2625556-9b8be448c1984fae.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/554)
4.在保存proto文件的目录下打开命令行执行如下命令
pbjs -t static-module -w commonjs -o proto.js *.proto
![](https://upload-images.jianshu.io/upload_images/2625556-4e7e22779d267be4.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/196)
这句代码可以将文件中所有的.proto文件转化为一个proto.js文件
![](https://upload-images.jianshu.io/upload_images/2625556-aacb776ccbb3583b.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/554)
这个不用修改proto文件
6.如果想使用TS格式可以通过protobufjs6新功能来实现
执行如下命令:
pbts -o proto.d.ts proto.js
注意:这里proto.d.ts一定要有.d
现在代码目录结构的样式就是这样的
![](https://upload-images.jianshu.io/upload_images/2625556-c5225300def343de.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/178)
然后就可以使用了,而且代码提示很友好~
![](https://upload-images.jianshu.io/upload_images/2625556-2516e32373e68971.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/554)
![](https://upload-images.jianshu.io/upload_images/2625556-d1babd31c4df80f1.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/554)
如果有问题请参考这些网址:
https://www.jianshu.com/p/1b90dd4bcb0a
http://forum.cocos.com/t/cocos-creator-protobufjs-ts/47687
https://www.jianshu.com/u/ba2c5d0f4939
来源:https://www.jianshu.com/p/f727f78dcc76