手把手教学：在Cocos Creator中快速接入Protobuf

FushanCode

已于 2025-06-10 09:04:35 修改

阅读量407

点赞数 5

CC 4.0 BY-SA版权

分类专栏： # Cocos-实战篇文章标签：游戏 chrome 游戏引擎

于 2025-06-09 00:53:21 首次发布

本文链接：https://blog.youkuaiyun.com/Fushan98/article/details/148519356

Cocos-实战篇专栏收录该内容

2 篇文章

订阅专栏

1. Protocol Buffers (Protobuf)是什么？

1.1 是什么？
Google 开发的高效二进制数据序列化格式，用于结构化数据存储/传输。
特点：体积小、速度快、跨语言、可扩展。
1.2 核心用途
网络通信：游戏客户端与服务器数据传输。
数据存储：高效存储结构化数据（如存档）。

2. 在cocoscreator中使用protobuf

1.安装与配置（项目本地化）

# 在项目根目录（与 assets 同级）执行
npm install protobufjs --save

protobufcli（npm install --save protobufjs-cli）

#不想全局安装，可通过项目本地 npx 调用
npm install protobufjs-cli --save-dev
# 使用 npx 运行
npx pbjs -t static-module -o bundle.js *.proto

# 如果想使用指定版本,需卸载当前版本
npm uninstall protobufjs
# 然后重新安装指定版本
npm install protobufjs@版本号.x

注意：
1.安装后package.json查看对应版本

"dependencies": {
    "protobufjs": "^6.11.4"
  }

2.编写 .proto 文件（player.proto）

syntax = "proto3";  // 指定使用 proto3 语法（必须）

// 定义消息（Message）
message Player {
  uint32 id = 1;     // 字段格式：类型 字段名 = 标签号（必须唯一）
  string name = 2;
  repeated string items = 3;  // repeated 表示数组/列表
  Position pos = 4;       // 嵌套消息

  // 枚举类型
  enum Status {
    OFFLINE = 0;
    ONLINE = 1;
  }
  Status status = 5;
}

// 嵌套消息定义
message Position {
  float x = 1;
  float y = 2;
}

3.编译为 JS/TS 代码

# 生成静态 JS 文件（推荐）
pbjs -t static-module -w commonjs -o proto.js *.proto
#本项目下使用 npx 运行
npx pbjs -t static-module -w commonjs -o proto.js *.proto

# 生成 TS 声明文件（用于类型提示）
pbts -o proto.d.ts proto.js

在这里插入图片描述
例子

npx pbjs -t static-module -w commonjs -o assets/scripts/protobuf/player.js assets/resources/protos/*.proto

在这里插入图片描述

 npx pbts -o assets/scripts/protobuf/player.d.ts assets/scripts/protobuf/player.js

在这里插入图片描述
4：在 Cocos 中使用(3.x)
1.导入 protobuf.js 运行时库
2.修改生成的 player.js

// 修改前
var $protobuf = require("protobufjs/minimal");

// 修改后
var $protobuf = protobuf; // 使用全局 protobuf 对象

3.修改d.ts

import * as $protobuf from "./protobuf"

在这里插入图片描述