以下の手順でランタイム UI を作成し、ゲームビューに表示することができます。
.uxml) を作成します。MonoBehaviours を作成して、UI コントロールの動作を定義します。まず、次の簡単なランタイム UI の例を試してみてください。この例では、ラベル、ボタン、トグル、テキストフィールドをシーンに加えます。ボタンをクリックすると、コンソールウィンドウにメッセージが表示されます。トグルを選択してボタンをクリックすると、コンソールウィンドウにボタンが何回クリックされたかが表示されます。テキストフィールドにテキストメッセージを入力すると、コンソールウィンドウにメッセージが表示されます。
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。
この例で作成するすべてのファイルは、GitHub リポジトリ にあります。
ラベル、ボタン、トグルを含む UI ドキュメントを作成します。UI Builder または UXML を使用して UI コントロールを加える方法については、UI Toolkit について を参照してください。
Unity エディターで任意のテンプレートを使ってプロジェクトを作成します。
以下のコンテンツで SimpleRuntimeUI.uxml という UI ドキュメントを作成します。
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"
xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements"
noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:VisualElement style="flex-grow: 1;">
<ui:Label text="This is a Label" display-tooltip-when-elided="true"/>
<ui:Button text="This is a Button" display-tooltip-when-elided="true" name="button"/>
<ui:Toggle label="Display the counter?" name="toggle"/>
<ui:TextField picking-mode="Ignore" label="Text Field" text="filler text" name="input-message" />
</ui:VisualElement>
</ui:UXML>
サンプルシーン内に UIDocument ゲームオブジェクトを作成し、UI Document をソースアセットとして加えます。
SampleScene で、GameObject > UI Toolkit > UI Document を選択します。これにより以下が作成されます。
Hierarchy でUIDocument ゲームオブジェクトを選択し階層で選択し、Project ウィンドウの SimpleRuntimeUI.uxml を Inspector ウィンドウの UI Document コンポーネントの Source Asset フィールドにドラッグします。これで、ソースアセットが作成した UXML ファイルに参照されます。
ロジックを追加するには、MonoBehaviour から派生した C# スクリプトを作成し、UI Document コンポーネントが参照するコントロールにアクセスします。
Unity は、コンポーネント上で OnEnable が呼び出されると、UI Document コンポーネントのソース UXML をロードします。ビジュアルツリーが正しくロードされるようにするには、OnEnable メソッドの内部でコントロールと対話するロジックを加えます。
以下のコンテンツで SimpleRuntimeUI.cs という C# スクリプトを作成します。
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleRuntimeUI : MonoBehaviour
{
private Button _button;
private Toggle _toggle;
private int _clickCount;
//Add logic that interacts with the UI controls in the `OnEnable` methods
private void OnEnable()
{
// The UXML is already instantiated by the UIDocument component
var uiDocument = GetComponent<UIDocument>();
_button = uiDocument.rootVisualElement.Q("button") as Button;
_toggle = uiDocument.rootVisualElement.Q("toggle") as Toggle;
_button.RegisterCallback<ClickEvent>(PrintClickMessage);
var _inputFields = uiDocument.rootVisualElement.Q("input-message");
_inputFields.RegisterCallback<ChangeEvent<string>>(InputMessage);
}
private void OnDisable()
{
_button.UnregisterCallback<ClickEvent>(PrintClickMessage);
}
private void PrintClickMessage(ClickEvent evt)
{
++_clickCount;
Debug.Log($"{"button"} was clicked!" +
(_toggle.value ? " Count: " + _clickCount : ""));
}
public static void InputMessage(ChangeEvent<string> evt)
{
Debug.Log($"{evt.newValue} -> {evt.target}");
}
}
UIDocument ゲームオブジェクトのコンポーネントとして SimpleRuntimeUI.cs 加えます。