如何五分钟使用 Cocos Creator 快速部署 TON 游戏（第一部分）

 

TON 生态在游戏赛道的火热，吸引了大量的开发者涌入其中，但从技术角度看， EVM 兼容性以及开发语言等方面的问题，基于 TON 底层建立游戏应用对于很多开发者而言仍旧存在较高的门槛。而 Zypher Network 作为目前最先进的区块链游戏开发引擎，支持将 Web2 游戏拓展为 dApp ，开发了大量插件，支持开发者基于 CocosCreator 开发的游戏能够快速部署在 Telegram 生态中，大幅降低开发者基于 TON 网络开发游戏的门槛。

开发者文档

链上游戏领域的新热土： 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 ）的虚拟机，它支持的智能合约编程语言主要是 Fun C 和 TVM 指令集（尽管 Fun C 看起来很像 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 网络会为其委派 zkp 任务（帮助网络中的游戏进行零知识验证并上传至对应的链上），完成零知识验证工作将会获得奖励。矿工质押 Zypher 代币越多，并行处理零知识任务的能力越强，且单次任务所获得的奖励越高。
• 从玩家爱的角度看，通过质押 Zypher 代币，可以免费参与到优质的链上游戏中，质押代币越多，游戏的证明生成度越快、游戏体验越好，且可能领取到的奖励更多。

基于赋有激励的质押经济模型，调动了更多的验证者参与到网络的运行中，进一步提升了网络运行的效率，而玩家也能因质押所提供的激励加成，积极的参与到不同的游戏中，为优质的游戏规模性的捕获活跃用户。

目前， Zypher Network 已经能够支持开发者使用 Cocos Creator 开发游戏，并快速部署到 TON 链上，以下为部署教程的第一个部分，即如何将基于 Cocos Creator 开发的游戏迅速部署到 Telegram 上。

新手指南：五分钟迅速用 Cocos Creator 部署 TON 游戏（第一部分）

一、了解 Cocoscreator

官方网站

• Cocos 官方网站: https://www.cocos.com/

文档地址

• Cocos Creator 文档: https://docs.cocos.com/creator/manual/en/
• Cocos Creator API 参考: https://docs.cocos.com/creator/api/en/

论坛地址

• Cocos 官方论坛: https://forum.cocos.org/

二、 Cocoscreator 版本简介（1. x 基本用不了，大部分都是2. x ,3. x 3d 游戏比较多）

Cocos Creator 是一个完整的游戏开发解决方案，提供了一个集成的开发环境，支持 2D 和 3D 游戏开发。 Cocos Creator 采用组件化和数据驱动的工作流，简化了游戏开发的复杂性。它基于 Cocos 2 d - x 引擎，并且具备强大的扩展性和灵活性。

主要特点包括：

• 组件化设计：开发者可以通过拖拽组件来快速构建游戏逻辑。
• 跨平台支持：支持导出到多个平台，包括 Web 、 iOS 、 Android 、 Windows 、 Mac 等。
• 丰富的编辑工具：提供了场景编辑器、动画编辑器、粒子编辑器、代码编辑器等。
• 脚本支持：主要使用 JavaScript 和 TypeScript 编写游戏逻辑。

Cocos Creator 主要版本及其区别

Cocos Creator 1.x 系列

Cocos Creator 1. x 是 Cocos Creator 的最早版本，主要特点包括：

• 基本功能：基础的场景编辑、组件系统、动画编辑器。
• JavaScript 支持：主要使用 JavaScript 作为脚本语言。
• 基础插件系统：允许开发者扩展编辑器功能。
• Web 和原生平台支持：可以导出到 Web 和原生平台（ iOS 和 Android ）。

Cocos Creator 2.x 系列

Cocos Creator 2. x 系列引入了许多改进和新特性：

• 性能优化：提升了引擎性能，特别是在移动设备上的表现。
• TypeScript 支持：引入了 TypeScript 支持，增强了代码的可维护性和类型安全。
• 物理引擎集成：内置了 Box2 D 和 Chipmunk 物理引擎，支持 2 D 物理效果。
• 资源管理优化：改进了资源管理系统，使资源加载和管理更高效。
• UI 系统增强：增强了 UI 组件和布局系统，提供了更强大的 UI 编辑能力。

Cocos Creator 3.x 系列

Cocos Creator 3. x 系列是一个重大的版本更新，主要特性包括：

• 3D 支持：全面支持 3D 游戏开发，提供了丰富的 3D 功能和编辑器工具。
• 统一的引擎架构：整合了 2D 和 3D 引擎，提供了一致的 API 和工作流。
• 渲染引擎更新：引入了全新的渲染引擎，支持 PBR （基于物理的渲染）、全局光照、阴影等高级效果。
• 增强的动画系统：提供了更强大的动画编辑和播放功能，支持复杂的动画效果。
• 优化的跨平台支持：进一步优化了导出和发布流程，支持更多的平台和设备。
• 编辑器增强：提供了更丰富的编辑器插件和扩展机制，增强了开发者的生产力。

三、启动源码项目（如果你买了一份源码）具体细节看文档

1. 安装 Cocos Creator

如果你还没有安装 Cocos Creator，请前往 Cocos 官方网站 下载并安装最新版本。

2. 打开 Cocos Creator

安装完成后，启动 Cocos Creator 编辑器。

3. 打开项目

1. 导入项目：
   • 在 Cocos Creator 启动界面中，点击 Open Project （打开项目）按钮。
   • 浏览到你获得的 Cocos Creator 项目的源码文件夹，选择该文件夹，然后点击 Select Folder （选择文件夹）。
2. 检查项目配置：
   • 项目成功打开后，检查项目中的 assets 文件夹，确保所有资源文件都在正确的位置。
   • 检查 Project -> Project Settings （项目设置），确保项目的分辨率和其他设置符合你的需求。

4. 运行项目

1. 选择场景：
   • 在 assets 文件夹中，找到你的主场景文件（通常是以 . fire  或 . scene  结尾的文件）。
   • 双击主场景文件，将其在编辑器中打开。
2. 运行项目：
   • 点击编辑器顶部的 Play 按钮（绿色的三角形按钮），在编辑器中预览和运行项目。
   • 如果项目运行正常，你会在编辑器的游戏窗口中看到游戏画面。

5. 构建和发布项目到 Web Mobile

1. 打开构建面板：
   • 在编辑器顶部菜单栏中，选择 Project -> Build （构建）。
2. 选择平台：
   • 在构建面板中，选择 Web Mobile 作为目标平台。
3. 设置构建选项：
   • 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 文件合并到一个文件中。
4. 构建项目：
   • 点击 Build 按钮开始构建项目。
   • 构建完成后，会在设置的构建路径中生成构建输出文件。
5. 发布项目：
   • 将生成的构建输出文件上传到一个支持 HTTPS 的服务器上，可以使用 GitHub Pages 、 Netlify 、 Vercel 或其他静态网站托管服务。

6. 调试和优化

1. 启用 Source Maps ：
   • 在构建面板中启用 Source Maps 选项，可以生成 Source Maps 文件，便于调试发布后的代码。
   • 发布后，可以在浏览器的开发者工具中使用 Source Maps 调试代码。
2. 启用 MD5 缓存：
   • 在构建面板中启用 MD5 Cache 选项，给所有资源文件添加 MD5 哈希值。
   • 这样可以确保用户在更新游戏时不会因为缓存问题而加载旧资源。
3. 调试模式：
   • 在构建面板中启用 Debug Mode 选项，保留调试信息和日志输出。
   • 在发布过程中，如果需要调试，可以在构建面板中启用此选项。

7. 测试项目

1. 本地测试：
   • 在本地服务器上测试构建输出文件，确保游戏在不同浏览器上的表现和兼容性。
   • 可以使用 VS Code 的 Live Server 插件或其他本地服务器工具进行测试。
2. 线上测试：
   • 将构建输出文件上传到服务器后，测试线上版本，确保所有功能正常运行。

通过这些步骤，你可以成功启动和发布一份 Cocos Creator 项目源码到 Web 平台，并了解调试模式、 MD5 缓存等发布属性的配置和使用。

四、以 Protect Trump 为示例，后端 go 部分代码部署说明

Protect Trump 是 Zypher Network 与第三方合作开发团队合作的小游戏，该游戏通过 Zypher Network 底层引擎部署在 TON 上。

1.新建一个新的场景，场景新建一个node，挂载脚本GameLanch.ts.
（我这里还放了主界面的背景图，让提前点加载，可以不用放。）

2.GameLanch.ts.

在 UIConfig . ts 文件中配置页面信息

使用 ui Manager 的接口控制 ui

3.tg数据获取

在模版文件夹 build - teleplates / web - mobile / index . html 里面添加引入

在游戏脚本里面也了相关的引入。方便调试模式使用

把获取的 window [' Telegram ']?. WebApp ?. initData ;发给服务器进行校验

4.简单说下rank

给 rank 页面添加 UIRank . ts 脚本
UIRank 继承 UIView 类后就可以通过 uiManager 管理页面

5.简单说下reward

界面主要挂了 3 个脚本

具体内容看脚本

分享代码：

6.启动页修改，在模版里面修改页面的启动页。

主要修改 index . html 和 application . js

加了一个背景图和进度条

7.发布游戏

https://docs.cocos.com/creator/3.8/manual/zh/editor/publish/publish-web.html

https://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 = localhost DB _ USER = your _ db _ user DB _ PASSWORD = your _ db _ password DB _ NAME = your _ db _ name DB _ PORT =5432 DB _ SSLMODE = disable DB _ TIMEZONE = Asia / Shanghai TG _ BOT _ TOKEN = your _ telegram _ bot _ token PORT =8080

4.数据库配置与迁移

应用使用 GORM 进行数据库操作，在启动时会自动迁移以下数据模型：

• User ：用户信息，包括 Telegram ID 、用户名、金币等。
• Bodyguard ：保镖信息，关联到用户。
• Buff ：增益效果（ Buff ），关联到保镖。
• CoinRecord ：金币记录。
• InvitedUser ：受邀请的用户信息。

在 main . go  文件中，通过以下代码连接并迁移数据库：

5.定时任务

应用程序包含两个定时任务：

1. 清理任务：每5分钟运行一次，用于清理无效或过期的数据。
2. 排行榜更新任务：每分钟运行一次，用于更新用户的金币排行榜

tasks . StartCleanupTask ( db , time . Minute *5) tasks . StartLeaderboardUpdateTask ( db , time . Minute *1)

6.中间件

1. AuthMiddleware

• 描述：用于验证请求中的 Telegram 初始化数据是否有效。
• 参数：
  • next ：下一个处理程序
  • bot Token ： Telegram 机器人的 Token

六、创建 Telegram Bot 和 Web App 的详细步骤

1.创建 Bot

1. 搜索 BotFather
   • 打开 Telegram ，搜索 Bot Father ，这是 Telegram 官方的 Bot 管理工具。
2. 启动对话
   • 输入 / start 来启动与 BotFather 的对话。
3. 新建 Bot
   • 输入 / newbot 创建一个新的 Bot 。
4. 输入 Bot 名字
   • 选择一个名字，输入 protectRump 。
5. 输入 Bot 用户名
   • 用户名必须以 Bot 或 _ bot  结尾。例如：protectRump Bot 。
6. 保存 Token
   • 创建成功后， BotFather 会生成一个 API Token 。记下这个 Token ，用于后续步骤。

2.创建 Web App

1. 启动 Web App 创建
   • 在 BotFather 中输入 / newapp  来创建一个新的 Web App 。
2. 选择 Bot
   • 选择你刚刚创建的 Bot ，例如 protectRump Bot 。
3. 输入 Web App 名字
   • 输入你的 Web App 的名字。
   • description 修改 webapp 的描述。即 What can this bot do ?的内容
4. 上传图片
   • 输入一张 640*360 的图片，作为 Web App 的图标。
   • botpic 修改头像
5. 上传 GIF
   • 输入一个 GIF 文件。如果没有，可以输入 / empty 跳过此步骤。
6. 输入 Web App URL
   • 输入你的游戏地址，例如 https :// protect - rump . zypher . game /。
7. 输入短名
   • 取一个短名，用于 Web App 的链接，例如 protectRump 。
8. 完成创建
   • 创建成功后，你会得到你的 Web App 链接，例如 me / protectRump Bot / protectRump 。

通过以上步骤，你已经成功创建了一个 Telegram Bot 和 Web App 。接下来，你可以在你的 Web App 中集成游戏，并使用 Telegram 的 Web App 接口进行交互。

3.测试环境配置

https://core.telegram.org/bots/webapps#using-bots-in-the-test-environment

（未完）

总结

Cocos Creator 作为目前主流的游戏编辑器，正在被越来越多的开发者所采用。其强大的功能、开发者熟悉的变成呢过、灵活的开发环境以及广泛的跨平台支持，使得它在游戏开发领域备受青睐。 Zypher Network 通过对 Cocos Creator 的兼容以及对 TON 网络的整合，正在大幅降低游戏开发者将应用部署、迁移至 TON 网络中的门槛，将复杂的问题进一步简化。并在游戏成功部署后，基于零知识证明方案为游戏更为流畅、低成本的运行提供支持。

而随着 Zypher Network 向更多的链上生态拓展，其也将将成为 Web3 时代最重要的游戏基建设施。