👋

Thirdwebを用いて、Unityにメタマスク接続を実装しよう！

2023/01/01に公開

ブロックチェーン

こんにちは、CryptoGamesのユウキです。

本日は、thirdwebを使用して、Unityでウォレット接続機能を作っていきます。

こちらの記事を元に進めていきます。

0.始める前に

始める前に、Unity Hubのインストールをお願いします。

インストール後にUnity Hubを立ち上げたところから始めていきます。

1.プロジェクトを作成する

では、まずはプロジェクトを作っていきます。

「New project」を選択

プロジェクト名と保存場所を選択して、「Create project」

すると、このようにプロジェクトが立ち上がりました。

2.thirdwebのパッケージをインポートする

では、thirdwebを使えるように、thirdweb用のSDKをインポートしていきましょう。

こちらからダウンロードします。

なお、今回は、公式でも例にありました、「v1.0.0-beta」を使用していきます。

ダウンロードができましたら、下のように、「Custom package...」からインポートを行います。

ダウンロードしたファイルを選択します。

何をインポートするかの選択があるので、このまま全てインポートします。

下のように、インポートができました。

Thirdwebが追加されています。

3.Unityの環境を整える

では、使いやすいようにUnityの環境を整えていきましょう。

「Layout」から「Tall」を選択します。

「Game」を下に持ってきます。なお、この「Game」が実際に見える画面です。

このようになりました。

4.新しいシーンを作成する

では、新しい「シーン」を追加してみましょう。

この「シーン」の中に色々と作っていきます。

「Scenes」を選択した状態で、「+」を選択します。

「Scene」を選択します。

新しいシーンができたので、「MainScene」という名前に変更しました。

できたシーンをダブルクリックすると、このように、新しいシーンが選択されました。

このシーンで、パーツを作っていきます。

5.パーツ（GameObject）を作っていく

では、新しいパーツを作っていきましょう。

1)テキストを作成する

下のようにして、「GameObject」から「Text - TextMeshPro」を選択します。

現在、任意の場所に設定されているので、「Reset」を行います。

下のような箇所から、テキストを作っていきます。

位置は、こちらの「PosY」などで変更できます。

2)空のGameObjectを作成する

テキストなどをまとめるための空のGameObjectを作っていきます。

下のように、「Create Empty」を選択します。

名前を、このように、「ConnectedState」に変更しました。

任意の場所になっているので、「Reset」で位置を戻します。

このようにして、「GameObject」内にテキストを作っていきましょう。

「Reset」で位置を修正して、作っていきましょう。

最終的に、このような構成を作りました。

3)ボタンを作成する

では、ボタンを作成していきましょう。

下のようにして、「Button - TextMeshPro」を選択します。

下のように、位置を調節します。

ボタン内のテキストを変更するには、このように変更します。

4)ゲームオブジェクトを非表示にする

初期状態では、「ConnectedState」は非表示にしたいと思います。

下のようにして、チェックを外します。

6.スクリプトファイルを作成する

では、コードで挙動を指定するために、スクリプトファイルを作っていきましょう。

1)フォルダを作成する

まずは、フォルダを作っていきます。

「Assets」を選択した状態で、「+」を押します。

「Folder」を選択します。

名前をこのように、「Scripts」としました。

ここにスクリプトファイルを入れていきます。

2)スクリプトファイルを作成する

では、スクリプトファイルを作っていきます。

「Canvas」を選択した状態で、「Add Component」を選択

「StartMenuManager」というスクリプトを作りたいので、入力した状態で、「New Script」

「Create and Add」を選択

「Assets」フォルダにスクリプトができているので、「Scripts」フォルダに移動させます。

このように、入りました。

では、このスクリプトファイルをダブルクリックします。

このように、スクリプトファイルが立ち上がれば成功です。

7.スクリプトファイルを編集する

では、スクリプトファイルを編集していきましょう。

1)GameObjectを設定する

スクリプトファイルに外部のGameObjectを設定します。

こちらのコードを入れていきます。

public GameObject ConnectedState;
public GameObject DisconnectedState;

「public」とあるので、スクリプトの外から設定ができます。

「Canvas」の「Start Menu Manager(Script)」に上で作った「ConnectedState」、「DisconnectedState」が空の状態でできています。

下のように、ドラッグ&ドロップを行って、設定をしていきます。

このように設定できました。

2)使用する名前空間を入れる

では、今回使用する、Thirdwebや非同期処理のために、下のコードを入れていきましょう。

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

下のように、できました。

3)ThirdwebのSDKの初期化を行う

では、SDKの初期化を行っていきましょう。

次の２つを設定していきます。

private ThirdwebSDK sdk;

sdk = new ThirdwebSDK("goerli");

今回は、「Goerli」を設定しました。

なお、初期化処理は、「Start」関数に書いていきます。

4)ウォレット接続処理を記入する

では、こちらのコードを記入していきます。

ウォレット接続を行い、「ConnectedState」、「DisconnectedState」というGameObjectを「表示」・「非表示」にしています。

また、パーツとして作成した「Address」のテキストをウォレットアドレスに変更しています。

コードはこちらになります。

public async void ConnectWallet()
    {
        // Connect to the wallet
        string address = await sdk.wallet.Connect();
                
        // 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;

8.ボタンを押した時の処理を設定する

では、「Connect Wallet」ボタンが押されたときに、上の処理が行われるように設定していきます。

下のように、「On Click()」から「+」を押します。

スクリプトが紐づけられている「Canvas」を下のようにドラッグ&ドロップします。

下のように、functionに先ほど作成した「ConnectWallet()」を設定します。

このように設定ができました。

9.ビルド前の準備を行う

では、準備の設定を行っていきましょう。

「File」から「Build Settings...」を選択

プラットフォームを「WebGL」にして、「Switch Platform」を選択

次に、「Edit」から「Project Settings...を選択

「Player」から「Resolution and Presentation」から「Thirdweb」を選択

「Other Settings」の「Auto Graphics API」のチェックを外します。

10.ビルドを行う

では、準備ができたので、ビルドを行なっていきます。

「File」から「Build Settings...」を選択

今回作った、「MainScene」をドラッグ&ドロップ

「Build And Run」を実行します。

名前などを決めて、「Save」

少し待つと、このように表示されました。

「Connect Wallet」ボタンを押すと、下のようにメタマスクが立ち上がりました。

接続すると、無事にこのようにウォレットアドレスを表示してくれました。

今回は以上です。

ぜひやってみてください。


using UnityEngine;
using Thirdweb;
using TMPro;
using System.Collections.Generic;
using System.Threading.Tasks;

public class StartMenuManager : MonoBehaviour
{
    public GameObject ConnectedState;
    // public GameObject DisconnectedState;

    private ThirdwebSDK sdk;
    private string address;
    private string contractAddress = "0x5E986B22E52A9E8AF183DD0A6F2A857aeB57F547";

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

    void Update(){

    }

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

        ConnectedState
            .transform
            .Find("Address")
            .GetComponent<TMPro.TextMeshProUGUI>()
            .text = address;
    }

    public async void GetNFT() {

        var contract = sdk.GetContract(contractAddress);

        var quantity = 1; // how many unique NFTs you want to claim

        var tx = await contract.ERC721.ClaimTo(address, quantity);
    }

}