如何五分钟使用 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. 打开项目
- 导入项目:
- 在 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.
在 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 请求的函数 |
3.环境配置
DB _ HOST = localhost |
4.数据库配置与迁移
应用使用 GORM 进行数据库操作,在启动时会自动迁移以下数据模型:
- User :用户信息,包括 Telegram ID 、用户名、金币等。
- Bodyguard :保镖信息,关联到用户。
- Buff :增益效果( Buff ),关联到保镖。
- CoinRecord :金币记录。
- InvitedUser :受邀请的用户信息。
在 main . go 文件中,通过以下代码连接并迁移数据库:
5.定时任务
应用程序包含两个定时任务:
- 清理任务:每5分钟运行一次,用于清理无效或过期的数据。
- 排行榜更新任务:每分钟运行一次,用于更新用户的金币排行榜
tasks . StartCleanupTask ( db , time . Minute *5) |
6.中间件
1. AuthMiddleware
- 描述:用于验证请求中的 Telegram 初始化数据是否有效。
- 参数:
- next :下一个处理程序
- bot Token : Telegram 机器人的 Token
六、创建 Telegram Bot 和 Web App 的详细步骤
1.创建 Bot
- 搜索 BotFather
- 打开 Telegram ,搜索 Bot Father ,这是 Telegram 官方的 Bot 管理工具。
- 启动对话
- 输入 / start 来启动与 BotFather 的对话。
- 新建 Bot
- 输入 / newbot 创建一个新的 Bot 。
- 输入 Bot 名字
- 选择一个名字,输入 protectRump 。
- 输入 Bot 用户名
- 用户名必须以 Bot 或 _ bot 结尾。例如:protectRump Bot 。
- 保存 Token
- 创建成功后, BotFather 会生成一个 API Token 。记下这个 Token ,用于后续步骤。
2.创建 Web App
- 启动 Web App 创建
- 在 BotFather 中输入 / newapp 来创建一个新的 Web App 。
- 选择 Bot
- 选择你刚刚创建的 Bot ,例如 protectRump Bot 。
- 输入 Web App 名字
- 输入你的 Web App 的名字。
- description 修改 webapp 的描述。即 What can this bot do ?的内容
- 上传图片
- 输入一张 640*360 的图片,作为 Web App 的图标。
- botpic 修改头像
- 上传 GIF
- 输入一个 GIF 文件。如果没有,可以输入 / empty 跳过此步骤。
- 输入 Web App URL
- 输入你的游戏地址,例如 https :// protect - rump . zypher . game /。
- 输入短名
- 取一个短名,用于 Web App 的链接,例如 protectRump 。
- 完成创建
- 创建成功后,你会得到你的 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 时代最重要的游戏基建设施。