Asroads'Blog 君子不器
Cocos Creator如何使用Protobufjs|2.x|3.0
发布于: 2021-04-01 更新于: 2024-03-02 分类于: game 阅读次数: 

这是一篇整合文章，笔者的东西不多，大部分从别处整合得来的，关于Protobufjs的介绍和Cocos Creator的结合使用，网上和论坛已经有不少人讲解，但随着时间推移，Cocos Creator3.0发布后很多资料和文章的功能开始不能正常生效了，官方也给出了一种安装方式，本文采对常见的几种给一个总结。

首先我们知道目前想使用Cocos Creator 和Protobufjs 结合可以直接去商店下载插件，直接使用，但是作为开发者来说，不能知其然而不知其所以然，要让自己工作能够摆脱插件和Cocos Creator不同步造成的问题。

首先我们说几个常见的解决办法

常见解决思路

商店下载插件

插件一 pb杀手&pbkiller for Creator 3.x

pb杀手

resource-icon

商店地址：https://store.cocos.com/app/detail/1969

pbkiller for Creator 3.x

resource-icon

商店地址： https://store.cocos.com/app/detail/2709

这个插件笔者没有使用过，但是看过插件作者的文章，写的很详细，作者也是个很热心的人，更新很及时。

插件二 protobuf-creator

  • 作者 Devman

  • Creator版本要求 v3.0.0

resource-icon

商店地址：https://store.cocos.com/app/detail/2404

笔者购买了这个插件，使用起来很方便，作者也专门为这个插件使用录制了一个教程

教程地址：【Cocos引擎插件分享】protobuf-creator

官方教程

使用npm方案使用protobuf

示例：通过 npm 使用 protobuf.js

Cocos Creator 3.0 里如何玩转 npm 海量资源

官方介绍了如何使用npm 方式和Protobuf结合，教程很详细，但是步骤很多，笔者没有实践，但是出于对官方人员对信任，相信这个方案也是可以正常使用的。

官方给的例子：https://github.com/cocos-creator/example-3d/tree/v3.0/protobuf

特别是 https://github.com/cocos-creator/example-3d/tree/v3.0/protobuf/assets/scripts/proto 这个下面生成的文件 值得研读

笔者自己结合网友的综合方案

Protobuf介绍

image-20210401202044403

直接看这篇文章即可：Protocol Buffers3语言指南（译）

Creator WebSocket Protobuf整合

图片

Creator WebSocket Protobuf整合之保姆级全攻略

文章 作者文章源码：点击进入 作者博客：点击访问

笔者结合后示例

Cocos Creator 2.x 示例地址：点击进入

Cocos Creator 3.0 示例地址：点击进入

使用方法：
  1. 直接运行 setup_clent.sh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
smile@bogon 通信协议 % /Users/smile/Downloads/Cocos\ Creator\ Protobuf\ 协议/Cocos\ Creator\ 3.0/技术/通信协议/setup_clent.sh
['copyjs.py']
找到--语法是--ES5
替换全局对象 global
删除导出模块 mykj ！！
删除导出模块 $root ！！
------bufBundle.js 更换完毕-----
------bufBundle.d.ts 更换完毕-----
复制路径： /Users/smile/work/ccc/game
源目录： /Users/smile/Downloads/Cocos Creator Protobuf 协议/Cocos Creator 3.0/技术/通信协议/dist
filename bufBundle.js
复制路径 /Users/smile/Downloads/Cocos Creator Protobuf 协议/Cocos Creator 3.0/技术/通信协议/dist/bufBundle.js
源目录： /Users/smile/work/ccc/game/assets/protobuf/dist/bufBundle.js
filename bufBundle.d.ts
复制路径 /Users/smile/Downloads/Cocos Creator Protobuf 协议/Cocos Creator 3.0/技术/通信协议/dist/bufBundle.d.ts
源目录： /Users/smile/work/ccc/game/assets/protobuf/dist/bufBundle.d.ts
复制完毕！！
原理解释：
  1. 主要使用 pbjs 命令 生成 js文件
1
pbjs -t static-module -r creator3 -w commonjs --es6 --no-verify --force-number "./protobuf/*.proto" -o ./dist/bufBundle.js
  1. 使用pbts 命令生成 声明文件.d.ts
1
pbts -m -o ./dist/bufBundle.d.ts ./dist/bufBundle.js
  1. 使用 python（python3环境）修改构建后的 js 文件和.d.ts文件
  2. 使用终端运行 shell 脚步运行python脚本

如果没有shell 环境的可以直接单独运行 1/2/3 即可。

总的来说，开发者不能受制于插件，否则后面插件一旦停更，项目则会受影响。而笔者采用的这个方法，是脱离插件存在的，虽然运行界面丑陋了些，但是效果是一样的，当然如果自己能修改插件源码义工项目使用，自然再好不过

参考

--- 本文结束 The End ---