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

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

首先我们知道目前想使用Cocos CreatorProtobufjs 结合可以直接去商店下载插件,直接使用,但是作为开发者来说,不能知其然而不知其所以然,要让自己工作能够摆脱插件和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. 使用 pythonpython3环境)修改构建后的 js 文件和.d.ts文件
  2. 使用终端运行 shell 脚步运行python脚本

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

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

参考

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