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

区块链小八歌

于 2024-09-01 16:15:24 发布

阅读量459

点赞数 10

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_53694853/article/details/141785747

版权

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 网络会为其委派 zkp 任务（帮助网络中的游戏进行零知识验证并上传至对应的链上），完成零知识验证工作将会获得奖励。矿工质押 Zypher 代币越多，并行处理零知识任务的能力越强，且单次任务所获得的奖励越高。
从玩家爱的角度看，通过质押 Zypher 代币，可以免费参与到优质的链上游戏中，质押代币越多，游戏的证明生成度越快、游戏体验越好，且可能领取到的奖励更多。

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

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

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

一、了解Cocoscreator

官方网站

Cocos 官方网站:cocos.com/

文档地址

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

论坛地址

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

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

Cocos Creator 是一个完整的游戏开发解决方案，提供了一个集成的开发环境，支持 2D 和 3D 游戏开发。Cocos Creator 采用组件化和数据驱动的工作流，简化了游戏开发的复杂性。它基于 Cocos2d-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 支持，增强了代码的可维护性和类型安全。
物理引擎集成：内置了 Box2D 和 Chipmunk 物理引擎，支持 2D 物理效果。
资源管理优化：改进了资源管理系统，使资源加载和管理更高效。
UI 系统增强：增强了 UI 组件和布局系统，提供了更强大的 UI 编辑能力。

Cocos Creator 3.x 系列

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

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

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

1. 安装 Cocos Creator

如果你还没有安装 Cocos Creator，请安装最新版本。

2. 打开 Cocos Creator

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

3. 打开项目

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

4. 运行项目

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

5. 构建和发布项目到 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 或其他静态网站托管服务。

6. 调试和优化

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

7. 测试项目

本地测试：
在本地服务器上测试构建输出文件，确保游戏在不同浏览器上的表现和兼容性。
可以使用 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);

//end
this.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=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 文件中，通过以下代码连接并迁移数据库：

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.定时任务

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

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

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

6.中间件

1. AuthMiddleware

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

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

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

2.创建 Web App

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

通过以上步骤，你已经成功创建了一个 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 时代最重要的游戏基建设施。

区块链小八歌

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
如何五分钟使用 Cocos Creator 快速部署 TON 游戏（第一部分）

Cocos Creator 是一个完整的游戏开发解决方案，提供了一个集成的开发环境，支持 2D 和 3D 游戏开发。Cocos Creator 采用组件化和数据驱动的工作流，简化了游戏开发的复杂性。它基于 Cocos2d-x 引擎，并且具备强大的扩展性和灵活性。主要特点包括：组件化设计：开发者可以通过拖拽组件来快速构建游戏逻辑。跨平台支持：支持导出到多个平台，包括 Web、iOS、Android、Windows、Mac 等。丰富的编辑工具：提供了场景编辑器、动画编辑器、粒子编辑器、代码编辑器等。
复制链接

扫一扫