本文へスキップ

UIクリエーション

このセクションでは、ウォレット接続、残高更新、ミンティング機能など、dAppのユーザーインターフェース（UI）を構築します。

メインシーンの設定​

ステップ1：シーンフォルダの作成​

  • プロジェクトのassetsフォルダに移動します。
  • 右クリックし、フォルダの作成を選択します。
  • シーン**を挙げてください。 (画像を挿入)
  • scenesフォルダ内で右クリックし、Create → Sceneを選択します。

  • プロンプトが表示されたら、シーンファイルを保存してください。
  • 新しく作成したシーンをダブルクリックして、デフォルトシーンに設定してください。

ステップ2：ベースキャンバスの作成​

  • 階層ウィンドウでシーンを右クリックします。
  • Create → UI Component → Canvas** に移動します。
  • 名前をCanvasに変更する。

ステップ3：Web3UIコンテナの作成​

  • 新しく作成したキャンバスを右クリックします。
  • Create → Empty Node**を選択します。
  • 名前をWeb3UIに変更してください。

ステップ4：メインUIオブジェクトのセットアップ​

Web3UIの中に、以下のコンポーネントを作成します：

**1. コネクトウォレットボタン

  • Web3UI → Create → UI Component → Button** を右クリックします。

  • 名前をConnectWalletに変更してください。
  • Inspector Paneで、ボタンのラベルテキストをConnect Wallet**に設定します。

**2. ミント・ボタン

  • Web3UI → Create → UI Component → Button** を右クリックします。
  • 名前をMintButtonに変更する。
  • ボタンのラベルテキストをミントボタンに設定します。

**3. 住所ラベル

  • 右クリック Web3UI → Create → 2D Object → Label.

  • これを AddressLabel にリネームする。
  • ラベルテキストを**Connected Address:**に設定する。

**4. バランス・レーベル

  • 右クリック Web3UI → Create → 2D Object → Label.
  • これを BalanceLabel にリネームする。
  • ラベルテキストを0.000ETに設定する。

すべてのコンポーネントを追加すると、階層は次のようになります：


Canvas
└── Web3UI
├── ConnectWallet
├── MintButton
├── AddressLabel
├── BalanceLabel

備考

コンポーネントを適切に配置するには、シーン上部のアライメントツールを使用します。 各コンポーネントをクリックし、必要に応じて位置を調整する。

ページを改善してください。