WebGL を使用した Aviator Web3 ゲーム
Sequence Stack のツールを使って WebGL ゲームに実績機能やカスタム ERC1155 を組み込む方法を学びましょう。
所要時間:40分
このガイドでは、WebGL をゲームに統合し、Sequence Stack のツールを活用して実績を獲得したり、カスタム ERC1155 を使ってゲームをプレイする方法を解説します。
これらのツールで以下のことが可能になります:
- Webpack でのプロジェクトセットアップ:Webpack でコンパイル可能な WebGL プロジェクト構成を有効化します。
- Web SDK の統合:すべての EOA と Sequence Wallet でユーザー認証を可能にします。
- コレクティブルコントラクトのデプロイ:独自のコレクティブルコントラクトを作成します。
- リモートミンターのデプロイとゲーム内トークンのミント:Cloudflare Workers を使ってガスレスのリレー取引を実行します。
- ゲーム内でアイテムを活用:Sequence Indexer を使ってゲーム内でコレクティブルを統合します。
- ゲーム内実績トークンのバーン:wagmi を使ってゲーム実績をバーンします。
- (オプション) Embedded Wallet を Web SDK に統合:署名メッセージなしでスムーズな UX を実現します。
1. Webpack でプロジェクトセットアップ
リポジトリをクローン
まずは、three
を使って作成された WebGL コンポーネントがいくつか含まれているテンプレートプロジェクトをクローンします。すべて webpack でコンパイルされています。
Template WebGL JS Web SDK Starter
上記リポジトリをクローンし、cd template-webgl-js-sequence-kit-starter
でディレクトリに移動します。
.env を更新
.env.example
を参考に、環境変数を記載した .env
ファイルを作成します。
そして、以下のコマンドを実行してアプリを起動します。
正常に動作すれば、水面上を飛行機が飛んでいる画面が表示されます。
2. Web SDK の統合
プロジェクト構成ができたので、Web SDK を統合します。
App.jsx
コンポーネントのセットアップ
src
フォルダ内に react
フォルダを作成し、2 つのファイル(App.jsx
と Login.jsx
)を作成します。
App.jsx
には次のコードを記述します。
次に、Login.jsx
ファイルに以下のコードを追加し、画面上部にログインボタンを作成します。
Javascript の index.js
でコンポーネントをレンダリング
最後に、index.js
で App.jsx
コンポーネントをインポートし、index.html
の root
ID 要素にレンダリングします。
ログインモーダルを呼び出すクリックハンドラの作成
Login.jsx
コンポーネントに以下のコードを追加します。
そして、index.js
に次のクリックハンドラコードを追加します。
これらの要素を index.html
に追加します。
これで、モーダルを表示するボタンができました。
3. コレクティブルコントラクトをデプロイする
Sequence Builder でコレクティブルを作成する必要があります。詳しくはこちらのガイドをご参照ください。
実績トークン用と飛行機用の2つのコレクションを作成しましょう。
4. リモートミンターのデプロイ & ゲーム内実績トークンのミント
次に、ガスレスでシームレスにブロックチェーンへトランザクションを送信するため、前のステップでデプロイしたコントラクトからアイテムをミントする Cloudflare Worker を実装します。トランザクション API コントラクトアドレスを Minter Role
として入力してください。
コレクティブルのミントには、飛行機用と実績用の2種類のパスを用意します。
これは、Cloudflare リクエストボディに isPlane
というキー/値を追加し、Cloudflare Worker 側で if/else
を追加することで実現しています。
このコードはこちらの GitHub リポジトリで確認できます。
このガイドでは、Cloudflare のコードはローカル開発環境で実行します。プロジェクトフォルダ内で、以下のコマンドで Cloudflare Worker を起動してください。
5. ゲーム内でアイテムを活用
このセクションは、ゲーム内資産の所有状況に応じて UI を更新する2つの実装に分かれています。
- ウォレット資産に基づく飛行機の変更表示
- ウォレット資産に基づく UI の変更表示
ウォレット資産に基づく飛行機の変更表示
ウォレットが所有する資産に応じてゲームを変化させるには、トークンをミントするボタンを実装し、そのレスポンスでインデクサの変化をチェックします。
index.js
では、index.html
の要素の onclick
属性にボタンを追加しています。
callContract
はミント処理を担当し、1回のミントのみが同時に行われるようミューテックスでラップされた fetch を呼び出します。これは /API/SequenceController.js
の SequenceController
クラスに追加されています。
fetchPlaneTokens
はウォレットに資産が追加されるまでポーリングし、plane color
を変更して別の飛行機を表現します。
fetchPlaneTokens
は次のコードで実装されており、残高の条件チェックは1より大きいかどうか、tokenID
は検索対象の ID と一致するかどうかで判定しています。
このUIの条件付きロジックは、アプリケーションに応じて変更してください。
ウォレット資産に基づくUI変更の表示
次に、ユーザーがアチーブメントを持っているかどうかに応じて burn achievement
ボタンを追加するUI変更を実装します。
まず、前回と同様の HTML/JS のクリックハンドラーのロジックを実装します。
今回は、callContract
の isPlane
値を false
に設定します。
注意:実際のゲームでは、アチーブメントトークンのミントはゲーム内の何らかのトリガーイベントに基づいて行われますが、簡単のためにボタンを用意しています。
今回は、SequenceController
に追加された fetchTokensFromAchievementMint
を呼び出します。
これにより、インデクサーから残高が返された場合のみ、display
属性によってボタンが表示されるようになります。
6. ゲーム内アチーブメントトークンのバーン
最後に、アチーブメントトークンをバーンするには、ブロックチェーンへのアクション送信に Cloudflare Worker を使うことはできません。なぜなら、ミント時にはトランザクションAPIを使ってアドレスの「代理」で実行され(コントラクト内の msg.sender
が relayer
アドレスの一つになる)、今回はコントラクト内の msg.sender
がトークンの所有権を証明し、user
から直接送信される必要があるからです。これを実現するために、wagmi
のフロントエンド関数とクラスの組み合わせを利用します。
ここで burnToken
は、Reactコンポーネントから渡される関数で、ミューテックスを使うパターンを踏襲し、wagmi
パッケージの sendTransaction
を使ってトランザクションを送信し、トランザクションハッシュの更新を待ってコールバックを返します。
そして SequenceController
では、burnToken
でラップした sendBurnToken
関数を呼び出し、Reactの関数をアプリケーション全体で利用できるようにします。
バーンされたトークンがUIに反映されるよう、最初にトークンをバーンするためのボタンを非表示にします。これは SequenceController
内の次のコードで実現します。
これで完了です。コード全体の例はこちらでご覧いただけます。
7.(オプション)Embedded WalletをWeb SDKに統合する
すべての取引でユーザーによる署名を不要にし、ユーザー体験をよりスムーズにしたい場合は、Web SDK の React コンポーネントの設定を更新して Embedded Wallet を有効にできます。
これにより、wagmi
でトークンをバーンする際のポップアップが減少し、アチーブメントトークンの付与やコレクティブルのミントは Cloudflare Worker を利用してガスレスで実行されます。
これは、いくつかの環境変数を追加し、使用するコネクタの種類を切り替えることで実現できます。
まず、以下の環境変数を .env
ファイルに追加してください。
次に、これらの変数を App.jsx
の Web SDK コネクタに渡してください。
これで完了です。トランザクションフローを完了するために追加の統合は必要ありません。
ゲーム内ウォレットについて詳しくはこちらをご参照ください。