» VR開発メモトップへ

UI Toolkitメモ

最終更新日:2021年09月02日

更新履歴

(2021年9月2日)Unity 2021.2について追記
(2021年8月26日)とりあえずページ作成


UI Toolkitについて

UI ToolkitはUnityの新しいUIシステムで、ブラウザのHTML、CSS、jQueryと似たような仕組みでエディタやランタイム(ゲーム中)のUIを作ることができます。

HTMLのような.uxmlファイル、CSSのような.ussファイル、jQueryのようなUQueryがあり、UIを視覚的にデザインできるUI Builderがあります。

UI Toolkitを手っ取り早く試すには

ProjectウィンドウでEditorフォルダを作って右クリックしてCreate > UI Toolkit > Editor Windowを実行し、適当にウィンドウの名前を入力します(TestWindowとか)。生成されるコードを見れば基本的なところはだいたい分かると思います。Window > UI Toolkitにウィンドウを開くメニューが追加されています。

どんな要素が使えるか調べるには

Windows > UI Toolkit > Samplesで要素の一覧が表示されます。また、下記ページにリファレンスがあります。

UI Toolkitを実行時に使用する

ゲーム中のUIを作成するには

Unity 2021.2以降では実行時にUI ToolkitのUIを使用できます。

ProjectウィンドウでCreate > UI ToolkitにあるPanel Settings AssetとUI Documentを作成し、ゲームオブジェクトにUI Documentコンポーネントをアタッチして、作成した2つのファイルをアタッチするととりあえず表示されます。

なお、ワールド空間にUI ToolkitのUIを表示することは現在できません(一応RenderTextureを使用する方法はあります)。UGUIを使用する必要があります。

UI DocumentコンポーネントのUXMLにアクセスするには

下記の要領でアクセスできます。

var startButton = GetComponent<UIDocument>().rootVisualElement.Q<Button>("start-button");

startButton.clicked += () =>
{
    StartGame();
}

複数のUIの表示を切り替えるには

UI Documentコンポーネントはひとつのゲームオブジェクトにつきひとつしかアタッチできないため、複数のゲームオブジェクトにUI Documentをアタッチして表示の有効・無効を切り替える必要があります。

Unity公式のサンプルプロジェクト「UI Toolkit Unity Royale Runtime Demo」が参考になります。

なお、ゲームオブジェクト自体やUI Documentを無効にするとイベントが剥がれてしまいますが、style.displayで非表示にすると剥がれません。

outRoomUIDocument.rootVisualElement.style.display = DisplayStyle.None;
inRoomUIDocument.rootVisualElement.style.display = DisplayStyle.Flex;

UXMLのTips

DOMのIDに相当するものはどこ?

nameになります。

<ui:Button ... name="start-button" />

これをQ<Button>(“start-button”)のようにしてクエリできます。

UI BuilderではHierarchyで要素をダブルクリックしてリネームすると設定できます。

TextFieldの入力値の変化を知るには

var textField = GetComponent<UIDocument>().rootVisualElement.Q<TextField>();
textField.RegisterValueChangedCallback(changeEvent =>
{
    Debug.Log(changeEvent.newValue);
});

USSのTips

UI Builderで実行時のスタイルシートが適用されない

USSに以下を追加するといいようです(が、保存すると消えてしまいます)。

@import url("unity-theme://default");

その他のTips

UIElementsSchemaフォルダは何?

UXMLファイルをVisual StudioやRiederで編集するときの補完処理に使われるとのことです。バージョン管理からはずしてもよさそうです。

以下φ(..)メモメモ中

書いた人:こりん(@korinVR
» VR開発メモトップへ