Cocos Creator小知识 - 3.x项目如何使用Protobuf

记一次 Cocos Creator3.x 的 Protobuf 使用

环境

• 安装依赖

$ npm i long
$ npm i protobufjs
$ npm i protobufjs-cli

• tsconfig

{
    "compilerOptions": {
        "target": "es6",
        "lib": ["es2015", "es2017", "dom"],
        "module": "commonjs",
        "strict": false,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "isolatedModules": true,
        "moduleResolution": "node",
        // "noEmit": true,
        "forceConsistentCasingInFileNames": true,
        "allowSyntheticDefaultImports": true
    }
}

• jsconfig

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "experimentalDecorators": true
    }
}

protobuf 协议文件

syntax = "proto3";

package xproto;

// 进入游戏
message C2S_EnterGame{}
message S2C_EnterGame{}

$ pbjs -t static-module -w commonjs -o ./assets/scripts/Protos/ProtoData.js {your-proto-path}/*.proto
$ pbts -o ./assets/scripts/Protos/ProtoData.d.ts ./assets/scripts/Protos/*.js

使用示例

1. 直接使用

import { _decorator, Component } from "cc";

import proto from "./Protos/ProtoData.js"; // 注意这里的.js

const { ccclass, property } = _decorator;
@ccclass("Test")
export class Test extends Component {
    start() {
        let req = proto.xproto.C2S_EnterGame.create({});
        let payload = proto.xproto.C2S_EnterGame.encode(req).finish();
    }

    update(deltaTime: number) {}
}

2. 套娃使用

ProtoUtils.ts

import proto from "./ProtoData.js";
export default proto.xproto;

import { _decorator, Component } from "cc";
import xproto from "./Protos/ProtoUtils";

const { ccclass, property } = _decorator;
@ccclass("Test")
export class Test extends Component {
    start() {
        let req = xproto.C2S_EnterGame.create({});
        let payload = xproto.C2S_EnterGame.encode(req).finish();
    }

    update(deltaTime: number) {}
}