如何五分钟使用 Cocos Creator 快速部署 TON 游戏（第一部分）
TON 生态在游戏赛道的火热，吸引了大量的开发者涌入其中，但从技术角度看，EVM 兼容性以及开发语言等方面的问题，基于 TON 底层建立游戏应用对于很多开发者而言仍旧存在较高的门槛。而 Zypher Network 作为目前最先进的区块链游戏开发引擎，支持将 Web2 游戏拓展为 dApp ，开发了大量插件，支持开发者基于 CocosCreator 开发的游戏能够快速部署在 Telegram 生态中，大幅降低开发者基于 TON 网络开发游戏的门槛。
开发者文档：docs.zypher.network/blog/cocos-tg/链上游戏领域的新热土：TON 生态
TON（The Open Network）正在成为近期最热门的公链之一，通过与背靠 9 亿用户的社交平台 Telegram 深度的绑定在短期内吸引了大量的注意力。基于 TON 底层开发者的应用能够以“小程序”的方式无缝集成在 Telegram 中，用户可以直接以 Telegram 为入口访问、使用各类 TON 生态的 dAPPs，大幅降低了用户的触达门槛。
从现阶段看，TON 生态正在成为链上小游戏的新热土，除了开发成本低廉外、TON 链整体交易成本低廉外，链上游戏可以充分利用 Telegram 庞大的流量池来进行用户转换和裂变，并且中的 Telegram “小程序应用” 天然的可以和游戏产品结合，丰富扩展功能，无缝的支持数据存储、互动游戏以及交易支付。基于此，链上游戏项目可以利用这些功能，提供多样化的游戏玩法和经济模式。
事实上一些小游戏的火爆也对上述观点有所印证，比如基于 Telegram 的点击游戏的风靡，热门的代表 Notcoin ，通过奖励用户点击屏幕的方式吸引了超 3500 万用户，Hamster Kombat 则公开用户数据称其累计用户已达 2 亿。以猫为主题的任务类小游戏 Catizen，已有超过 2000 万的用户，付费用户超过 50 万，甚至 Notcoin 的仿盘 Yescoin 的订阅关注者都已经早早突破了 600 万用户。
而链上小游戏与 TON 生态之间也是相互成就，从用户数据看，自 2024 年年初以来，在系列热门小游戏的带动下 TON 生态异军突起，截止 8 月中旬已激活的链上钱包超过了 1200 万个（1 月份数据约 100 万个），每月活跃钱包数量为 420 万个（1 月份约 30 万个）。
目前，TON 生态也吸引了大量的 Web2、Web3 游戏开发者涌入其中，并期望从庞大的注意力体系中捕获到早期的红利。
TON 网络的技术壁垒
事实上，TON 使用的是一种名为 TVM（TON Virtual Machine）的虚拟机，它支持的智能合约编程语言主要是 FunC 和 TVM 指令集（尽管 FunC 看起来很像 C 语言，但一般不为人所知或推崇），这些语言和虚拟机架构与以太坊的 EVM 以及 Solidity 编程语言有较大不同。与此同时，TON 的设计包括了多线程区块链架构，允许不同的分片链并行运行。这种架构的设计可以提升网络性能，但也增加了开发的复杂性。开发者需要理解如何在多个分片之间有效协调数据和逻辑，这比传统的单链架构更具挑战性。
所以说无论是对于 Web2 开发者还是 Web3 开发者，面对 TON 底层或多或少的都会面临一定的开发门槛。
Zypher Network
Zypher Network 是以零知识证明技术为核心的新一代游戏引擎方案，其能够帮助开发者更易进入到区块链领域，并以模块化、可插拔化的方式，对链上功能进行深入的拓展，以大幅降低开发者构建区块链游戏时的门槛。同时 Zypher Network 在现有链上设施的基础上，进一步构建一套能够服务于链游的底层游戏设施，并为游戏的去中心化运行提供完美的支持。
现阶段，Zypher Network 推出了一个服务于开发者的 Services SDK 工具包，开发者可以以插拔化的方式直接利用“固有”的零知识功能进行开发，如 Shuffle、Rollup 等，而无需了解零知识电路的复杂性。这种用户友好的方法可以立即实施，极大地简化了开发过程。同时，该工具包提供了各种小工具和电路，开发者可以以最小的编码工作量“组装”，类似于用乐高积木搭建。模块化方法使得可以创建定制的电路逻辑以满足特定要求。开发者可以从基本操作开始，逐渐构建更复杂的逻辑以满足其需求。
此外，为了对绝大多数链标准进行适配，对于游戏逻辑编写，该框架还进一步支持了第三方领域特定语言（DSL）和零知识虚拟机（ZKVM），并提供针对这些系统定制的链上验证 SDK，以提供更多的灵活性和定制选项。
基于上述开发工具包，开发者能够基于其熟悉的语言在不同的链上低门槛的部署应用，并基于 Zypher Network 的 zk 技术方案保证游戏高效、低成本运行，一些 Web2 游戏甚至能够基于引擎直接拓展为 dApps 并部署至链上。
与此同时为了提供用户产品级别的 zk 体验 ，Zypher 推出了一个以代币“质押”为核心的经济模型，即玩家以及链上验证（网络矿工）可以通过质押 Zypher 代币来从网络中捕获资源。
基于赋有激励的质押经济模型，调动了更多的验证者参与到网络的运行中，进一步提升了网络运行的效率，而玩家也能因质押所提供的激励加成，积极的参与到不同的游戏中，为优质的游戏规模性的捕获活跃用户。
目前，Zypher Network 已经能够支持开发者使用 CocosCreator 开发游戏，并快速部署到 TON 链上，以下为部署教程的第一个部分，即如何将基于 Cocos Creator 开发的游戏迅速部署到 Telegram 上。
新手指南：五分钟迅速用 Cocos Creator 部署 TON 游戏（第一部分）
一、了解 Cocoscreator 官方网站
文档地址
论坛地址
二、Cocoscreator 版本简介（1.x 基本用不了，大部分都是 2.x,3.x 3d 游戏比较多）
Cocos Creator 是一个完整的游戏开发解决方案，提供了一个集成的开发环境，支持 2D 和 3D 游戏开发。Cocos Creator 采用组件化和数据驱动的工作流，简化了游戏开发的复杂性。它基于 Cocos2d-x 引擎，并且具备强大的扩展性和灵活性。
主要特点包括：
Cocos Creator 主要版本及其区别 Cocos Creator 1.x 系列
Cocos Creator 1.x 是 Cocos Creator 的最早版本，主要特点包括：
Cocos Creator 2.x 系列
Cocos Creator 2.x 系列引入了许多改进和新特性：
Cocos Creator 3.x 系列
Cocos Creator 3.x 系列是一个重大的版本更新，主要特性包括：
三、启动源码项目（如果你买了一份源码）具体细节看文档
安装 Cocos Creator
如果你还没有安装 Cocos Creator，请安装最新版本。2. 打开 Cocos Creator
安装完成后，启动 Cocos Creator 编辑器。3. 打开项目
运行项目
选择场景：
在 assets 文件夹中，找到你的主场景文件（通常是以 .fire 或 .scene 结尾的文件）。
双击主场景文件，将其在编辑器中打开。
运行项目：
点击编辑器顶部的 Play 按钮（绿色的三角形按钮），在编辑器中预览和运行项目。
如果项目运行正常，你会在编辑器的游戏窗口中看到游戏画面。
构建和发布项目到 Web Mobile
打开构建面板：
在编辑器顶部菜单栏中，选择 Project -> Build（构建）。
选择平台：
在构建面板中，选择 Web Mobile 作为目标平台。
设置构建选项：
Build Path（构建路径）：设置构建输出的文件夹路径。
Start Scene（启动场景）：选择游戏启动时加载的场景。
Main Bundle Compression Type（主包压缩类型）：选择压缩类型（如 None, Zip, JPG 等）。
Zip Compression Level（Zip 压缩级别）：如果选择了 Zip 压缩类型，可以设置压缩级别。
MD5 Cache：启用 MD5 缓存，给所有资源文件添加 MD5 哈希值，用于版本控制和缓存管理。
Source Maps：生成 Source Maps 文件，便于调试。
Debug Mode（调试模式）：启用调试模式，可以在发布后的代码中保留调试信息和日志输出。
Inline all Sprite Frames（内联所有精灵帧）：将所有精灵帧内联到一个文件中。
Merge all JSON Files（合并所有 JSON 文件）：将所有 JSON 文件合并到一个文件中。
构建项目：
点击 Build 按钮开始构建项目。
构建完成后，会在设置的构建路径中生成构建输出文件。
发布项目：
将生成的构建输出文件上传到一个支持 HTTPS 的服务器上，可以使用 GitHub Pages、Netlify、Vercel 或其他静态网站托管服务。
调试和优化
启用 Source Maps：
在构建面板中启用 Source Maps 选项，可以生成 Source Maps 文件，便于调试发布后的代码。
发布后，可以在浏览器的开发者工具中使用 Source Maps 调试代码。
启用 MD5 缓存：
在构建面板中启用 MD5 Cache 选项，给所有资源文件添加 MD5 哈希值。
这样可以确保用户在更新游戏时不会因为缓存问题而加载旧资源。
调试模式：
在构建面板中启用 Debug Mode 选项，保留调试信息和日志输出。
在发布过程中，如果需要调试，可以在构建面板中启用此选项。
测试项目
本地测试：
在本地服务器上测试构建输出文件，确保游戏在不同浏览器上的表现和兼容性。
可以使用 VS Code 的 Live Server 插件或其他本地服务器工具进行测试。
线上测试：
将构建输出文件上传到服务器后，测试线上版本，确保所有功能正常运行。
通过这些步骤，你可以成功启动和发布一份 Cocos Creator 项目源码到 Web 平台，并了解调试模式、MD5 缓存等发布属性的配置和使用。
四、以 Protect Trump 为示例，后端 go 部分代码部署说明
Protect Trump 是 Zypher Network 与第三方合作开发团队合作的小游戏，该游戏通过 Zypher Network 底层引擎部署在 TON 上。1.新建一个新的场景，场景新建一个 node，挂载脚本 GameLanch.ts.（我这里还放了主界面的背景图，让提前点加载，可以不用放。）2.GameLanch.ts.
//管理全局数据 PlayerModel.inst.init();
//初始化游戏框架 this.node.addComponent(ResMgr);this.node.addComponent(UIConfig);
//endthis.node.addComponent(GameApp);
在 UIConfig.ts 文件中配置页面信息使用 uiManager 的接口控制 ui
uiManager.open(UIID.UILoading);
3.tg 数据获取
在模版文件夹 build-teleplates/web-mobile/index.html 里面添加引入
<script async src="https://telegram.org/js/telegram-web-app.js"></script>
在游戏脚本里面也了相关的引入。方便调试模式使用
// 创建并插入 Telegram Web 应用 SDK 的脚本
loadTelegramSDK() {
// this.url.string = 'loadTelegramSDK'
return new Promise<void>((resolve, reject) => {
if (window['Telegram'] && window['Telegram'].WebApp) {
// Telegram SDK 已经加载
console.log('Telegram SDK 已经加载:', window['Telegram']);
window['Telegram'].WebApp.ready();
resolve();
return;
}
const script = document.createElement('script');
script.src = 'https://telegram.org/js/telegram-web-app.js';
script.onload = () => {
console.log('SDK 加载成功:', window['Telegram']);
window['Telegram'].WebApp.ready();
// SDK 加载成功
resolve();
};
script.onerror = error => {
console.log('SDK 加载失败:', error);
// SDK 加载失败
reject(error);
};
document.head.appendChild(script);
});
}
processInitData() {
const initData = window['Telegram']?.WebApp?.initData;
if (initData) {
const searchParams = new URLSearchParams(initData);
const WebAppData = {};
for (const [key, value] of searchParams.entries()) {
WebAppData[key] = value;
}
console.log('WebAppData:', WebAppData);
// 获取用户信息
const user = window['Telegram'].WebApp.initDataUnsafe;
console.log('User:', user);
// this.WebAppData = WebAppData;
// 处理窗口大小变化
window['Telegram'].WebApp.onEvent('resize', function () {
// 更新 UI
console.log('更新 UI:');
});
this.tgInitData = initData;
} else {
console.warn('Telegram WebApp initData is not available.');
}
}
async initTelegram() {
try {
await this.loadTelegramSDK();
this.processInitData();
} catch (error) {
console.error('Failed to load Telegram SDK:', error);
}
}
把获取的 window['Telegram']?.WebApp?.initData;发给服务器进行校验
4.简单说下 rank
给 rank 页面添加 UIRank.ts 脚本 UIRank 继承 UIView 类后就可以通过 uiManager 管理页面
export default class UIRank extends UIView//获取排行榜数据 let ranksRes = await Http.getAllCoinsRank(PlayerModel.inst.tgInitData);
this.list.refreshData(ranks);//显示到组建 5.简单说下 reward
界面主要挂了 3 个脚本
UIReward.ts//页面脚本主要控制奖励和邀请列表两个页面 RewardTabCtrl.ts//控制奖励和邀请显示内容 InviteTabCtrl.ts//控制邀请列表的显示
具体内容看脚本
分享代码：
onCopy() {let linkUrl = PlayerModel.inst.link?.invite_link;this.tg_link.string = linkUrl;// 复制邀请链接到剪切板 this.copyToClipboard(linkUrl + " Hey there! I just found this awesome Telegram game called Protect T-RUMP! Join me in defending Trump from various threats during the campaign. We can hire and train bodyguards, complete exciting missions, and team up with friends to keep Trump safe. Click now to earn even more rewards! 🎮✨");uiManager.open(UIID.CopySuccess);}
onInvite() {let linkUrl = PlayerModel.inst.link?.invite_link;// 复制邀请链接到剪切板 this.copyToClipboard(linkUrl);this.onShareButtonClick(linkUrl,'Hey there! I just found this awesome Telegram game called Protect T-RUMP! Join me in defending Trump from various threats during the campaign. We can hire and train bodyguards, complete exciting missions, and team up with friends to keep Trump safe. Click now to earn even more rewards! 🎮✨')}
onShareButtonClick(url, text = '') {const shareUrl = 'https://t.me/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text);window.open(shareUrl, '_blank');}
6.启动页修改，在模版里面修改页面的启动页。
主要修改 index.html 和 application.js
加了一个背景图和进度条
7.发布游戏
docs.cocos.com/creator/3.8/manual/zh/editor/publish/publish-web.html
docs.cocos.com/creator/3.8/manual/zh/editor/publish/custom-project-build-template.html
参考这两个文档，目前手动发布，后续可以命令行发布，正式上线 md5 别忘了哦
五、Protect Trump 后端 go 部分代码说明
1.概述
Protect Trump 游戏作为基于 Go 语言和 GORM 框架的后端应用，主要用于处理 Telegram Web 应用用户的登录、游戏交互和奖励领取等功能。应用通过多个 RESTful API 接口与前端进行通信，并使用 PostgreSQL 数据库存储和管理用户数据、保镖、增益效果（Buff）及奖励信息。2.目录结构
.├── handlers # 处理 HTTP 请求的函数├── middlewares # 中间件，用于验证 Telegram 的数据├── models # 数据库模型定义├── tasks # 定时任务，如排行榜更新和清理任务├── utils # 工具函数，如提取 Telegram 用户数据└── main.go # 应用程序的入口
3.环境配置
DB_HOST=localhostDB_USER=your_db_userDB_PASSWORD=your_db_passwordDB_NAME=your_db_nameDB_PORT=5432DB_SSLMODE=disableDB_TIMEZONE=Asia/ShanghaiTG_BOT_TOKEN=your_telegram_bot_tokenPORT=8080
4.数据库配置与迁移
应用使用 GORM 进行数据库操作，在启动时会自动迁移以下数据模型：
在 main.go 文件中，通过以下代码连接并迁移数据库：
dsn := "host=" + os.Getenv("DB_HOST") +" user=" + os.Getenv("DB_USER") +" password=" + os.Getenv("DB_PASSWORD") +" dbname=" + os.Getenv("DB_NAME") +" port=" + os.Getenv("DB_PORT") +" sslmode=" + os.Getenv("DB_SSLMODE") +" TimeZone=" + os.Getenv("DB_TIMEZONE")
db, err := gorm.Open(postgres.Open(dsn), &gorm.Config{})if err != nil {log.Fatalf("Failed to connect to the database: %v", err)}
db.AutoMigrate(&models.User{}, &models.Bodyguard{}, &models.Buff{}, &models.CoinRecord{}, &models.InvitedUser{})
5.定时任务
应用程序包含两个定时任务：
tasks.StartCleanupTask(db, time.Minute5)tasks.StartLeaderboardUpdateTask(db, time.Minute1)
6.中间件
AuthMiddleware
描述：用于验证请求中的 Telegram 初始化数据是否有效。
参数：
func AuthMiddleware(next http.HandlerFunc, botToken string) http.HandlerFunc {return func(w http.ResponseWriter, r *http.Request) {body, err := io.ReadAll(r.Body)if err != nil {http.Error(w, "无效的请求体", http.StatusBadRequest)return}defer r.Body.Close()
var req struct {TelegramInitData string json:"telegram_init_data"}if err := json.Unmarshal(body, &req); err != nil {http.Error(w, "无效的请求体", http.StatusBadRequest)return}
if !validateTelegramData(req.TelegramInitData, botToken) {http.Error(w, "无效的 Telegram 数据", http.StatusUnauthorized)return}
r.Body = io.NopCloser(bytes.NewBuffer(body))next.ServeHTTP(w, r)}}
六、创建 Telegram Bot 和 Web App 的详细步骤 1.创建 Bot
2.创建 Web App
通过以上步骤，你已经成功创建了一个 Telegram Bot 和 Web App。接下来，你可以在你的 Web App 中集成游戏，并使用 Telegram 的 Web App 接口进行交互。3.测试环境配置
core.telegram.org/bots/webapps#using-bots-in-the-test-environment
（未完）
总结
Cocos Creator 作为目前主流的游戏编辑器，正在被越来越多的开发者所采用。其强大的功能、开发者熟悉的变成呢过、灵活的开发环境以及广泛的跨平台支持，使得它在游戏开发领域备受青睐。Zypher Network 通过对 Cocos Creator 的兼容以及对 TON 网络的整合，正在大幅降低游戏开发者将应用部署、迁移至 TON 网络中的门槛，将复杂的问题进一步简化。并在游戏成功部署后，基于零知识证明方案为游戏更为流畅、低成本的运行提供支持。
而随着 Zypher Network 向更多的链上生态拓展，其也将将成为 Web3 时代最重要的游戏基建设施。
还未添加个人签名 2021-06-18 加入
还未添加个人简介
评论