WEEX 唯客博客， TON 生態在遊戲賽道的火熱，吸引了大量的開發者湧入其中，但從技術角度看， EVM 兼容性以及開發語言等方面的問題，基於 TON 底層建立遊戲應用對於很多開發者而言仍舊存在較高的門檻。而 Zypher Network 作為目前最先進的區塊鏈遊戲開發引擎，支持將 Web2 遊戲拓展為 dApp ，開發了大量插件，支持開發者基於 CocosCreator 開發的遊戲能夠快速部署在 Telegram 生態中，大幅降低開發者基於 TON 網路開發遊戲的門檻。 開發者文檔：https://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 ）的虛擬機，它支持的智能合約編程語言主要是 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 uiManager . open ( UIID . UILoading ); 3.tg數據獲取 在模版文件夾 build – teleplates / web – mobile / index . html 裡面添加引入 在遊戲腳本裡面也了相關的引入。方便調試模式使用 // 創建並插入 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 . on error = 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 . initDataUns…
