cocos creator2.x使用protobufjs5.x版本

原创 已于 2023-03-25 14:55:23 修改 · 535 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm #javascript

于 2023-03-08 17:37:40 首次发布
文章详细介绍了如何安装和配置Nodejs及npm全局安装路径，然后逐步讲解了安装protobufjs和相关依赖文件，包括protobuf.js、long.js和bytebuff.js的放置。接着，作者指导如何创建.proto文件，使用protobufjs-cli生成.js和.d.ts文件，并对生成的js文件进行优化。最后，文章提到了修改protobuf.js以改变.proto文件的加载方式，采用cc.loader来实现。

1.安装nodejs，配置npm全局安装路径

2.安装protobufjs：运行命令

npm install -g protobufjs

安装完生成如下文件

通过官方地址：https://github.com/protobufjs/protobuf.js/tree/5.0.3下载依赖的long.js和bytebuff.js文件

将标红的三个文件，protobuf.js、long.js、bytebuff.js放入工程

3.运行命令：npm install -g protobufjs-cli，安装成功后如下

 4.新建.proto文件：

在.proto文件夹内运行如下命令生成game1.js文件

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

在.proto文件夹内运行如下命令生成game1.d.ts申明文件

pbts -o game1.d.ts game1.js

5.4截图看到的js文件是调整后的内容，默认生成的js文件内容比较庞大需要修改

打开static.js文件

 在如图位置返回

6.最后一步修改protobuf.js中.proto文件加载方式，改为cc.loader加载

lining116
关注
CocosCreator 面试题（十五）Cocos Creator如何内置protobuf JS版本?
w风雨无阻w的专栏
11-26 2465
接着，它创建了一个 Player 对象，并使用 protobuf.js 提供的 API 对其进行序列化和反序列化操作。其中，name 和 level 是普通的字段，items 是一个 repeated 字段，表示它可以包含多个值。在 Cocos Creator 中使用 protobuf.js，我们需要先加载 .proto 文件，然后使用 protobuf.js 提供的 API 进行序列化和反序列化操作。JSON和XML是文本格式，更易于阅读和调试，而且在对人类友好的接口和数据交换上更为常见和广泛支持。
cocos creator中使用protobuf(dcodeIO/protobuf.js 5.0)
长安长夜|Saint
05-04 6342
cocos creator项目需要使用protobuf作为序列化！ 查找资料发现： 主要存在两个解决方案 使用protobufjs 或者 谷歌官方的js解析(通过protoc.exe生成.proto对应的js文件直接使用)，个人认为protojs更为方便，如果更改.proto文件都要使用protoc重新生成对应的js文件略为繁琐。所以这里我们直接采用的protobufjs。 但是通过
Cocos Creator Protobuf的js版本使用
s178435865的专栏
01-07 1052
cocoscreator protobuf
protobuf.js CLI工具全攻略：从入门到精通的pbjs与pbts命令行实战
最新发布
gitblog_00219的博客
11-08 842
你还在手动编写Protocol Buffers代码吗？面对繁琐的.proto文件转换和TypeScript类型定义，是否感到效率低下？本文将带你全面掌握protobuf.js的两款核心CLI工具——pbjs与pbts，通过简单的命令行操作，轻松实现Protocol Buffers文件的编译、转换和类型生成，让数据序列化工作事半功倍。读完本文，你将能够： - 熟练使用pbjs命令转换多种格式的Pro
Cocos Creator3.8 项目实战（十）使用 protobuf详细教程
w风雨无阻w的专栏
10-18 4949
好了，Cocos Creator 3.8中如何如何将 proto文件打包成typescript 脚本，以及如何使用 protobuf 的教程到此就结束。如果觉得我的博文帮到了您，您的赞关注是对我最大的支持。如遇到什么问题，可评论区留言。在 Cocos Creator 中使用 protobuf.js 库可以方便地进行协议的序列化和反序列化。protobuf环境安装安装需要使用 npm 命令进行，因此首先需要安装 npm。确定了模块格式和导出方式，就可以在脚本资源里使用。文件为例，进行演示。
protobuf.js
qq_42179237的博客
04-26 6405
什么是protobuf 协议缓冲区提供了一种语言中立、平台中立、可扩展的机制，用于以向前兼容和向后兼容的方式序列化结构化数据。它类似于 JSON，只是它更小更快，并且生成本地语言绑定 protobuf解决了哪些问题 协议缓冲区为大小高达几兆字节的类型化结构化数据包提供了一种序列化格式。该格式适用于临时网络流量和长期数据存储 协议缓冲区是 Google 最常用的数据格式。它们广泛用于服务器间通信以及磁盘上数据的归档存储 ...
CocosCreator如何使用protobuf
GFanStudio的专栏
01-19 2727
CocosCreator如何使用protobuf、protobuf如何转换为ts和js、proto文件转换为ts和js脚本、protobufjs如何使用
CocosCreator游戏开发框架（一）：是什么 && 为什么
热门推荐
wxc237786026的专栏
07-07 3万+
写在前面 从微信小游戏出生（2018年初）到现在，已经使用CocosCreator一年多了（之前做手游主要是cocos2d-x+lua），趁着这段时间有空，想着整理出一个基于CocosCreator游戏开发框架。 这个框架主要是将我在开发过程中觉得好用的结构和模式、插件，以及在论坛上和博客上参考大神们的教程和想法（有些是直接拿来用），整合在一起的。一方面想提高开发效率，另一方面大家发现问题及时提...
【protobuf 2的使用】0.gitbash终端 1.pb在vscode中的的格式化和跳转 2.服务器:netty 3.客户端:creator 4.自定义Option(如添加msgid)
focus-unchanged-thing
01-27 1131
1）creator中使用protobuf https://github.com/protobufjs/protobuf.js/blob/master/dist/protobuf.js
Cocos Creator TypeScript 中使用ProtoBuf(利用工具把proto文件生成对应的js文件以及ts文件)
程序猿
04-14 1万+
我是一枚刚入坑cocos的小白o(╯□╰)o开发环境：Cocos Creator 1.9   （需要安装Node.js，使用npm命令）在网上找了很久都是讲的protobuf.js的用法，但是没有找到关于ProtoBuf在 Cocos Creator （TypeScript）的完整开发流程，就是把proto文件生成对应的js类然后再生成ts文件，可以在代码中直接实例化js中对象，并且有代码的智能提...
Cocos creator学习集锦
水上漂的专栏
10-28 599
1.在Cocos creator中使用Vscode https://blog.csdn.net/osuckseed/article/details/84719329
NodeJS 下protobuf.js 的应用
01-20
nodeJS 下使用google 的protobuf 实现消息的序列化/反序列化异常的简单，连proto文件的预编译都不需要。没有必要使用protoc 工具将proto 文件转换成JavaScript的程序。直接使用proto文件。 安装 $> npm install protobufjs [--save --save-prefix=~] proto 文件 syntax = proto3; package websocket; message WebsocketMessage { string Topic =1; bytes Body=2; } message Ge
nodejs下使用protobufjs6.x.x版本
TTUZ的博客
06-01 4472
环境nodejs：v6.10.3 npm：3.10.10 protobufjs：6.7.3 ws：3.0.0步骤一、安装node（略） 二、创建项目文件，一个server一个client，目录结构均为|.vscode |---launch.json |node_modules |---略 |proto |---a.proto |---b.proto |index.js |package.json二
Cocos Creator 使用protobufjs
归来任少年
04-07 1484
在使用cocos creator开发微信小程序的时候,服务器是使用的skynet,服务器与前端的通讯想使用protobuf,网上有文档,但不多,经过一天的奋斗，终于是让cocos creator能够使用protobuf官网文档参考:ps:本人是写服务器(对cocos,js,ts什么的没研究),如有错误,欢迎各位带佬指正还得是我安徽吴彦祖。
js版本的protobuf使用
HzjCsdn的博客
07-12 1182
步骤一：建一个协议文件cs.proto，客户端服务端共享 //cleint <---> scene syntax = "proto2"; package cs; enum ID { //锦囊系统 ID_C2S_EquipSilkbag = 31370; ID_S2C_EquipSilkbag = 31371; } // 装备锦囊 message C2S_EquipSilkbag { optional uint32 pos = 1; optional uint
在cocos creator中使用protobufjs(一)
奎特尔星球
08-01 6511
本教程是帮助大家在cocos creator中如何使用protobufjs，以及解决protobufjs在原生环境下不能正常工作的问题。
nodejs使用protobufjs
zhoudado921的博客
08-11 1860
1、使用前提 nodejs会发送mqtt消息，但是消息体要进行压缩，未使用json或者XML，我们使用protobufjs来压缩数据。 2、使用步骤 （1）安装protobufjs npm install -g protobufjs （2）创建protp/config.proto文件 syntax = "proto3"; message Config{ int32 param=1; string req_id=2; } （3）使用命令，将config.proto转换成js文件 cd pr
cocos creator使用protobuf
zhongyiqun123的博客
05-27 1010
第二行中buildproto命令的第一个./assets/Proto路径为协议文件.proto所在的路径，./assets/Scripts/Protobuf为导出的js和ts协议所在路径，./assets/Scripts/Protobuf pb中的pb为对应的导出的js和ts文件名。package.json中dependencies有指定版本则直接使用npm install，否则使用npm install --save protobufjs。在项目根目录添加文件import-map.json。
CocosCreator使用 ProtoBuf WebSocket与服务器对接方法
zhengjuqiang的博客
08-08 839
在 Cocos Creator 中使用 .proto 文件和转换成 TypeScript（TS）两者各有其优缺点，具体选择取决于你的项目需求和团队的开发习惯。与 Cocos Creator 的集成：Cocos Creator 原生支持 TypeScript，使用 TS 可以更好地与引擎的 API。开发体验：TypeScript 提供了强大的 IDE 支持，包括类型检查、自动补全和重构工具，这些都可以提高开发效率。高效序列化：protobuf 的序列化和反序列化速度非常快，数据体积小，适合网络传输。
Cocos creator 实现网络通信
03-08
<think>嗯，用户之前问过关于Unity中Socket的作用，现在又问Cocos Creator实现网络通信。可能他们正在比较不同游戏引擎的网络功能，或者打算从Unity转向Cocos Creator。需要先理解Cocos Creator和Unity在网络通信方面的异同。 首先，Cocos Creator主要使用JavaScript或TypeScript，而Unity用C#，所以底层实现可能有差异。用户可能想知道在Cocos中如何实现类似Unity的Socket通信，或者是否有更简便的方法。 用户可能需要具体的实现步骤，比如如何建立连接、发送数据、处理接收等。此外，可能还关心性能优化、跨平台问题，或者是否有现成的解决方案或插件，比如Socket.IO或WebSocket的使用。 考虑到Cocos Creator支持Web平台，可能需要涉及浏览器兼容性，比如WebSocket在移动端和PC端的支持情况。同时，是否需要使用第三方库，比如protobuf进行数据序列化，或者如何处理安全性问题如加密。 另外，用户可能对实时性要求高的游戏（如多人对战）和回合制游戏的不同实现方法感兴趣。需要对比不同协议，如TCP和UDP，在Cocos中的使用场景。 还要注意Cocos Creator的版本，不同版本可能有不同的网络模块支持。是否需要使用引擎自带的网络模块，还是依赖外部库。比如Cocos Creator的socket.io组件或者WebSocket API。 最后，可能需要提供代码示例，比如如何创建WebSocket连接，发送和接收消息，以及如何处理异常和断线重连。同时，提醒用户注意主线程和异步操作的问题，避免阻塞UI。</think>在Cocos Creator中实现网络通信主要通过WebSocket、Socket.IO或HTTP协议实现实时/半实时数据交互，以下是具体实现方案与技术细节： --- ### 一、核心通信方式对比 | 方式 | 延迟 | 适用场景 | 代码复杂度 | |---------------|---------|-------------------------|------------| | WebSocket | 50-200ms| 实时对战/聊天 | ★★☆☆☆ | | Socket.IO | 100-300ms| 含自动重连的实时交互 | ★★★☆☆ | | HTTP轮询 | 500ms+ | 回合制游戏/排行榜 | ★☆☆☆☆ | --- ### 二、WebSocket基础实现（推荐方案） #### 1. 建立连接 ```typescript // 创建WebSocket连接（TypeScript示例） const ws = new WebSocket("ws://game-server.example.com:8080"); ws.onopen = () => { console.log("Connection established"); ws.send(JSON.stringify({ type: "auth", token: "player123" })); }; ``` #### 2. 消息收发处理 ```typescript ws.onmessage = (event) => { const data = JSON.parse(event.data); switch(data.type) { case "positionUpdate": this.playerNode.setPosition(data.x, data.y); break; case "chat": this.chatBox.addMessage(data.content); break; } }; // 发送玩家动作 sendPlayerAction(action: string) { if(ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify({ type: "playerAction", action: action, timestamp: Date.now() })); } } ``` --- ### 三、进阶优化方案 #### 1. 二进制协议优化（protobuf） ```typescript // 使用protobuf.js压缩数据 import protobuf from "protobufjs"; const root = await protobuf.load("protocol.proto"); const PlayerMove = root.lookupType("Game.PlayerMove"); // 序列化 const payload = PlayerMove.create({ x: 120, y: 85 }); const buffer = PlayerMove.encode(payload).finish(); // 反序列化 const decoded = PlayerMove.decode(new Uint8Array(event.data)); ``` #### 2. 断线重连机制 ```typescript private reconnectAttempts = 0; private setupReconnect() { ws.onclose = () => { const delay = Math.min(1000 * 2 ** this.reconnectAttempts, 30000); setTimeout(() => this.connect(), delay); this.reconnectAttempts++; }; } ``` --- ### 四、跨平台注意事项 1. **浏览器兼容性** - 微信小游戏需使用`wx.connectSocket` API - 原生平台需配置`WebSocket` polyfill 2. **安全策略** ```typescript // 启用SSL加密 const ws = new WebSocket("wss://secure-server.com"); // CSP配置（creator项目设置） Content-Security-Policy: connect-src 'self' wss://* ``` --- ### 五、性能监控指标 | 指标 | 健康值 | 检测方法 | |---------------------|-----------------|--------------------------| | 网络延迟 | < 150ms | `Date.now()`打时间戳往返 | | 数据包压缩率 | > 60% | 对比原始/压缩后字节数 | | 每秒消息量(QPS) | < 500条/秒 | 服务端计数器统计 | --- ### 六、调试工具推荐 1. **Wireshark**：抓包分析原始数据流 2. **Chrome Network Tab**：查看WebSocket帧详情 3. **Socket.IO Inspector**：专用协议调试插件 建议根据项目类型选择方案：实时竞技类首选WebSocket+protobuf，社交类可选Socket.IO，对于弱网环境可结合消息确认机制（ACK）保证可靠性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值