CocosCreator TypeScript使用protobuf

开发环境 ： Mac环境 + CocosCreator + TypeScript 使用protobuf

 

准备工作：

1. CocosCreator

2. WebStorm || VSCode

3. 安装node.js

4. 下载protobufjs6.8.6

 

命令行安装：

步骤1. 安装homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

步骤2. 安装node.js npm 【npm 其实就是Node.js的包管理工具(Node Package Manager)】

brew install node

或者官网下载安装 ： https://nodejs.org/en/#download

 

步骤3. 安装protobfujs到全局

npm install -g protobufjs  注意：这个命令会安装最新版本

目的是方便使用protobufjs提供的pbjs工具。pbjs可以将proto原文件转换成json、js等，以提供不同的加载proto方式。还有pbts，用来将转化后的js文件转为ts。

 

步骤4.找到下载的protobuf.js

path: /usr/local/lib/node_modules/protobufjs/dist

将protobuf.js拖到creator工程中并导入为插件

 

步骤5.在保存.proto文件的目录下打开命令行执行命令：

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

这行命令是将文件中所有的 .proto 文件转化为一个 proto.js 文件

 

步骤6. 将proto.js文件放入代码目录中

 

步骤7. 修改 proto.js 文件中的引用

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

 

步骤8. 如果使用 TS 格式，可以通过 protobufjs6 新功能来实现

pbts -o proto.d.ts proto.js

会生成对应的 proto.d.ts文件。注意：这里proto.d.ts一定要有.d

 

测试使用：

v6.x的做法

let req = HeartBeatReq.create({param1: 1, param2: 2});

let buffer = HeartBeatReq.encode(req).finish();

socket.send(buffer, MsgID);

 

注意：以上是version 6.x版本使用protobufjs的实现

 

5.x 版本请看下面的使用步骤

 

步骤3. 下载protobufjs 5.x 版本

npm install -g protobufjs@5     注意：version 6.x版本接口变化太大，使用这个命令安装版本5.x

 

步骤4.同上述步骤4

 

步骤5. 使用命令行将所有的 .proto文件生成一个game.js文件

pbjs -t commonjs *.proto > game.js

 

步骤6. 通过ts脚本文件，加载到程序中

import * as game from "./game"

export var proto: any = null;

export default class ProtoManager {
    private static ins: ProtoManager;

    public static get I(): ProtoManager {
        if (!ProtoManager.ins) {
            ProtoManager.ins = new ProtoManager();
        }
        return ProtoManager.ins;
    }

    public initCommon() {
        if (!proto) {
            proto = game['protos'];
        }
    }
}

v5.x做法

let req = new proto["HeartbeatReq"];

req.msec = MKUtils.getCurrentTime();

this.m_socket.send(req.toArrayBuffer(), MsgID);