UI Builder の使用準備

UI Builder で UI を作成する方法を学ぶために、まずこの例を使って始めましょう。

UI Builder で UI を作成するには、以下の手順を行います。

1. 新しい UI ドキュメント (UXML) を作成します。
2. 要素を加えて UI 階層を作成します。
3. Inspector で属性とスタイルのプロパティを設定します。
4. 複数の要素が同じスタイルプロパティを必要になってきたら、USS スタイルシートとセレクターを作成 します。
5. UI をテストし、結果に満足したら インラインのスタイルプロパティを USS クラスに抽出します。
6. UI ドキュメント (UXML) を保存します。

要件

始める前に、以下の点を理解しておいてください。

• ビジュアル要素とビジュアルツリーについて
• UXML について
• USS について
• UI Builder のインターフェース概要

例の概要

この例では、リストビューのランタイム UI の作成 の例のメインビューを作成します。背景としてルート要素を作成し、2 つのコンテナを作成します。1 つのコンテナには文字名リストが保存され、もう 1 つのコンテナには文字の詳細が保存されます。文字詳細コンテナでは、背景フレームと前景フレームを加えます。最後に、文字名のラベルを 2 つ加えます。この例では、文字名リスト入力 UI は作成しません。

ルート要素の作成

新しいプロジェクトを作成し、画面全体を覆うルートビジュアル要素を作成します。ルート要素に背景色を設定し、すべての子要素をスクリーンの中央に配置します。

1. Unity で任意のテンプレートでプロジェクトを作成します。

2. Window > UI Toolkit > UI Builder を選択します。

3. UI Builder ウィンドウの Viewport ウィンドウの左上で、File > New を選択して新しい UXML ドキュメントを作成します。

   

4. MainView.uxml と名前を付けて保存します。

5. Drag VisualElement from Library into the Hierarchy panel.

   

   Tip: You can also double-click a control to add it to the Hierarchy panel.

6. Select the element from the Hierarchy panel.

7. In the Inspector panel, make sure Flex > Grow is 1. This sets the flex-grow property to 1, making it cover the entire screen.

   

8. すべての子要素を中央に揃えるには、Align Items と Justify Content の両方を Center に設定します。

   

9. Background > Color と移動し #732526 に設定します。

   

親コンテナの作成

ルート要素の下に新しい VisualElement を作成します。この要素は、UI の左右のセクションの親コンテナになります。

1. Drag VisualElement from Library to the root VisualElement in the Hierarchy panel.

   

2. Select the element from the Hierarchy panel.

3. In the Inspector panel, set Flex > Direction to row.

4. Size > Height に移動し、350 ピクセルに設定します。

   

文字名リストコンテナの作成

コンテナの子要素として ListView を追加し、文字名を保存します。

1. Drag a ListView from the Library to the container VisualElement in the Hierarchy panel.

2. Select the element from the Hierarchy panel.

3. In the Inspector panel, set Name to CharacterList.

   

4. Size > Width を 230 ピクセルに設定します。

5. Margin & Padding > Margin > Right に移動し 6 ピクセルに設定します。

   

6. Background > Color を #6E3925 に設定します。

7. Border > Color を #311A11 に設定します。

8. Border > Width を 4 ピクセルに設定します。

9. Border > Radius を 15 ピクセルに設定します。

   

文字詳細コンテナの作成

文字の詳細コンテナを保持するために、#CharacterList と同じ親の下に新しい VisualElement を追加します。この目的は、ユーザーが左側のリストから文字を選択すると、その文字の縦向き画像、名前、クラスを表示することです。

1. Drag a VisualElement from the Library to the container element in the Hierarchy panel. This is the container to hold all the elements on the right.

2. Select the element from the Hierarchy panel.

3. In the Inspector panel, set Align > Align Items to flex-end.

4. Align > Justify Content を space-between に設定します。

   

5. 右のコンテナの子として別の VisualElement を追加します。

6. Select the element from the Hierarchy panel.

7. Size > Width を 276 ピクセルに設定します。

8. Align セクションで、Align Items と Justify Content の両方を center に設定します。

9. Margin & Padding > Padding を 8 ピクセルに設定します。

   

10. Background > Color を #AA5939 に設定します。

11. Border > Color を #311A11 に設定します。

12. Border > Width を 4 ピクセルに設定します。

13. Border > Radius を 15 ピクセルに設定します。

これで、UI レイアウトは以下の画像のようになります。

文字ポートレートの背景の作成

個々の UI コントロールを文字詳細コンテナに追加します。最初のステップは、文字の縦向き画像の背景を追加することです。

1. Library の VisualElement を文字詳細コンテナにドラッグします。

2. Select the element from the Hierarchy panel.

3. Size セクションで、Width と Height の両方を 120 ピクセルに設定します。

4. Margin & Padding > Padding を 4　ピクセルに設定します。

5. Background > Color を #FF8554 に設定します。

   

ボーダースタイル用の USS クラスの作成

文字詳細コンテナは、文字名リストコンテナと同じボーダースタイルを使用します。両方のコンテナに適用する USS クラスを作成します。

1. StyleSheet ウィンドウで、+ > Create New USS を選択します。
2. MainView.uss という名前を付けて保存します。
3. Add new selector… フィールドをクリックし .border と入力します。.border セレクターが StyleSheet ウィンドウに表示されます。
4. StyleSheet ウィンドウで .border を選択します。
5. In the Inspector panel, set Border > Color to #311A11.
6. Border > Width を 2 ピクセルに設定します。
7. Border > Radius を 15 ピクセルに設定します。
8. StyleSheet ウィンドウから .border を文字詳細コンテナ VisualElement にドラッグします。
9. StyleSheet ウィンドウから .border を文字名リストコンテナ VisualElement にドラッグします。
10. 文字名リストコンテナ VisualElement を選択します。
11. In the Inspector panel, right-click Border and select Unset to remove the inline style you set earlier.

文字縦向き画像の前景を作成する

文字詳細コンテナの次は、実際の画像の前景を加えます。

1. Library の VisualElement を文字詳細コンテナにドラッグします。

2. Select the element from the Hierarchy panel.

3. Name を CharacterPortrait に設定します。

4. Flex > Grow を 1 に設定し、画像が利用可能なスペースをすべて使えるようにします。 Background > Scale Mode を scale-to-fit に設定します。すると、正しいアスペクト比を保ちながら、画像を拡大縮小して要素のサイズに合わせることができます。

   

ラベルの作成

2 つのラベルコントロールを文字詳細コンテナに加え、選択された文字名とクラスを表示します。

1. Drag Label from Library to the character details container in the Hierarchy panel.

2. Name を CharacterName に設定します。

3. Drag Label from Library to the character details container in the Hierarchy panel.

4. Name を CharacterClass に設定します。

   

5. #CharacterName 要素を選択します。

6. Text > Font Style を B に設定します。

7. Text > Size を 18 ピクセルに設定します。

   

8. Viewport ウィンドウで、File > Save を選択して MainView.uxml に変更を保存します。

インラインスタイルの抽出

UI Builder では、要素の数がまだ少ないうちは、要素を作成してインラインスタイルだけを実験的に使用することができます。より複雑な UI を構築するようになると、スタイルシートを使用してスタイルを管理する方が簡単です。UI Builder では、インラインのスタイルをスタイルシートに抽出できます。

1. ルートのビジュアル要素を選択します。
2. In the Inspector panel, in the Style Class List field, enter .background as the class name.
3. Extract Inlined Styles to New Class を選択します。これにより、ルート要素に設定したインラインスタイルで .background クラスセレクターが作成され、ルートのビジュアル要素の UI ドキュメント (UXML) が更新され、インラインスタイルの代わりにクラスセレクターが使用されます。
4. Viewport ウィンドウで、File > Save を選択します。

Create a list view runtime UI の例の作業を続けたい場合は、他のすべての要素のスタイルを抽出する手順を繰り返し、指示に従って例を作成できます。

その他の参考資料

• UI Builder を使ったスタイル要素