Cocos Creator ts版本使用protobuf

最新推荐文章于 2025-06-08 09:23:10 发布
最新推荐文章于 2025-06-08 09:23:10 发布
阅读量3.2k 收藏 12
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40956352/article/details/106833613
本文介绍了如何在Cocos Creator中使用protobuf的TypeScript版本。首先，确保准备了Cocos Creator、VSCode和node.js。接着，全局安装protobufjs 6.8.6，通过`pbjs`命令将.proto文件转换为.js文件，再用`pbts`将.js文件转为.ts文件。最后，将转换后的文件引入到Cocos Creator项目中，经过测试，该方法在手机上也能正常运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Cocos Creator ts版本使用protobuf

cocosCreator中使用Protobuf（ts版本)使用
说明：文章转载自蜡笔小刘 我这里只是验证并记录一下
proto文件格式：pro1.jpeg

准备工具：

cocosCreator和VSCode
安装node.js
下载protobufjs6.8.6

步骤：

安装protobufjs到全局

npm install -g protobufjs
使用npm install -g 参数将模块安装到全局，目的主要是方便使用protobufjs提供的pbjs命令行工具。pbjs可以将proto原文件转换成json、js等，以提供不同的加载proto的方式，我们可以根据自己的实际情况选择使用，还有pbts，用来将转化后的js文件转为ts
找到下载的protobuf.js

如图所示：image.png
把这个文件拖到Creator工程中并且导入为插件（记得勾上允许编译器加载）
在这里插入图片描述

在保存proto文件的目录下打开命令行执行如下命令
pro5.jpeg
pbjs -t static-module -w commonjs -o proto.js *.proto
在这里插入图片描述
这句代码可以将文件中所有的.proto文件转化为一个proto.js文件

然后把proto.js文件放入代码目录中
pro6.jpeg
修改proto.js中protobuf的引用：
pro7.jpeg
因为protobuf已经被设置为插件了

如果使用TS格式可以通过protobufjs6新功能来实现
执行如下命令：
在这里插入图片描述
pbts -o proto.d.ts proto.js
注意：这里proto.d.ts一定要有.d

测试使用：
pro9.jpeg
pro10.jpeg
经过测试在手机上也是可以正常运行的

丿丶淡忘
关注
CocosCreator使用 ProtoBuf WebSocket与服务器对接方法
zhengjuqiang的博客
08-08 745
在 Cocos Creator 中使用 .proto 文件和转换成 TypeScript（TS）两者各有其优缺点，具体选择取决于你的项目需求和团队的开发习惯。与 Cocos Creator 的集成：Cocos Creator 原生支持 TypeScript，使用 TS 可以更好地与引擎的 API。开发体验：TypeScript 提供了强大的 IDE 支持，包括类型检查、自动补全和重构工具，这些都可以提高开发效率。高效序列化：protobuf 的序列化和反序列化速度非常快，数据体积小，适合网络传输。
【免费下载】 推荐项目：Protobuf-TS —— TypeScript与Protobuf的完美结合
gitblog_00044的博客
04-11 3080
推荐项目：Protobuf-TS —— TypeScript与Protobuf的完美结合 在开发高效率、跨平台的应用程序时，数据序列化和反序列化的工具至关重要。 是一个将Google的Protocol Buffers（简称Protobuf）与TypeScript紧密结合的项目，旨在帮助开发者轻松地利用Protobuf的强大功能，同时享受静态类型系统的安全性和便利性。 项目简介 Protobuf-T...
ts-proto：用于TypeScript的惯用protobuf生成器
02-06
ts-proto ts-proto将您的.proto文件转换为强类型的惯用TypeScript文件！ （请注意，如果您是ts-proto的新用户，并且将现代TS设置与esModuleInterop一起esModuleInterop ，则还需要将其作为ts_proto_opt 。） 目录 总览 ts-proto从protobuf模式生成TypeScript类型。 即给出一个person.proto模式，例如： message Person { string name = 1 ; } ts-proto将生成一个person.ts文件，如下所示： interface Person {
Protobuf-TS v2.10.0 版本发布：更稳定的协议缓冲区工具链
最新发布
gitblog_01399的博客
06-08 519
Protobuf-TS v2.10.0 版本发布：更稳定的协议缓冲区工具链 Protobuf-TS 是一个基于 TypeScript 的 Protocol Buffers 实现，它提供了完整的 protobuf 消息编解码能力，同时支持 gRPC 和 gRPC-Web 客户端与服务端实现。与官方 protobuf.js 相比，Protobuf-TS 更注重类型安全和现代 TypeScript 开发...
TS项目中使用Protobuf的解决方案
woaitingting1985的博客
08-26 3413
H5因为Adobe放弃对Flash Player的维护而又一次火热起来。 目前有laya和egret两个H5游戏引擎，支持AS3、TS、JS三种语言开发。 用H5开发游戏，绕不开与服务器的传输。流行的解决方案就是用protobuf。而JS也有protobuf。我的项目用的是Laya引擎的TS版本，可惜搜索整个网络还没找到TS版本的protobuf，只好用JS版本的了。 protobufjs有3中使用方式，实时解析方式、json解析方式、静态代码方式（事先导出proto的js文件）。 那么三种方式，可想而知
【亲测免费】 Protobuf-TS 使用教程
gitblog_01139的博客
08-08 1734
Protobuf-TS 使用教程 项目介绍 Protobuf-TS 是一个用于 TypeScript 的 Protocol Buffers 实现，它包括一个 protoc 插件，用于从 proto 定义文件生成 TypeScript 代码，以及一些运行时库，这些库被生成的代码使用以保持代码大小较小。生成的代码除了运行时库（@protobuf-ts/runtime）外没有其他依赖，并且严格遵循 pr...
在cocos creator TS 中如何使用protobuf(自动化，评论中有)
nsqks的博客
02-20 1949
// account.proto package protoTest; //角色对象 message Player { optional int64 id = 1; optional string name = 2; optional int32 level = 3;//等级 } npm install protobufjs -g // 全局安装，注：项目中安装也可以，在执行下面命令的时候，指明相对路径 // 并将安装后的目录下的dist/protobuf.js拖到cocos cr
CocosCreator如何生成protobuf文件工程
02-18
这将生成一个`game_pb.js`（或`game_pb.d.ts`如果选择了TypeScript）文件，该文件包含了在CocosCreator项目中使用的protobuf类。 将生成的文件添加到CocosCreator项目的`src`目录中。现在你可以在CocosCreator的...
在Cocos Creator中使用protobuf
niccgz
01-24 2114
项目设置 使用nvm安装protobuf.js插件 下载protobuf.js 导入到工程中，并设置为插件 使用方法 通过命令pbjs将proto生成js $> pbjs -t static-module -w commonjs -o compiled.js file1.proto file2.proto pbts 生成Ts文件 $> pbts -o compiled.d.ts compiled.js 封装发送包 let login = { userID: 1,
websocket+protobuf+cocos creator+客户端+服务端
04-04
开发者首先定义.proto文件，其中包含了数据结构的描述，然后分别在C++（服务端）和客户端使用的语言（可能是JavaScript，因为Cocos Creator主要基于Web）中生成对应的编码和解码函数。这样，客户端和服务端就可以...
Cocos Creator前端TS +webSocket+protoBuf
qq_39258590的博客
01-03 2954
import { app } from "../tools/config"; import { ISendDelegate, IReceiveDelegate } from "./delegate"; import { initSender } from "./send"; import { initReceiver } from "./receive"; import { events, Ev...
egret_protobuf:egret白鹭引擎protobuf 静态解析使用 TS中使用protobuf
05-16
egret_protobuf egret白鹭引擎protobuf 静态解析使用 简书:
websocket-protobufs-ts-experiments:在Typescript中使用协议缓冲区和WebSocket进行实验
05-15
带有协议缓冲区和Typescript的Websocket示例 指示 您需要全局安装的protobufjs和proto2typescript： npm install protobufjs -g npm install proto2typescript -g 要启动服务器，请发出 cd backend mvn jetty:run 要启动客户端，请发出 cd client npm install bower install gulp run 笔记 在Gulp构建/运行任务期间，使用Protobuf.js和Proto2Typescript创建打字稿定义。 没有Typescript（常规Javascript）的版本位于 协议缓冲区定义位于definitions文件夹中。 后端和客户端都从那里使用它。 原型文件中采用了联合类型技术。 这是因为我需要多个命令类型。 参见 待定：prot
libsignal-protocol-protobuf-ts:TypeScript包装的Protobuf，用于Signal消息
04-06
信号协议TypeScript库的协议缓冲区 用于信号协议协议缓冲区消息的TypeScript编码器和解码器。 安装 要安装，只需使用您喜欢的软件包管理器： yarn add @privacyresearch/libsignal-protocol-protobuf-ts 然后，您可以按以下方式导入对象： import { PreKeyWhisperMessage , WhisperMessage } from '@privacyresearch/libsignal-protocol-protobuf-ts' 导入后，这些对象可用于创建，编码和解码协议缓冲区消息。 要创建一个空消息，请使用fromJSON方法，如本例所示： const msg = WhisperMessage . fromJSON ( { } ) 创建后，设置字段并调用encode以创建协议缓冲区消息： // He
proto-to-ts:一个将 *.proto 转换为 *.ts 的简单工具
05-31
pb2ts 将x.proto转换为x.ts的简单工具 用法 npm install -g @indooorsmen/pb2ts@latest pb2ts -f /proto/file/path/x.proto -o /output/path/of/ts/file/x.ts
ts+protobuf+ReconnectingWebSocket
zyh2525246的博客
01-17 585
第三步：生成对应的js以及ts文件。第二步：创建proto后缀文件。
Protobuf-TS 项目教程
gitblog_01112的博客
08-08 517
Protobuf-TS 项目教程 1. 项目的目录结构及介绍 Protobuf-TS 项目的目录结构如下： protobuf-ts/ ├── packages/ │ ├── benchmarks/ │ ├── plugin/ │ ├── runtime/ │ ├── runtime-grpc/ │ ├── runtime-rpc/ │ ├── runtime-ts/ │ ...
JS/TS项目中使用websocket与protobuf
油墨香^-^的博客
05-13 407
在发送消息时，可以先将消息对象序列化成二进制数据，然后再通过WebSocket发送：​​​​​​​。例如，可以创建一个Message对象并设置内容：​​​​​​​。然后，使用Protobuf库的命令行工具将.proto文件编译成对应的JS/TS文件：​​​​​​​。在接收消息时，可以先将接收到的二进制数据反序列化成消息对象，然后再进行处理：​​​​​​​。然后，可以将Message对象序列化成二进制数据：​​​​​​​。事件来处理接收到的消息：​​​​​​​。文件：​​​​​​​。
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 ts使用protobuf
06-03
要在Cocos Creator TypeScript项目中使用Protobuf，您首先需要安装protobuf.js，这是一个用于将Protocol Buffers编译成JavaScript的库。 安装完成后，您需要使用protobuf.js将.proto文件转换成JavaScript文件。您可以使用以下命令： ``` pbjs -t static-module -w commonjs -o yourProtoFile.js yourProtoFile.proto ``` 这将生成一个名为yourProtoFile.js的JavaScript文件，其中包含您的Protocol Buffers消息定义。 接下来，您需要将生成的JavaScript文件添加到您的Cocos Creator TypeScript项目中，并在需要使用它的地方导入它。例如： ``` import { YourMessage } from './yourProtoFile'; ``` 现在，您可以使用YourMessage类来编码和解码您的Protocol Buffers消息。例如： ``` const data = YourMessage.encode(message).finish(); const message = YourMessage.decode(data); ``` 希望这可以帮助您在Cocos Creator TypeScript项目中使用Protobuf。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值