Version: 2022.3
言語: 日本語
エディターウィンドウ間をドラッグできるドラッグアンドドロップ UI の作成
ループする遷移の作成

トランジションイベントの作成

バージョン: 2021.3 以降

この例では、遷移イベントのライフサイクルを紹介します。

例の概要

この例では、ボタンとカラーパレットを持つカスタムエディターウィンドウを作成します。ボタンをクリックすると、以下が表示されます。

  • カラーパレットを青から緑へ変更する遷移が開始されます。
  • 遷移中に送信される遷移イベント。
  • トランジションの継続時間。

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

要件

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

例の作成

  1. 任意のテンプレートで Unity でプロジェクトを作成します。

  2. Assets > Create > UI Toolkit > Editor Window を選択します。

  3. UI Toolkit Editor Window Creator ウィンドウに、TransitionExample と入力します。

  4. 変更を保存します。これにより、TransitionExample.csTransitionExample.ussTransitionExample.uxml という 3 つのファイルが作成されます。

  5. TransitionExample.cs を以下のコンテンツに置き換えます。

    using System;
    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    
    public class TransitionExample : EditorWindow
    {
        [SerializeField] private VisualTreeAsset m_VisualTreeAsset = default;
    
        private Button clickMeButton;
        private VisualElement colorChanger;
        private Label eventLabel;
        private Label timeLabel;
    
        private DateTime lastEvent;
        private static readonly TimeSpan NearlyInstantaneousThreshold = TimeSpan.FromMilliseconds(10);
    
        private static readonly string ClickMeButtonClass = "click-me";
        private static readonly string ColorChangerClass = "color-changer";
        private static readonly string ColorChangerTransitionClass = "color-transition";
        private static readonly string EventLabelName = "eventLabel";
        private static readonly string TimeLabelName = "timeLabel";
        private static readonly string TimeBelowThresholdText = "Almost instantaneous.";
    
        [MenuItem("Window/UI Toolkit/Transition Example")]
        public static void ShowExample()
        {
            TransitionExample wnd = GetWindow<TransitionExample>();
            wnd.titleContent = new GUIContent("TransitionExample");
            wnd.minSize = new Vector2(500f, 400f);
        }
    
        public void CreateGUI()
        {
            lastEvent = DateTime.Now;
    
            // Each editor window contains a root VisualElement object
            VisualElement root = rootVisualElement;
    
            // Instantiate UXML
            VisualElement uxmlAsset = m_VisualTreeAsset.Instantiate();
            root.Add(uxmlAsset);
    
            // Get the relevant elements by querying the root element
            clickMeButton = root.Q<Button>(className: ClickMeButtonClass);
    
            colorChanger = root.Q<VisualElement>(className: ColorChangerClass);
    
            eventLabel = root.Q<Label>(name: EventLabelName);
    
            timeLabel = root.Q<Label>(name: TimeLabelName);
    
            // Add callbacks for clicking on the button and monitoring the color changing element.
            clickMeButton.RegisterCallback<ClickEvent>(OnClickEvent);
    
            colorChanger.RegisterCallback<TransitionRunEvent>(OnTransitionRun);
            colorChanger.RegisterCallback<TransitionStartEvent>(OnTransitionStart);
            colorChanger.RegisterCallback<TransitionEndEvent>(OnTransitionEnd);
            colorChanger.RegisterCallback<TransitionCancelEvent>(OnTransitionCancel);
        }
    
        private void OnDisable()
        {
            clickMeButton.UnregisterCallback<ClickEvent>(OnClickEvent);
    
            colorChanger.UnregisterCallback<TransitionRunEvent>(OnTransitionRun);
            colorChanger.UnregisterCallback<TransitionStartEvent>(OnTransitionStart);
            colorChanger.UnregisterCallback<TransitionEndEvent>(OnTransitionEnd);
            colorChanger.UnregisterCallback<TransitionCancelEvent>(OnTransitionCancel);
        }
    
        private void OnClickEvent(ClickEvent evt)
        {
            colorChanger.ToggleInClassList(ColorChangerTransitionClass);
        }
    
        private void OnTransitionRun(TransitionRunEvent evt)
        {
            DisplayLatestEvent("TransitionRunEvent", DateTime.Now);
        }
    
        private void OnTransitionStart(TransitionStartEvent evt)
        {
            DisplayLatestEvent("TransitionStartEvent", DateTime.Now);
        }
    
        private void OnTransitionEnd(TransitionEndEvent evt)
        {
            DisplayLatestEvent("TransitionEndEvent", DateTime.Now);
        }
    
        private void OnTransitionCancel(TransitionCancelEvent evt)
        {
            DisplayLatestEvent("TransitionCancelEvent", DateTime.Now);
        }
    
        private void DisplayLatestEvent(string eventType, DateTime timestamp)
        {
            // If two events are sent too close together, add both to the Latest event line.
            // This happens if the delay is set to 0 and the TransitionRun and TransitionStart
            // are sent at the same time, or if the button was pressed before the transition
            // was over, thus sending TransitionCancel and TransitionRun (and potentially
            // TransitionStart) events close together.
            var elapsed = timestamp - lastEvent;
            if (elapsed <= NearlyInstantaneousThreshold)
            {
                timeLabel.text = TimeBelowThresholdText;
                eventLabel.text += eventType;
            }
            else
            {
                timeLabel.text = $"{elapsed:s\\.ff} s";
                eventLabel.text = eventType;
            }
    
            lastEvent = timestamp;
        }
    }
    
  6. TransitionExample.uxml を以下のコンテンツに置き換えます。

    <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">
        <Style src="TransitionExample.uss"/>
        <ui:VisualElement class="main-container">
            <ui:Button text="Click Me!" class="click-me"/>
            <ui:VisualElement class="color-changer"/>
            <ui:VisualElement class="label-section">
                <ui:VisualElement class="label-line">
                    <ui:Label text="Latest event(s) :  "/>
                    <ui:Label name="eventLabel"/>
                </ui:VisualElement>
                <ui:VisualElement class="label-line">
                    <ui:Label text="Time since last event :  "/>
                    <ui:Label name="timeLabel"/>
                </ui:VisualElement>
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:UXML>
    
  7. TransitionExample.uss を以下の内容に置き換えます。

    .click-me {
        width: 250px;
        height: 50px;
        font-size: 40px;
        -unity-font-style: bold-and-italic;
        margin: 30px;
    }
    
    .color-changer {
        margin: 10px;
        width: 150px;
        height: 150px;
        border-width: 10px;
        border-radius: 75px;
        background-color: rgb(0, 31, 138);
        transition: background-color 3s ease-in-out 1s;
    }
    
    .main-container {
        align-items: center;
        justify-content: space-between;
        flex-grow: 1;
        background-color: rgb(60, 60, 60);
    }
    
    .label-section {
        margin: 10px;
        border-width: 2px;
        width: 95%;
        align-items: center;
    }
    
    .label-line {
        flex-direction: row;
        margin: 5px;
        flex-grow: 1;
        align-items: center;
        width: 90%;
        height: 25px;
        font-size: 14px;
        padding: 0;
    }
    
    .color-transition {
        background-color: rgb(177, 221, 111);
    }
    
  8. TransitionExample.cs を選択し、TransitionExample.uxml を Inspector の Visual Tree Asset フィールドにドラッグします (まだそこにない場合)。

  9. 例を試すには、メニューから Window > UI Toolkit > Transition Example を選択します。

  10. ボタンをクリックすると、色の遷移と送信されたイベントの説明が表示されます。TransitionRunEventTransitionStartEvent の間に長い遅延があります。長い遅延の間に、ボタンをもう一度クリックすると、遷移を中断できます。

その他の参考資料

エディターウィンドウ間をドラッグできるドラッグアンドドロップ UI の作成
ループする遷移の作成