ランタイム UI について

以下の手順でランタイム UI を作成し、ゲームビューに表示することができます。

コントロールを含む UI ドキュメント (.uxml) を作成します。
シーンに UIDocument ゲームオブジェクトを加え、そのソースアセットとして UXML ファイルを加えます。
MonoBehaviours を作成して、UI コントロールの動作を定義します。

まず、次の簡単なランタイム UI の例を試してみてください。この例では、ラベル、ボタン、トグル、テキストフィールドをシーンに加えます。ボタンをクリックすると、コンソールウィンドウにメッセージが表示されます。トグルを選択してボタンをクリックすると、コンソールウィンドウにボタンが何回クリックされたかが表示されます。テキストフィールドにテキストメッセージを入力すると、コンソールウィンドウにメッセージが表示されます。

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

この例で作成するすべてのファイルは、GitHub リポジトリにあります。

コントロールを含む UI ドキュメントの作成

Create a UI Document with a label, a button, and a Toggle. For information on how to add UI controls with UI Builder or UXML, see Simple UI Toolkit workflow.

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" value="filler text" text="filler text" name="input-message" />
    </ui:VisualElement>
</ui:UXML>

シーンの設定

サンプルシーン内に UIDocument ゲームオブジェクトを作成し、UI Document をソースアセットとして加えます。

SampleScene で、GameObject > UI Toolkit > UI Document を選択します。これにより以下が作成されます。
- Panel Settings アセットとデフォルトのランタイムテーマを含む UI Toolkit フォルダー。
- UI Document コンポーネントがアタッチされたゲームオブジェクトで、UI Document コンポーネントは Panel Settings アセットに接続されています。
Hierarchy でUIDocument ゲームオブジェクトを選択し階層で選択し、Project ウィンドウの SimpleRuntimeUI.uxml を Inspector ウィンドウの UI Document コンポーネントの Source Asset フィールドにドラッグします。これで、ソースアセットが作成した UXML ファイルに参照されます。

UI コントロールの動作を定義する

To add logic, create a companion script that derives from MonoBehaviour to access the controls that the UI Document component references.

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 加えます。

その他の参考資料

ランタイム UI のサポート

ゲームビューで UI をレンダリングする