cocosCreator中Protobuf的简单使用

Creator 2.x
#1

#cocosCreator中Protobuf的简单使用
proto文件格式：
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

pro2.jpeg

pro3.jpeg

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

pro4.jpeg
3. 在保存proto文件的目录下打开命令行执行如下命令
pro5.jpeg

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

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

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

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

pro7.jpeg

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

  1. 如果想使用TS格式可以通过protobufjs6新功能来实现
    执行如下命令：
    ####pbts -o proto.d.ts proto.js
    ####注意：这里proto.d.ts一定要有.d
    现在代码目录结构的样式就是这样的

pro8.jpeg

  1. 测试使用：

pro9.jpeg
pro9.jpeg554×538

pro10.jpeg

pro11.jpeg

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

  2. 在工程目录中执行命令行：
    ####npm install protobufjs
    会生成protobufjs的依赖库

pro13.jpeg

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

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

pro14.jpeg

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

pro15.jpeg

这个不用修改proto文件

6.如果想使用TS格式可以通过protobufjs6新功能来实现
执行如下命令：
####pbts -o proto.d.ts proto.js
####注意：这里proto.d.ts一定要有.d
现在代码目录结构的样式就是这样的

pro16.jpeg

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

pro17.jpeg

pro18.jpeg

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

https://www.jianshu.com/p/1b90dd4bcb0a

http://forum.cocos.com/t/cocos-creator-protobufjs-ts/47687

https://www.jianshu.com/u/ba2c5d0f4939

7赞
#2

前段时间刚刚研究过 creator里使用 pbjs的方案 ，老哥感觉你这个贴子 上下两种例子是一个啊。。没有区分好 ，js方式和ts方式，同时也没有指出来 动态加载proto的方式和静态加载js(bundle方式)的差别

  1. 前面步骤基本和你一样按照github上面的pbjs的官方操作执行就好 下载安装配置全局环境 仓库链接

  2. 纯js的列子改成 纯js使用即可
    `protobuf.load(“awesome.proto”, function(err, root) {
    if (err)
    throw err;

    // Obtain a message type
    var AwesomeMessage = root.lookupType(“awesomepackage.AwesomeMessage”);

    // Exemplary payload
    var payload = { awesomeField: “AwesomeString” };

    // Verify the payload if necessary (i.e. when possibly incomplete or invalid)
    var errMsg = AwesomeMessage.verify(payload);
    if (errMsg)
    throw Error(errMsg);

    // Create a new message
    var message = AwesomeMessage.create(payload); // or use .fromObject if conversion is necessary

    // Encode a message to an Uint8Array (browser) or Buffer (node)
    var buffer = AwesomeMessage.encode(message).finish();
    // … do something with buffer

    // Decode an Uint8Array (browser) or Buffer (node) to a message
    var message = AwesomeMessage.decode(buffer);
    // … do something with message

    // If the application uses length-delimited buffers, there is also encodeDelimited and decodeDelimited.

    // Maybe convert the message back to a plain object
    var object = AwesomeMessage.toObject(message, {
    longs: String,
    enums: String,
    bytes: String,
    // see ConversionOptions
    });
    });`

  3. ts的例子api基本同js的方式
    `import { load } from “protobufjs”; // respectively “./node_modules/protobufjs”

load(“awesome.proto”, function(err, root) {
if (err)
throw err;

// example code
const AwesomeMessage = root.lookupType(“awesomepackage.AwesomeMessage”);

let message = AwesomeMessage.create({ awesomeField: “hello” });
console.log(message = ${JSON.stringify(message)});

let buffer = AwesomeMessage.encode(message).finish();
console.log(buffer = ${Array.prototype.toString.call(buffer)});

let decoded = AwesomeMessage.decode(buffer);
console.log(decoded = ${JSON.stringify(decoded)});
});4. 还有直接动态加载.proto的方式 ex:protobuf.load() 但是这种方式涉及跨域 可以参考creator商店pbkiller的方式，或者测试的时候自己搭建服务器存放proto，另外小游戏环境下 pbjs6.x的库直接是用有问题（这里单纯指.proto动态加载方式）可以使用静态.js 把所有的proto打成一个bundle.js的方式当做脚本插入 5. 上面说的打成bundle.js的方式参考官方命令> pbjs -t static-module -w commonjs -o compiled.js file1.proto file2.proto > pbts -o compiled.d.ts compiled.js如果在使用的时候出现问题（这里的使用是指使用静态js的方式）可能需要修改生成的bundle.j's和bundle.d.ts如下 bundle.js 在文件最上增加这几行var $protobuf = window.protobuf;$protobuf.roots.default=window;// Common aliases
var $Reader = $protobuf.Reader, $Writer = $protobuf.Writer, $util = $protobuf.util;
;bundle.d.ts 在文件最上增加type Long = protobuf.Long;`

2赞
#3

恩恩，学习了

#4

您好，参照您给的教程在creator成功了，但是发布安卓还有windows平台的时候，报了有一堆错误。之前没有把protobuf.js设置为插件。设置插件之后，报了更多错误，但是能正确运行出结果。请问楼主解决这个问题了吗。

#5

解决了，设置为插件的时候一定要勾选‘允许编辑器加载’

#6

收藏学习了！！！！

#7

你好,我按照步骤操作的,把生成的js转为
程序中报找不到

粘贴的图像793×87 2.76 KB

这个是怎么回事呢?我勾选了,准许编辑器编译

#8

马克一下

#10

我导出的proto js 文件比较大，编辑器提示我导入为插件，需要把它导入为插件吗? 我的是typeScript工程

#11

需要哇 要不然你用不了哈

#12

测试了，协议文件导出的proto.js 不能导入为插件，导入插件之后， 你的 ts 下的文件引用模块的时候，编辑器会报错，无法找到模块。

#13

不知道是不是 用的问题
我这里 的 合并后的协议.js 文件是 导入为插件的
然后代码里直接就可以用了
集成按照 https://github.com/dcodeIO/protobuf.js 这个仓库提供的方案来的
不过自己做了一些修改

#14

https://upload-images.jianshu.io/upload_images/2625556-e751d0da6bd41827.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1240

大锅我也遇到几个问题想请教一哈，你没有发现你截图中encode后的protobuf，byteLength:8192 = 8kb，这么一丢丢数据8kb是不是太耗流量了？
还有protobuf预编译生成js文件超级大！！！几个.proto文件生成到一个js，代码行数轻松破万，js文件大小动不动就几百kb，打开js一看每个类里都有大量诸如encode() decode()等方法。如果是开发微信小游戏，代码部分大小限制，这就很…

1赞
#15

对啊，导出的js很大，只能压缩一下。会小很多。

#16

压缩下用mini版本的 应该还好吧

#17

优秀，学习了

#19

最完整总结
https://blog.csdn.net/NRatel/article/details/84251138

#20

请问怎样压缩呢？我倒出的也很大

#21

请问怎样压缩呢？

#23

可以参考我写的这个工具
https://forum.cocos.com/t/cocoscreator-protobuf/73569

1赞