はじめに
今回はUI Toolkitで画面いっぱいに何かを表示したいときの方法を紹介したいと思います。
UI Builderと実際の見た目が異なる
BackgroudColorを赤色に設定したVisual Elementを配置し、flex-growを1に設定してあげるとUIBuilderのWindowいっぱいに表示されます。
ただしUnityエディタ上で実際にWindowを立ち上げても、何故かWindowいっぱいに表示されません。
原因
Unityが自動生成するTempalteContainerが原因です。TemplateContainerは子のサイズに応じて自動でリサイズします。
UI Toolkit Debuggerで見てみると、Visual ElementはTempateContainerの大きさまでしか広げることができず、TemplateContainerがWindowいっぱいには広がっていません。
またこれは覚えてほしい機能一位なのですが、UI Toolkit Debuggerでstyleの変更ができます。TemplateContainerのflex-growを1に変更すると画面いっぱいに赤色になります。
対処法
コード上でflex-growの設定をしたい場合は、rootVisualElementから設定してあげると良いでしょう。
public void CreateGUI() { // TemplateContainerのflexGrowを1に設定する rootVisualElement.Children().First().style.flexGrow = 1; // ... }
