🐕

Unityゲームにウォレット接続ボタンを追加する

2023/01/10に公開

Unity

thirdweb

tech

※当記事は、こちらの記事を翻訳したものです。

このガイドでは、Unityゲームに「Connect Wallet」ボタンを追加し、ユーザーが自分のウォレットをゲームに接続できるようにする方法を説明します。

接続後、ユーザーがあなたのコレクションのNFTを所有しているかどうかを確認し、所有している場合はゲームをプレイできるようにします。

TLDR(長くて読めない場合)

このガイドでは、ユーザーの接続しているウォレットの状況に応じて変化する、動的なユーザーインターフェイスを作成する方法を紹介しています。

お急ぎの場合は、以下の主要なコードスニペット(再利用できるコードの断片)をすぐに入手できます。

using Thirdweb;
using UnityEngine;

public class ThirdwebSDKDemos : MonoBehaviour
{
    private ThirdwebSDK sdk;

    void Start()
    {
        sdk = new ThirdwebSDK("goerli");
    }

    private async void ConnectWallet(WalletProvider provider)
    {
        string address = await sdk.wallet.Connect(new WalletConnection() {
            provider = WalletProvider.CoinbaseWallet, // Use Coinbase Wallet
            chainId = 5 // Switch the wallet Goerli network on connection
        });
    }
}

public async void ConnectWallet()
{
    // Connect to the wallet
    address = await sdk.wallet.Connect();
}

一から始めたい人は、さっそくやっていきましょう！

必要なもの

このガイドは、皆さんがthirdwebのSDKを使用してUnityプロジェクトをセットアップしていることを前提にしています。

まだの方は、まず「Unity SDKを始めよう」をお読みいただき、準備ができたら続けてください。

このガイドでは例としてCoinbase Walletを使用しますが、thirdwebのSDKでサポートされている一般的なウォレットプロバイダを選択することができます。

💡Coinbase Walletについて、詳しくはこちら。

CanvasでUIを作成する

ユーザーがウォレットを接続しているかどうかに基づき、何を表示するかを決定していきます。

Disconnected State(未接続の状態) :ウォレットに接続するボタンを表示します。
Connected State(接続されている状態) ：ユーザーのウォレットアドレスを表示し、ウォレットが保有しているコレクションNFTの個数を読み取ります。

まずは、StartMenuというスタートメニュー用の新しいSceneを作成しましょう。

シーンをHierarchyにドラッグして、新しいCanvasを作成します。

Canvas内に、以下のような構造を作成します。

ConnectedStateという名前のEmpty Game Object:ユーザーがウォレットに接続したときに表示するUIアイテムのコンテナ。
- Addressという名前のText - TextMeshPro:ユーザーのウォレットアドレスを置くためのプレースホルダーテキスト（後から挿入する用のテキスト）
- Owns NFTという名前のText - TextMeshPro: ユーザーがアクセスキーNFTを所有しているかどうかをチェックし、表示するためのプレースホルダーテキスト（後から挿入する用のテキスト）
Disconnected Stateという名前のEmpty Game Object:ユーザーがまだウォレットに接続していないときのUIアイテムのためのコンテナ。
- Connect Walletという名前のButton - TextMeshPro:「Connect Wallet」というテキストが入ったボタンです。これを使って、ユーザーがゲームにウォレットを接続できるようにします。

今のところ、このような状態になっています。

デフォルトでは、このようにConnectedStateを無効にして隠してしまいましょう。

これで、Playを押しても、ユーザーにはタイトルとウォレット接続ボタンしか表示されなくなりました。

ウォレット接続機能を追加する

このメニューで欲しい動作は、以下の通りです。

最初に、ユーザーにはウォレット接続ボタンが表示されます。
ユーザーはボタンをクリックしてウォレットを接続します。
ユーザーは接続されたウォレットのアドレスが表示されます。
SDKがユーザーのNFT残数をチェックし、それを表示します。

Assets フォルダのルートに Scripts という名前の新しいフォルダを作成します。

Scripts フォルダ内に StartMenuManager という新しいファイルを作成し、テキストエディタで開きます。

UI上のアイテムを操作するために、C#スクリプトの中でUI Gameオブジェクトへの参照を追加する必要があります。StartMenuManager クラス内に、以下のパブリック変数を追加します。

// Create references for the two Game Objects we created
public GameObject ConnectedState;
public GameObject DisconnectedState;

StartMenuManagerスクリプトをキャンバスにドラッグして、コンポーネントとして追加します。

ConnectedStateとDisconnectedStateの変数を定義するために、2つのゲームオブジェクトを対応するフィールドにドラッグ＆ドロップしてください。

では、SDKと連動する機能を書いてみましょう。

ウォレット接続

まず、ファイルの先頭のスクリプトにthirdweb SDKをインポートします。

using Thirdweb; // for interacting with the SDK
using System.Threading.Tasks; // for some async functionality

ゲームのスタート時に、SDKをread-only（読み込み専用）モードで初期化しましょう。

private ThirdwebSDK sdk;

// Start is called before the first frame update
void Start()
{
    // Configure the network you deployed your contracts to:
    sdk = new ThirdwebSDK("optimism-goerli");
}

Start関数の下に、新しいConnectWallet関数を作成し、sdk.wallet.Connect()メソッドを呼び出すようにしましょう。このメソッド内では、以下を提供できます。

プロバイダ: 使用したいウォレット（CoinbaseWallet、MetaMask、WalletConnectなど）
chainId: どのブロックチェーン/ネットワークにユーザーを接続させたいか。SDKは接続後、ユーザーにこのネットワークに切り替えるように要求します。

public async void ConnectWallet()
{
  // Connect to the wallet
  string address =
      await sdk
          .wallet
          .Connect(new WalletConnection()
          {
              provider = WalletProvider.CoinbaseWallet,
              chainId = 5 // Switch the wallet Goerli on connection
          });
          
  // Disable disconnected state
  DisconnectedState.SetActive(false);

  // Enable connected state
  ConnectedState.SetActive(true);

  // Set the ConnectedStates "Address" GameObjects text to the wallet address
  ConnectedState
    .transform
    .Find("Address")
    .GetComponent<TMPro.TextMeshProUGUI>()
    .text = address;
}

次に、この ConnectWallet 関数を、UI を使って「Connect Wallet」ボタンの OnClick ハンドラ(クリックされた時に起動する処理)にアタッチします。

これでウォレット接続機能は完了です。

コードをビルドして実行すると、その動作を確認することができます。

ユーザーの NFT 残数を確認する

ユーザーが接続されたら、ユーザーのウォレットにアクセスキーNFT(ウェブサイトにアクセスするために必要なNFT) があるかどうかをチェックするプロセスを開始します。

そのために、CheckBalanceという新しい関数を作成しましょう。

public async Task<string> CheckBalance()
{
  // Connect to the smart contract
  // Replace this with your own contract address
  Contract contract = sdk.GetContract("0x69BC6d095517951Df17f70f38746Bc27CE1C8A62");

  // Replace this with your NFT's token ID
  string tokenId = "0";

  // Check the balance of the wallet for this NFT
  string balance = await contract.ERC1155.Balance(tokenId);
  return balance;
}

最後に、ConnectWallet関数の最後に、このCheckBalance関数を呼び出してみましょう。

// ... existing code of ConnectWallet function ...
       
string balance = await CheckBalance();

// Convert the balance to a float
float balanceFloat = float.Parse(balance);

// Create text for the balance depending on if the balance is greater than 0
string balanceText =
balanceFloat > 0
  ? "Welcome to the Game! Pick A vehicle to mint:"
  : "You can't access this without a Key!";

// Set the ConnectedStates "Balance" GameObjects text to the wallet balance
ConnectedState
  .transform
  .Find("Owns NFT")
  .GetComponent<TMPro.TextMeshProUGUI>()
  .text = balanceText;

まとめ

以上です！🥳お疲れ様でした。

これで皆さんはWeb3ゲームの基礎となる、ユーザーのウォレットとの接続を設定しました。

このガイドでは、次のことを説明しました。

C# で thirdweb SDK を初期化する
ボタンがクリックされたときに、ユーザーのウォレットに接続する。
ウォレットの NFT 残数を表示する

質問はありますか？Discordに飛び込んで、私たちのチームと直接話しましょう！