如何五分鐘使用 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 （選擇文件夾）。

1. 檢查項目配置 ：

• 項目成功打開後，檢查項目中的 assets 文件夾，確保所有資源文件都在正確的位置。
• 檢查 Project -> Project Settings （項目設置），確保項目的分辨率和其他設置符合你的需求。

4. 運行項目

1. 選擇場景 ：

• 在 assets 文件夾中，找到你的主場景文件（通常是以 . fire 或 . scene 結尾的文件）。
• 雙擊主場景文件，將其在編輯器中打開。

1. 運行項目 ：

• 點擊編輯器頂部的 Play 按鈕（綠色的三角形按鈕），在編輯器中預覽和運行項目。
• 如果項目運行正常，你會在編輯器的遊戲窗口中看到遊戲畫面。

5. 構建和發布項目到 Web Mobile

1. 打開構建面板 ：

• 在編輯器頂部菜單欄中，選擇 Project -> Build （構建）。

1. 選擇平台 ：

• 在構建面板中，選擇 Web Mobile 作為目標平台。

1. 設置構建選項 ：

• 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 文件合併到一個文件中。

1. 構建項目 ：

• 點擊 Build 按鈕開始構建項目。
• 構建完成後，會在設置的構建路徑中生成構建輸出文件。

1. 發布項目 ：

• 將生成的構建輸出文件上傳到一個支持 HTTPS 的伺服器上，可以使用 GitHub Pages 、 Netlify 、 Vercel 或其他靜態網站托管服務。

6. 調試和優化

1. 啟用 Source Maps ：

• 在構建面板中啟用 Source Maps 選項，可以生成 Source Maps 文件，便於調試發布後的代碼。
• 發布後，可以在瀏覽器的開發者工具中使用 Source Maps 調試代碼。

1. 啟用 MD5 緩存 ：

• 在構建面板中啟用 MD5 Cache 選項，給所有資源文件添加 MD5 哈希值。
• 這樣可以確保用戶在更新遊戲時不會因為緩存問題而加載舊資源。

1. 調試模式 ：

• 在構建面板中啟用 Debug Mode 選項，保留調試信息和日誌輸出。
• 在發布過程中，如果需要調試，可以在構建面板中啟用此選項。

7. 測試項目

1. 本地測試 ：

• 在本地伺服器上測試構建輸出文件，確保遊戲在不同瀏覽器上的表現和兼容性。
• 可以使用 VS Code 的 Live Server 插件或其他本地伺服器工具進行測試。

1. 線上測試 ：

• 將構建輸出文件上傳到伺服器後，測試線上版本，確保所有功能正常運行。

通過這些步驟，你可以成功啟動和發布一份 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 管理工具。

1. 啟動對話

• 輸入 / start 來啟動與 BotFather 的對話。

1. 新建 Bot

• 輸入 / newbot 創建一個新的 Bot 。

1. 輸入 Bot 名字

• 選擇一個名字，輸入 protectRump 。

1. 輸入 Bot 用戶名

• 用戶名必須以 Bot 或 _ bot 結尾。例如：protectRump Bot 。

1. 保存 Token

• 創建成功後， BotFather 會生成一個 API Token 。記下這個 Token ，用於後續步驟。

2.創建 Web App

1. 啟動 Web App 創建

• 在 BotFather 中輸入 / newapp 來創建一個新的 Web App 。

1. 選擇 Bot

• 選擇你剛剛創建的 Bot ，例如 protectRump Bot 。

1. 輸入 Web App 名字

• 輸入你的 Web App 的名字。
• description 修改 webapp 的描述。即 What can this bot do ?的內容

1. 上傳圖片

• 輸入一張 640*360 的圖片，作為 Web App 的圖標。
• botpic 修改頭像

1. 上傳 GIF

• 輸入一個 GIF 文件。如果沒有，可以輸入 / empty 跳過此步驟。

1. 輸入 Web App URL

• 輸入你的遊戲地址，例如 https :// protect - rump . zypher . game /。

1. 輸入短名

• 取一個短名，用於 Web App 的鏈接，例如 protectRump 。

1. 完成創建

• 創建成功後，你會得到你的 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 時代最重要的遊戲基建設施。