CocosCreator中Protobuf的简单使用

cocosCreator中Protobuf的简单使用

proto文件格式:

 

CocosCreator中Protobuf的简单使用_第1张图片

pro1.jpeg


准备工具:

  1. cocosCreator
  2. webStorm或者VSCode
  3. 安装node.js
  4. 下载protobufjs6.8.6

步骤:

  1. 安装protobufjs到全局
    npm install -g protobufjs
    使用npm install -g 参数将模块安装到全局,目的主要是方便使用protobufjs提供的pbjs命令行工具。pbjs可以将proto原文件转换成json、js等,以提供不同的加载proto的方式,我们可以根据自己的实际情况选择使用,还有pbts,用来将转化后的js文件转为ts
  2. 找到下载的protobuf.js

文件在\nodejs\node_modules\protobufjs\dist中

 

CocosCreator中Protobuf的简单使用_第2张图片

image.png

把这个文件拖到Creator工程中并且导入为插件

CocosCreator中Protobuf的简单使用_第3张图片

pro4.jpeg

  1. 在保存proto文件的目录下打开命令行执行如下命令

     

    CocosCreator中Protobuf的简单使用_第4张图片

    pro5.jpeg

pbjs -t static-module -w commonjs -o proto.js *.proto

这句代码可以将文件中所有的.proto文件转化为一个proto.js文件

  1. 然后把proto.js文件放入代码目录中

     

    CocosCreator中Protobuf的简单使用_第5张图片

    pro6.jpeg

  2. 修改proto.js中protobuf的引用:

pro7.jpeg

因为protobuf已经被设置为插件了

  1. 如果想使用TS格式可以通过protobufjs6新功能来实现
    执行如下命令:

pbts -o proto.d.ts proto.js

注意:这里proto.d.ts一定要有.d

现在代码目录结构的样式就是这样的

CocosCreator中Protobuf的简单使用_第6张图片

pro8.jpeg

  1. 测试使用:

CocosCreator中Protobuf的简单使用_第7张图片

pro9.jpeg

CocosCreator中Protobuf的简单使用_第8张图片

pro10.jpeg

CocosCreator中Protobuf的简单使用_第9张图片

pro11.jpeg

CocosCreator中Protobuf的简单使用_第10张图片

pro12.jpeg

经过测试在手机上也是可以正常运行的

第二种方式:

由于现在工程中使用的TS,为了有更好的效果,所以还有另一种方式来依赖protobufjs6

1.安装protobufjs到全局

npm install -g protobufjs

使用npm install -g 参数将模块安装到全局,目的主要是方便使用protobufjs提供的pbjs命令行工具。pbjs可以将proto原文件转换成json、js等,以提供不同的加载proto的方式,我们可以根据自己的实际情况选择使用,还有pbts,用来将转化后的js文件转为ts

  1. 打开工程目录执行命令行:

npm init

执行后一路回车会在工程目录下生成package.json

  1. 在工程目录中执行命令行:

npm install protobufjs

会生成protobufjs的依赖库

CocosCreator中Protobuf的简单使用_第11张图片

pro13.jpeg

4.在保存proto文件的目录下打开命令行执行如下命令

pbjs -t static-module -w commonjs -o proto.js *.proto

CocosCreator中Protobuf的简单使用_第12张图片

pro14.jpeg

这句代码可以将文件中所有的.proto文件转化为一个proto.js文件

CocosCreator中Protobuf的简单使用_第13张图片

pro15.jpeg

这个不用修改proto文件

6.如果想使用TS格式可以通过protobufjs6新功能来实现
执行如下命令:

pbts -o proto.d.ts proto.js

注意:这里proto.d.ts一定要有.d

现在代码目录结构的样式就是这样的

pro16.jpeg

然后就可以使用了,而且代码提示很友好~

CocosCreator中Protobuf的简单使用_第14张图片

pro17.jpeg

CocosCreator中Protobuf的简单使用_第15张图片

pro18.jpeg

如果有问题请参考这些网址:

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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的:(Cocos+H5)