Cocos之js或ts中使用protobuf

Cocos中使用protobuf分三个步骤：

第一步、导入prtobuf库文件；

第二步、将.proto文件编译成.js和.d.ts文件；

第三步、代码调用；

第一步、导入prtobuf库文件:

①、安装node.js；
②、使用npm安装protobufjs包：
（protobufjs/bin里的pbjs和pbts命令行工具，会在后面步骤中用来编译.proto文件）

npm install protobufjs -g

③、将node_modules\protobufjs\dist\minimal里的protobuf.min.js文件导入Cocos中，并设置为插件，全选（允许编译器加载也要勾选）；

第二步、将.proto文件编译成.js和.d.ts文件；

①、编写.proto文件：新建txt文本，重命名为Test.proto，文件内容为：

syntax = "proto3";

package msg;
option java_package = "game.msg";


// 消息结果。
message MessageResult {
    // 结果码。
    int32 code = 1;
    // 消息内容。
    string msg = 2;
}

②、输入命令编译.proto，为了方便，编写一个.bat文件，新建txt文本，重命名为compile_JS.bat，文件内容为：

chcp  65001

REM 编译proto，转换为js，输出到指定文件夹
@echo compile proto to js

@call pbjs -t static-module -w commonjs Test.proto -o test.js

REM 根据js文件，生成ts文件，输出到指定文件夹
@echo generate ts files

@call pbts test.js -o test.d.ts 

REM 完成
@echo finish

③、编译：双击.bat文件，可生成.js文件和.ts文件，如图：

生成文件

④、修改编译出来的.js文件；

将编译出来的.js文件，开始的
原：
var $protobuf = require("protobufjs/minimal");
修改为：
var $protobuf = protobuf;

如果cocos版本是3.x，则下面的也要改
原：
var $root = $protobuf.roots["default"] || ($protobuf.roots["default"] = {});
修改为：
const $root = $protobuf.roots.creator3 || ($protobuf.roots.creator3 = $util.global);

如图：

修改文件

⑤、将Test.js和Test.d.ts，导入工程中；

第三步、代码调用；

let messageResult = msg.MessageResult.create();
messageResult.code = 99;
messageResult.msg = "成功";

// proto消息对象，转换成字节数组
let msgBytes: Uint8Array = msg.MessageResult.encode(messageResult).finish();

// // proto消息字节数组，转换成对象
let newMessageResult = msg.MessageResult.decode(msgBytes);

console.log(newMessageResult.code); // 99
console.log(newMessageResult.msg); // 成功

至此，Cocos中使用protobuf流程结束！

最后编辑于：2023.08.11 09:46:20