Cocos Creatorを使ってTONゲームを5分で迅速にデプロイする方法（第1部）

TON エコシステムはゲーム分野での熱気を帯びており、多くの開発者がこの分野に流入していますが、技術的な観点から見ると、EVM 互換性や開発言語などの問題により、TON の基盤に基づいてゲームアプリケーションを構築することは、多くの開発者にとって依然として高いハードルとなっています。Zypher Network は現在最も先進的なブロックチェーンゲーム開発エンジンとして、Web2 ゲームを dApp に拡張することをサポートし、多くのプラグインを開発しており、CocosCreator を基にしたゲームを Telegram エコシステムに迅速にデプロイできるようにし、TON ネットワーク上でのゲーム開発のハードルを大幅に下げています。

開発者文書

チェーン上ゲーム分野の新たな熱土：TON エコシステム

TON（The Open Network）は最近最も人気のあるパブリックチェーンの一つとなっており、9億人のユーザーを持つソーシャルプラットフォーム Telegram との深い結びつきにより、短期間で多くの注目を集めています。TON の基盤に基づく開発者のアプリケーションは、「ミニプログラム」の形で Telegram にシームレスに統合され、ユーザーは Telegram を入口として各種 TON エコシステムの dAPP に直接アクセスし、使用することができ、ユーザーのアクセスハードルが大幅に低下しました。

現段階では、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 言語に似ていますが、一般には知られていないか、評価されていません）。これらの言語と仮想マシンアーキテクチャは、Ethereum の 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 にデプロイする方法に関するチュートリアルの第一部です。

新人ガイド：5分で 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 2d-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 をインストールしていない場合は、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（すべてのスプライトフレームをインライン化）：すべてのスプライトフレームを1つのファイルにインライン化します。
• Merge all JSON Files（すべての JSON ファイルをマージ）：すべての JSON ファイルを1つのファイルにマージします。

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. 新しいシーンを作成し、シーンに新しいノードを作成し、スクリプト GameLanch.ts をマウントします。

（ここでは主画面の背景画像も置いており、事前に読み込むことができます。）

2. GameLanch.ts.

UIConfig.ts ファイルでページ情報を設定します。

UI を制御するために ui Manager のインターフェースを使用します。

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

この2つの文書を参考にして、現在は手動で公開していますが、後でコマンドラインで公開できるようにし、正式にオンラインにする際は 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. 環境設定

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | DBHOST = localhost DBUSER = yourdbuser DBPASSWORD = yourdbpassword DBNAME = yourdbname DBPORT = 5432 DBSSLMODE = disable DBTIMEZONE = Asia/Shangha TGBOTTOKEN = yourtelegrambottoken PORT = 8080 |

4. データベース設定とマイグレーション

アプリケーションは GORM を使用してデータベース操作を行い、起動時に以下のデータモデルを自動的にマイグレーションします：

• User：ユーザー情報、Telegram ID、ユーザー名、コインなど。
• Bodyguard：ユーザーに関連するボディガード情報。
• Buff：ボディガードに関連するバフ効果。
• CoinRecord：コインの記録。
• InvitedUser：招待されたユーザー情報。

main.go ファイル内で、以下のコードを使用してデータベースに接続し、マイグレーションを行います：

5. 定期的なタスク

アプリケーションには2つの定期的なタスクが含まれています：

1. クリーニングタスク：5分ごとに実行され、無効または期限切れのデータをクリーニングします。
2. ランキング更新タスク：1分ごとに実行され、ユーザーのコインランキングを更新します。

|-----------------------------------------------------------------------------------------------------------------| | tasks.StartCleanupTask(db, time.Minute5) tasks.StartLeaderboardUpdateTask(db, time.Minute1) |

6. ミドルウェア

1. AuthMiddleware

• 説明：リクエスト内の Telegram 初期化データが有効かどうかを検証するために使用されます。
• パラメータ：
• next：次のハンドラー
• bot Token：Telegram ボットのトークン

六、Telegram Bot と Web アプリの詳細な作成手順

1. Bot を作成

1. BotFather を検索：

• Telegram を開き、Bot Father を検索します。これは Telegram の公式ボット管理ツールです。

1. 対話を開始：

• /start を入力して BotFather との対話を開始します。

1. 新しい Bot を作成：

• /newbot を入力して新しい Bot を作成します。

1. Bot の名前を入力：

• 名前を選択し、protectRump と入力します。

1. Bot のユーザー名を入力：

• ユーザー名は Bot または _bot で終わる必要があります。例：protectRumpBot。

1. トークンを保存：

• 作成が成功すると、BotFather は API トークンを生成します。このトークンをメモしておき、後の手順で使用します。

2. Web アプリを作成

1. Web アプリ作成を開始：

• BotFather で /newapp を入力して新しい Web アプリを作成します。

1. Bot を選択：

• 先ほど作成した Bot（例：protectRumpBot）を選択します。

1. Web アプリの名前を入力：

• Web アプリの名前を入力します。
• description で webapp の説明を変更します。つまり、What can this bot do? の内容です。

1. 画像をアップロード：

• 640x360 の画像を入力し、Web アプリのアイコンとして使用します。
• botpic でアイコンを変更します。

1. GIF をアップロード：

• GIF ファイルを入力します。ない場合は、/empty を入力してこの手順をスキップできます。

1. Web アプリの URL を入力：

• ゲームのアドレスを入力します。例： https://protect-rump.zypher.game/。

1. 短い名前を入力：

• Web アプリのリンク用に短い名前を付けます。例：protectRump。

1. 作成を完了：

• 作成が成功すると、Web アプリのリンクが得られます。例：me/protectRumpBot/protectRump。

以上の手順を通じて、Telegram Bot と Web アプリを成功裏に作成しました。次に、Web アプリにゲームを統合し、Telegram の Web アプリインターフェースを使用してインタラクションを行うことができます。

3. テスト環境設定

https://core.telegram.org/bots/webapps#using-bots-in-the-test-environment

（未完）

まとめ

Cocos Creator は現在の主流のゲームエディタとして、ますます多くの開発者に採用されています。その強力な機能、開発者が慣れ親しんだプログラミング言語、柔軟な開発環境、広範なクロスプラットフォームサポートにより、ゲーム開発分野で高く評価されています。Zypher Network は Cocos Creator との互換性と TON ネットワークとの統合を通じて、ゲーム開発者がアプリケーションを TON ネットワークにデプロイ、移行する際のハードルを大幅に下げ、複雑な問題をさらに簡素化しています。そして、ゲームが成功裏にデプロイされた後、ゼロ知識証明ソリューションに基づいてゲームのよりスムーズで低コストな運営をサポートします。

Zypher Network がさらに多くのチェーン上エコシステムに拡大するにつれて、Web3 時代における最も重要なゲームインフラストラクチャとなるでしょう。