UI Builder のインターフェース概要

UI Builder ウィンドウを開くには以下を行います。

• Window > UI Toolkit > UI Builder を選択します。これにより、前もって UIBuilder とともにロードされている UXML ドキュメントが開きます。
• Project ウィンドウから、UXML ファイルをダブルクリックします。

以下の画像は UI Builder ウィンドウの例です。

UI ドキュメント(UXML) を開いて保存する

UI Builder で UI ドキュメントを開くには以下を行います。

• UI Builder の Viewport ペインツールバー内の File メニューを使用し、Open… を選択します。
• Library ペインの Project タブで、ドキュメントを右クリックし、Open in UI Builder を選択します。

デフォルトのテキストエディターまたは IDE で UI ドキュメント (UXML) を開くには以下を行います。

• inlineStyle ファイルアイコンを使用します。
  1. Project window > Assets の順に移動します。
  2. UXML ファイルアイコンの中央にある矢印をクリックします。
  3. inlineStyle ファイルアイコンをダブルクリックします。
• Open with IDE ボタンを使用します。
  1. UI Builder で、Library > Project タブの順に移動します。
  2. Assets フォルダーを開きます。
  3. UI Document (UXML) を右クリックし、Open with IDE を選択します。
• UXML Preview ペインを使用します。
  1. UI Builder で、UI Document (UXML) が現在ロードされていることを確認します。
  2. UXML Preview ペインに移動します。
  3. UXML Preview ペインの右上隅にあるアイコンを選択します。

  

現在開いているアクティブな UI Document (UXML) アセット名は、Hierarchy ペインのルートツリー項目、Viewport 内の Canvas ヘッダー、および Viewport 下部の UXML Preview ペインに表示されます。名前の横のアスタリスク (*) は、変更が未保存であることを示します。

UI ドキュメント(UXML) を保存するには、以下を行います。

• UI Builder の Viewport ペインツールバーの File > Save メニューを使用します。
• Ctrl/CMD + S を使用します。エディターでシーンを保存するように求めるプロンプトが表示されます。

ノート: Unity のプロジェクト全体の保存では、UI Builder で開いているアクティブな UI Document (UXML) は保存されません。

StyleSheets

UI ツールキットの StyleSheet と USS セレクターは、多くの要素や UI ドキュメント (UXML) でスタイルを共有し、適用するために使用されます。

StyleSheets ペイン では、以下の内容を行うことができます。

• 現在の UI ドキュメント (UXML) で StyleSheets (USS) の追加、並べ替え、削除を行います。
• StyleSheets 内で USS セレクターを作成/並べ替え/コピー/削除して、異なる要素間でスタイルを共有できます。

階層

Hierarchy ペイン には、現在のドキュメントの要素階層を表すツリービューが表示されます。UI Document (UXML) の UXML テキスト表現で表示される階層のスーパーセットです。UXML から直接作成される要素に加え、Hierarchy ペインには、UI のランタイムにのみ存在する動的に作成される要素も含まれます。例えば、Hierarchy ペインにはテンプレートインスタンス (現在のドキュメント内にインスタンス化された別のドキュメント) の一部である要素が含まれますが、UXML には 1 つの <Instance> タグのみが配置されています。

Hierarchy ペインを使用すると、以下のことが可能です。

• 検査や編集のために要素を選択する。
• 要素のカット、コピー、削除、並べ替えを行う。
• インスタンス化されたテンプレートドキュメントをサブドキュメントとして開き、インプレース (コンテキスト内) 編集を行う。
• 多くの要素のスタイルクラスリスト、名前属性、ローカルにアタッチされた StyleSheet をまとめて確認する。

要素は、name 属性に従ってツリーに表示されます。要素の name 属性が設定されていない場合は、要素の C# 型に従って表示されます。要素をダブルクリックすると、簡単に名前を変更できます。

Hierarchy ペインのヘッダーの右上隅にある ⋮ アイコンをクリックすると、表示オプションのメニューにアクセスできます。

• Type を選択すると、Hierarchy で、名前の有無にかかわらず、各要素の C# 型が強制的に表示されます。
• Class List を選択すると、各要素のスタイルクラスリストが Hierarchy の項目の横に表示されます。
• Attached StyleSheets を選択すると、ローカルに添付された StyleSheet がその要素の横に表示されます。

Library

Library ペイン は、Unity エディターの Project ウィンドウに類似しています。利用可能な UI 要素が表示されます。

• Standard タブには、Unity に用意されている標準的なビルトイン要素が記載されています。これらの要素には、サポートされているすべての Unity エディターとランタイムテーマで動作する標準的なスタイルが含まれています。

Library ウィンドウの右上隅にある ⋮ アイコンを使用して Tree View を選択すると、この表示モードをタイル表示とツリー表示間で切り替えることができます。

• Project タブには、プロジェクト内のカスタムの .uxml アセットが表示されます。また、VisualElement から継承されたカスタム C# 要素も表示されます。Library の Project タブ内の任意の要素をプレビューするには、その要素にマウスオーバーします。プレビューは、Library ペインの右側に表示されます。

要素をインスタンス化するには、以下のいずれかの操作を行います。

• Hierarchy ペインに要素をドラッグします。
• Viewport の Canvas 上に要素をドラッグします。
• 要素をダブルクリックします。これにより、現在選択されている要素の兄弟として要素が追加されます。何も選択されていない場合、要素は UI Document (UXML) のルートに加えられます。

Hierarchy ウィンドウまたは Canvas で要素を選択できます。Hierarchy で、Ctrl(macOS:Cmd) キーを押しながら追加の要素を選択します。

Viewport /Viewport

Viewport ペイン には、UI Document (UXML) の出力がサイズ変更可能なフローティング編集時の Canvas に表示されます。ツールバーには、UI Builder 固有のコマンドメニュー、Viewport 設定、Theme セレクター、Preview ボタンがあります。UI Builder の追加設定は、Viewport の右上隅の ⋮ メニューにあり、Unity の Project Settings の UI Builder Settings へのショートカットもあります。

Viewport 内の移動

Viewport 内を移動するにはパンとズームを使用します。UI Builder は、各 UI Document (UXML) の現在のパンとズームの状態を保存し、UI Builder ウィンドウの再ロード後かドメインの再ロード後、または同じ　UI Document (UXML) を閉じて再度開くときにそれを復元します。

新しいドキュメントを作成し開くと、UI Builder はパンとズームの状態をリセットします。

パンするには、以下のいずれかの操作を行います。

• Viewport を中クリックしてドラッグする。
• Ctrl/Cmd キー + Alt キー/Option キーを押しながら、Viewport をクリックアンドドラッグする。

ズームインおよびズームアウトするには、Viewport にマウスポインターを置き、以下のいずれかを行います。

• Viewport にマウスポインターを置き、マウスホイールを回転させます。
• Alt/Option キーを押しながら、マウスを右クリックしてドラッグする。右にドラッグしてズームイン、左にドラッグしてズームアウトする。

Canvas の設定

Canvas は、オーサリング中の UI Document (UXML) を編集、プレビュー、操作する場所です。キャンバスが表示されていない場合は、Viewport ツールバーの Fit Viewport ボタンを選択して表示します。Canvas のヘッダーには、現在ロードされている UI Document (UXML) の名前が表示されます。名前の横のアスタリスク (*) は、変更が未保存であることを示します。

Canvas のサイズを変更するには、以下のようにします。

• Viewport 内で、エッジまたは端をドラッグします。
• Canvas ヘッダーを選択すると、キャンバスの Inspector ウィンドウが表示され、キャンバスの幅と高さを入力できます。

Canvas のサイズを Unity Game ウィンドウのサイズに合わせるには、Match Game View チェックボックスをオンにします。

Canvas の背景を変更すると、UI の編集が容易になります。背景を変更するには、Inspector ペインで Canvas を選択します。ソリッドカラー、特定のテクスチャ (UI デザイナーのモックアップ)、または開いている Unity シーンの Camera から受信するライブビューに設定できます。

サイズなど、Canvas に関連する設定は、UI Document (UXML) の一部として保存されるのではなく、次に同じ UI Document (UXML) を開くときのために、別の設定ファイルに保存されます。

ライトまたはダークのテーマでのプレビュー

デフォルトでは、UI Builder は Unity のデフォルトランタイムテーマを使用します。UI は、ライトまたはダークのエディターテーマでプレビューできます。これを行うには、Editor Extension Authoring が有効になっていることを確認し、Viewport ツールバーのテーマドロップダウンリストから Dark Editor Theme または Light Editor Theme を選択します。

Active Editor Theme は、Unity エディターで設定したライトまたはダークのテーマです。

カスタムテーマを作成した場合は、リストから選択して Viewport でプレビューすることもできます。

コードプレビュー

UI Builder は、UI をビルドする際に、基礎となるUXML テキストをと USS テキストを自動的に生成し、UXML Preview ペインと USS Preview ペイン に表示します。

インスペクター

UI Builder の Inspector ペイン は Unity の Inspector ウィンドウに類似しています。Inspector は、UI Builder 内で選択したオブジェクトに応じて、若干異なる内容を表示します。

• 要素には、要素ごとの (UXML) 属性のための属性セクション、スタイルクラスを割り当て、StyleSheet から適用されたスタイルを表示するための StyleSheets セクション、要素ごとのインラインのスタイルプロパティを編集するための Inlined Styles セクションが表示されます。
• USS セレクターには、セレクターのクエリ文字列を変更するための Style Selector セクションと、スタイルプロパティを編集するための Styles セクションが表示されます。
• Canvas には、Canvas のサイズを変更するための Canvas Size セクション、編集時のキャンバスの背景を変更するための Canvas Background セクション、およびドキュメントごとの編集時間設定のための Document Settings セクションが表示されます。

UI ドキュメント(UXML) の Editor Extension Authoring を有効にする

デフォルトでは、UI Builder で作成された新しい UI ドキュメント (UXML) には、ランタイム専用 UI とされている設定がある、UXML 内に保存されています。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">

つまり、デフォルトでは、Library ペインの Standard タブには、ランタイムに最適な要素のみが含まれます。

カスタムのエディターウィンドウやカスタム Inspector など、Unity エディター用の UI を作成するには、Editor Extension Authoring を有効にすると、Library ペインの Standard タブに Editor-Only のコントロールが追加されます。

エディタ拡張オーサリングを有効にするには以下を行います。

• Canvas ヘッダーを選択すると、キャンバスの Inspector ウィンドウが表示され、ここで Document Settings > Editor Extension Authoring オプションを選択します。

• Library ペインのメニューで、Editor Extension Authoring　を選択します。

ノート: 他の Canvas 設定とは異なり、この設定は UI Document (UXML) のルート要素の editor-extension-mode 属性に保存されます。

新しい UI Document (UXML) で Editor Extension Authoring をデフォルトで有効にするには、以下の操作を行います。

1. Edit > Project Settings > UI Builder の順に移動します。
2. Enable Editor Extension Authoring by Default を選択します。

UI Builder 以外 (テキストエディターや IDE など) で作成した UI Document (UXML) は、UI Builder で開くまで Editor Extension Authoring 属性を持ちません。ただし、テキストエディターや IDE で作成した UI Document (UXML) には、いつでも editor-extension-mode 属性を手動で追加できます。外部で作成した UI Document (UXML) を UI Builder で初めて開くと、Editor Extension Authoring 属性は UI Builder のプロジェクト設定で指定されたデフォルトに従って設定されます。

追加リソース

• UI Builder の使用準備