本文へスキップ
このページは英語からの機械翻訳を使用しており、誤りや不明瞭な表現が含まれている可能性があります。最も正確な情報については、オリジナルの英語版をご覧ください。頻繁な更新のため、一部のコンテンツはオリジナルの英語になっている可能性があります。Crowdinでの取り組みに参加して、このページの翻訳改善にご協力ください。 (Crowdin translation page, Contributing guide)

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

備考

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

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