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

行业速递
2024-08-30 15:53:15
收藏
Cocos Creator 作为目前主流的游戏编辑器,正在被越来越多的开发者所采用。

 

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 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 时代最重要的游戏基建设施。

链捕手ChainCatcher提醒,请广大读者理性看待区块链,切实提高风险意识,警惕各类虚拟代币发行与炒作, 站内所有内容仅系市场信息或相关方观点,不构成任何形式投资建议。如发现站内内容含敏感信息,可点击“举报”,我们会及时处理。
ChainCatcher 与创新者共建Web3世界