creator protobuf js加载方案 接入方案

准备工具：
cocosCreator
VSCode
node.js

步骤：
安装protobufjs到全局

npm install -g protobufjs

image.png

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

2.下载protobuf.js
别人的教程说要下载这个 但是我运行1的命令之后 我的目录
C:\Users\Administrator.SC-201903202059\AppData\Roaming\npm\node_modules\protobufjs

image.png

image.png

我的目录结构

4个都勾上特别是第三个

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

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

image.png

3.1然后把proto.js文件放入代码目录中
因为protobuf已经被设置为插件了
修改proto.js中protobuf的引用：

// var $protobuf = require("protobufjs/minimal");
var $protobuf = protobuf

这里需要注意一下 每次生成protobuf 都需要改这一行 目前我也没有什么好的办法

4. 写测试用例

var protoAll = require("proto")
var packaaa = protoAll.grace.proto.msg //这里是proto文件的包名

cc.Class({
    extends: cc.Component,

    properties: {

        label: {
            default: null,
            type: cc.Label,
        }
    },

    start () {
        this.firstupdate = true
        cc.log("uiloginnode + start")

        var msg = packaaa.Player.create({id: 123, name: "蜡笔小新", level:2100000000})
        cc.log(msg)
        var buf = packaaa.Player.encode(msg).finish()
        cc.log(buf, "buf = ")
        this.label.string = "转码完成, 2秒后解码!"
        var self = this
        this.scheduleOnce(function() {
            // 这里的 this 指向 component
            // this.doSomething();
            var dec = packaaa.Player.decode(buf)
            cc.log(dec, "dec = ")

            let num64 = dec.level * 80

            self.label.string = num64
        }, 2)
    },
});

5. 补上我的proto文件

package grace.proto.msg;   

//角色对象
message Player
{
    optional int64 id = 1;
    optional string name = 2;
    optional int32 level = 3;//等级
}

6. 关于int64的加法和乘法(服务器id有可能会用到)
   代码里面有let num64 = dec.level * 80

   
   
   正常运算21亿以上的乘法

另外android测试没问题 也能够正常调用protobuf的 解析

7. 关于解析的web log 我一并截图

   
   
   image.png

参考文章: https://forum.cocos.com/t/cocoscreator-protobuf/61045