UI Builder の使用準備

UI Builder で UI を作成する方法を学びます。以下の例を使用して、UI の作成を開始しましょう。

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

1. 新しい UI Document (UXML) を作成します。
2. 要素を追加して UI 階層を作成します。
3. Inspector で属性とスタイルのプロパティを設定します。
4. 複数の要素に同じスタイルプロパティが必要な場合、USS スタイルシートとセレクターを作成 します。
5. UI をテストし、結果が問題なければ インラインのスタイルプロパティを USS クラスに抽出 します。
6. UI Document (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. Library の VisualElement を Hierarchy ウィンドウにドラッグします。

   

   ヒント: コントロールをダブルクリックして Hierarchy ウィンドウに追加することもできます。

6. Hierarchy ウィンドウから要素を選択します。

7. Inspector ウィンドウで、Flex＞ Grow が 1 であることを確認します。これにより、flex-grow プロパティが 1 に設定され、画面全体をカバーするようになります。

   

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

   

9. Background > Color を #732526 に設定します。

   注意デフォルトでは、色のアルファ値は 0 で、完全に透明になります。色を不透明にするには、アルファ値を 255 に設定します。

   

親コンテナの作成

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

1. Library の VisualElement を Hierarchy ウィンドウのルート VisualElement にドラッグします。

   

2. Hierarchy ウィンドウから要素を選択します。

3. Inspector ウィンドウで Flex > Direction を row に設定します。

4. Flex > Grow を 0 に設定します。

5. Size > Height を 350 ピクセルに設定します。

   

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

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

1. Library の ListView を Hierarchy ウィンドウのコンテナ VisualElement にドラッグします。

2. Hierarchy ウィンドウから要素を選択します。

3. Inspector ウィンドウで、Name を CharacterList に設定します。

   

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

5. Spacing > Margin > Right を 6 ピクセルに設定します。

   

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

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

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

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

   

文字詳細コンテナの作成

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

1. Library の VisualElement を Hierarchy ウィンドウのコンテナ要素にドラッグします。これは、右側のすべての要素を保持するコンテナです。

2. Hierarchy ウィンドウから要素を選択します。

3. Inspector ウィンドウで、Align > Align Items を flex-end に設定します。

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

   

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

6. Hierarchy ウィンドウから要素を選択します。

7. Flex > Grow を 0 に設定します。

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

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

10. Spacing > Padding を 8 ピクセルに設定します。

    

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

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

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

1. StyleSheet ウィンドウで、+ > Create New USS を選択します。
2. MainView.uss という名前を付け、Save を選択します。
3. Add new selector… フィールドをクリックし、.border と入力します。.border セレクターが StyleSheet ウィンドウに表示されます。
4. StyleSheet ウィンドウで、.border を選択します。
5. Inspector ウィンドウで、Border > Color を #311A11 に設定します。
6. Border > Width を 4 ピクセルに設定します。
7. Border > Radius を 15 ピクセルに設定します。
8. StyleSheet ウィンドウから .border をキャラクター詳細コンテナの VisualElement にドラッグします。
9. StyleSheet ウィンドウから .border を #CharacterList にドラッグします。
10. #CharacterList を選択します。
11. Inspector ウィンドウで、Border を右クリックし、Unset を選択して、以前設定したインラインスタイルを削除します。

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

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

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

1. Library の VisualElement をキャラクター詳細コンテナにドラッグします。

2. Hierarchy ウィンドウから要素を選択します。

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

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

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

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

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

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

   

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

次はキャラクター詳細コンテナで、実際にその上に表示する画像を追加します。

1. Library の VisualElement をキャラクター詳細コンテナにドラッグします。

2. Hierarchy ウィンドウから要素を選択します。

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

4. Flex > Grow を 1 に設定し、画像が利用可能なスペースをすべて使えるようにします。

5. Background > Scale Mode を scale-to-fit に設定し、正しいアスペクト比を保ちながら、画像を拡大縮小して要素のサイズに合わせられるようにします。

   

ラベルの作成

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

1. Library の Label を Hierarchy ウィンドウのキャラクター詳細コンテナにドラッグします。

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

3. Library の Label を Hierarchy ウィンドウのキャラクター詳細コンテナにドラッグします。

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. Inspector ウィンドウの Style Class List フィールドに、クラス名として .background と入力します。
3. Extract Inlined Styles to New Class を選択します。ルート要素に設定したインラインスタイルで .background クラスセレクターが作成され、ルートのビジュアル要素の UI Document (UXML) が更新され、インラインスタイルの代わりにクラスセレクターが使用されます。
4. Viewport ウィンドウで、File > Save を選択します。

リストビューのランタイム UI の作成 の例の作業を続けたい場合は、他のすべての要素のスタイルを抽出するステップを繰り返し、指示に従って例を完成できます。

追加リソース

• UI Builder による要素のスタイル設定