CocosCreator如何使用protobuf

前言：

目前在国内开源2d引擎比较推崇的就是Cocos Creator这款基于Cocos2d-x演变出的新图形界面类似Unity3d的操作界面挂组件方式的2d游戏引擎，当然还有Cocos2d-x系列的支持lua/js/C++的引擎<UI界面需要借助CocosBuilder/CocosStudio等拼接>；但是目前快餐时代下的游戏市场大部分手游和小游戏比较热衷于用CocosCreator了<laya/白鹭等引擎我也在用个人感觉用着不咋舒服可能是因为我是从Cocos2d-iphone/Android一直到Cocos2d-x系列老铁粉还有一直用Unity的原因吧>；那么谈到单机手游可能不要涉及到序列化/反序列化等操作，也用不到和服务器进行网络传输，但是如果是长联网游戏的话就需要涉及到和服务器通信，也就是会用到通信协议，一般数据结构用json或者protobuf进行传输,这里主要分享一下在CocosCreator3.x中如何使用protobuf生成ts/js并且如何在项目中使用<以下说明主要以Mac环境下如何操作，Windows上涉及nodejs命令等建议使用PowerShell终端进行操作>

环境说明:

1、Mac/Windows
2、安装Cocos Creator3.7.4<3.x系列在3.5.2以上>
3、安装Nodejs<node版本21.5.0或者以上,npm版本10.2.4或者以上>

一、通常情况下如何将proto文件转化为ts和js脚本文件:

A、确保安装完成nodejs环境<考虑到网络环境建议同步安装一下cnpm淘宝镜像>；

B、打开Mac终端执行 <npm或则cnpm根据自身情况使用>

npm i -g protobufjs或者cnpm i -g protobufjs
npm install -g protobufjs或者cnpm install -g protobufjs

C、需要注意的是protobufjs7需要单独安装protobufjs-cli <protobufjs6.x版本无需安装>

npm i --g protobufjs-cli

D、创建一个简单的proto测试文件player.proto和petskill.proto

player.proto

syntax = "proto3";

message PlayerInfo {
    int32 userId = 1;
    int32 gender = 2;
    string userName = 3;
    string nickName = 4;
}

petskill.proto

syntax = "proto3";

message PetSkill {
    int32 skill = 1;
    repeated int32 skillBuffId = 2;
}

分别生成对应的ts和js文件<文件夹路径根据自己实际情况修改调整>,示例如下

#在proto同级文件夹ProtoTsJs下生成petskill.js和petskill.ts
pbjs -t static-module -w commonjs -o ./ProtoTsJs/petskill.js ./petskill.proto
pbts -o ./petskill.d.ts ./ProtoTsJs/petskill.js

#在proto同级文件夹ProtoTsJs下生成player.js和player.ts
pbjs -t static-module -w commonjs -o ./ProtoTsJs/player.js ./player.proto
pbts -o ${outSimplePath}/player.d.ts ./ProtoTsJs/player.js

将player.proto和petskill.proto<多个proto文件>合并生成到一个js和ts文件下,示例如下:

#示例===>将所有proto合并到ProtoTsJs文件夹下一个整体的protojs文件
pbjs -t static-module -w commonjs -o ./ProtoTsJs/proto.js *.proto
#示例===>将所有proto合并到ProtoTsJs文件夹下一个整体的proto.d.ts文件
pbts -o ./ProtoTsJs/proto.d.ts ./ProtoTsJs/proto.js

二、在CocosCreator3.7.4中如何将proto文件转化为ts和js脚本文件并使用

A、使用3.7.4创建一个新的Cocos工程项目如LessonProtobuf

B、在LessonProtobuf项目根目录下打开终端执行安装protobufjs和protobufjs-cli并保存<package.json中会在dependencies中加入protobufjs和protobuf-cli的配置下次可直接使用>

npm i --save protobufjs protobufjs-cli
#也可以根据自己操作习惯分开执行
npm i --save protobufjs
npm i --save protobufjs-cli

C、安装完成之后也可以在LessonProtobuf根目录下创建一个存放自己的Proto源文件的文件夹比如叫Proto如下图

D、在LessonProtobuf根目录创建一个Proto.js文件夹用来存放最终cocos可用的ts/js合并文件,如下图

E、打开终端进入LessonProtobuf根目录执行生成命令即可<也可以在package.json中按照nodejs的规则定义脚本执行命令>或者配置package.json

pbjs --dependency protobufjs/minimal.js --target static-module --wrap commonjs --out ./Proto.js/proto.js ./Proto/*.proto
pbts --main --out ./Proto.js/proto.d.ts ./Proto.js/*.js

F、将生成的Proto.js文件夹拷贝到自己Cocos项目assets/script下<根据自己的目录来>如下图

G、在项目中调用如下图

H、然后运行项目看一下控制台打印log

I、一些人由于nodejs的版本和protobufjs的版本问题可能会导致打开之后提示 "起点找不到模块./Proto.js/proto.js"或者"@protobuf/aspromise或者@protobuf/float"等问题建议关闭CocosCreator重新打开然后再根据实际报错安装具体模块即可

编程之家

CocosCreator如何使用protobuf

一、通常情况下如何将proto文件转化为ts和js脚本文件:

二、在CocosCreator3.7.4中如何将proto文件转化为ts和js脚本文件并使用

详细实现代码工程逻辑请关注GFanStudio公众号回复 "序列化" 即可获得项目工程下载地址；具体教学视频请关注B站Up主GFan-LeeSir