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

Creating UI for dApp

In this section, we will build our dApp's user interface! We'll create a structured UI system with three main panels for status updates, actions, and minting functionality.

Setting Up the Main Canvas

First, let's create our base canvas:

1. In the Hierarchy window, right-click on "Sample Scene".
2. Navigate to GameObject → UI → Canvas.

Creating the Web3UI Container

1. Right-click on your new Canvas.
2. Select "Create Empty".
3. Rename it to "Web3UI".

Setting Up Main Panels

Inside Web3UI, create three panel objects:

1. Right-click on Web3UI and select "Create Empty".
2. Create and rename these panels:
   • StatusPanel - Your dApp's information display
   • ButtonPanel - For user interactions
   • MintPanel - For token minting features

Creating Panel Components

StatusPanel Components

This panel shows all your important Web3 information:

• Right click on StatusPanel, click on UI → Text - TextMeshPro and then rename to StatusText. Make sure to fill the “Text Input” field in the Inspector pane e.g. "Status..."

備考

TextMeshPro (TMP) Setup

When you first create a TextMeshPro element (UI - Text - TextMeshPro), Unity automatically prompts you to import TMP Essentials. If you accidentally skip this prompt, you can manually import it through Window > TextMeshPro > Import TMP Essentials.

Why we need this: TextMeshPro requires core resources (shaders, default fonts, and materials) to properly display text in your game. Without these essentials, your text components won't render correctly and you'll see shader/material errors in your project. This is a one-time setup that's necessary for text to work properly.

• Right click on StatusPanel, click on UI → Text - TextMeshPro and then rename to AddressText. Make sure to fill the text object e.g "Address Text..."
• Right click on StatusPanel, click on UI → Text - TextMeshPro and then rename to TokenBalanceText. Make sure to fill the text object e.g "0.0000 ET"

├── StatusText (TextMeshPro)

│ └── Default: "Status..."

├── AddressText (TextMeshPro)

│ └── Default: "Address Text..."

└── TokenBalanceText (TextMeshPro)

└── Default: "0.0000 ET"

ButtonPanel Components

Your main interaction buttons:

• Right click on ButtonPanel, click on UI → Button - TextMeshPro and then rename it to ConnectWalletButton. Make sure to fill the "Text Input" field in the Inspector pane with "Connect Wallet".

ButtonPanel

├── ConnectButton (Button - TextMeshPro)

│ └── Text: "Connect Wallet"

MintPanel Components

The token minting interface:

• Right click on MintPanel, click on UI → Input Field → TextMeshPro and then rename to MintAmountInput. Make sure to fill the placeholder object with "Enter Amount…"
• Right click on MintPanel, click on UI → Button → TextMeshPro and then rename to MintButton. Make sure to fill the text object with "Mint"

MintPanel

├── MintAmountInput (Input Field - TextMeshPro)

│ └── Placeholder: "Enter Amount..."

└── MintButton (Button - TextMeshPro)

└── Text: "Mint"

After creating all components, your hierarchy should look like this:

Canvas

└── Web3UI

├── StatusPanel

├── ButtonPanel

└── MintPanel

備考

For your component to be well arranged as seen in the image above, you have to manually arrange them with the icon on the right-hand side when you click on each component.