Version: 2022.2
言語: 日本語
ランタイム UI のサポート
ゲームビューで UI をレンダリングする

ランタイム UI について

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

  1. コントロールを含む UI ドキュメント (.uxml) を作成します
  2. シーンに UIDocument ゲームオブジェクトを加え、そのソースアセットとして UXML ファイルを加えます
  3. 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.

  1. Unity エディターで任意のテンプレートを使ってプロジェクトを作成します。

  2. 以下のコンテンツで 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 をソースアセットとして加えます。

  1. SampleScene で、GameObject > UI Toolkit > UI Document を選択します。これにより以下が作成されます。

    • Panel Settings アセットとデフォルトのランタイムテーマを含む UI Toolkit フォルダー。
    • UI Document コンポーネントがアタッチされたゲームオブジェクトで、UI Document コンポーネントは Panel Settings アセットに接続されています。
  2. 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 メソッドの内部でコントロールと対話するロジックを加えます。

  1. 以下のコンテンツで 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}");
        }
    }
    
  2. UIDocument ゲームオブジェクトのコンポーネントとして SimpleRuntimeUI.cs 加えます。

その他の参考資料

ランタイム UI のサポート
ゲームビューで UI をレンダリングする