Version: 2022.3
言語: 日本語
イベント例
カスタムエディターウィンドウ内にドラッグアンドドロップ UI を作成する

カスタムエディタウィンドウで遷移を作成する

バージョン: 2022.1 以降

この例では、UI Builder と C# スクリプトを使って簡単な遷移を作成する方法を紹介します。

例の概要

この例では、マウスオーバーすると回転やスケールを行う 3 つのラベルを持つカスタムエディターウィンドウを作成します。

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

要件

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

エディターウィンドウファイルの作成

エディターウィンドウのファイルを自動的に作成するには、以下を行います。

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

  2. create-a-transition という名前のフォルダーを作成し、この例に使用するファイルを保存します。

  3. そのフォルダーで、Project ウィンドウを右クリックし、Create > UI Toolkit > Editor Window の順に選択します。

  4. C# ボックスに、TransitionExample と入力します。これにより、以下のファイルが作成されます。

    • TransitionExample.cs
    • TransitionExample.uss
    • TransitionExample.uxml

UI Builder で遷移を作成する

UI Builder で 2 つ目と 3 つ目のラベルの遷移を作成します。ユーザーがラベルにマウスオーバーするときにラベルのサイズ変更と回転を行う遷移を設定し、遷移が 3 秒間継続するように設定します。

  1. UI Builder で TransitionExample.uxml を開きます。

  2. StyleSheets ウィンドウで、 Add new selector をクリックし、Label:hover を入力してラベルにホバーのスタイルを加えます。

  3. Enter キーを押し、USS セレクタの一覧から Label:hover を選択します。

  4. Inspector の Transform セクションで、ラベルを拡大縮小および回転させるために次の操作を行います。
    • Scale の行で、X の値を 1.1 に変更します。
    • Rotate の行に、10 と入力します。
  5. StyleSheets ウィンドウで、 Add new selector をクリックし、Label を入力してラベルのスタイルを加えます。

  6. Enter キーを押し、USS セレクタの一覧から Label を選択します。

  7. Transition Animations のセクションで、 Duration の行に 3 と入力します。 ノート: Unity では、hover ではなく Label に遷移を設定することを推奨しています。

  8. 保存して、UI Builder を閉じます。TransitionExample.uss ファイルは、以下のようになります。

    .custom-label {
        font-size: 20px;
        -unity-font-style: bold;
        color: rgb(68, 138, 255);
    }
    
    Label:hover {
        scale: 1.1 1;
        rotate: 10deg;
    }
    
    Label {
        transition-duration: 3s;
    }
    
  9. Unity で Window > UI Toolkit > Transition Example を選択します。

  10. 2 つ目と 3 つ目のラベルにマウスオーバーします。。3 秒の間にラベルが回転し、サイズが大きくなります。

C# で遷移を作成する

C# で、前セクションの最初のラベルに行ったのと同じように、遷移を作成します。

  1. テキストエディターで TransitionExample.cs を開きます。

  2. TransitionExample.cs の内容を以下に置き換えます。

    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    using System.Collections.Generic;
    
    public class TransitionExample : EditorWindow
    {
        [SerializeField]
        VisualTreeAsset m_VisualTreeAsset;
    
        [MenuItem("Window/UI Toolkit/TransitionExample")]
        public static void ShowExample()
        {
            TransitionExample wnd = GetWindow<TransitionExample>();
            wnd.titleContent = new GUIContent("Transition Example");
        }
    
        public void CreateGUI()
        {
            // Each editor window contains a root VisualElement object.
            VisualElement root = rootVisualElement;
    
            // VisualElements objects can contain other VisualElement following a tree hierarchy.
            cSharpLabel = new Label("Hello World! From C#");
            root.Add(cSharpLabel);
    
            // Create transition on the new Label.
            cSharpLabel.style.transitionDuration = new List<TimeValue>{ new TimeValue(3) };
    
            // Record default rotate and scale values.
            defaultRotate = cSharpLabel.resolvedStyle.rotate;
            defaultScale = cSharpLabel.resolvedStyle.scale;
    
            // Set up event handlers to simulate the use of the :hover pseudo-class.
            cSharpLabel.RegisterCallback<PointerOverEvent>(OnPointerOver);
            cSharpLabel.RegisterCallback<PointerOutEvent>(OnPointerOut);
    
            // Instantiate UXML
            VisualElement labelFromUXML = m_VisualTreeAsset.Instantiate();
            root.Add(labelFromUXML);
        }
    
        // The Label created with C#.
        VisualElement cSharpLabel;
    
        // The default rotate and scale values for the new Label.
        Rotate defaultRotate;
        Scale defaultScale;
    
        void OnPointerOver(PointerOverEvent evt)
        {
            SetHover(evt.currentTarget as VisualElement, true);
        }
    
        void OnPointerOut(PointerOutEvent evt)
        {
            SetHover(evt.currentTarget as VisualElement, false);
        }
    
        // When the user enters or exits the Label, set the rotate and scale.
        void SetHover(VisualElement label, bool hover)
        {
            label.style.rotate = hover ? new(Angle.Degrees(10)) : defaultRotate;
            label.style.scale = hover ? new Vector2(1.1f, 1) : defaultScale;
        }
    
        // Unregister all event callbacks.
        void OnDisable()
        {
            cSharpLabel.UnregisterCallback<PointerOverEvent>(OnPointerOver);
            cSharpLabel.UnregisterCallback<PointerOutEvent>(OnPointerOut);
        }
    }
    
  3. Unity で Window > UI Toolkit > Transition Example を選択します。

  4. 最初のラベルにマウスオーバーしてください。3 秒の間にラベルが回転し、サイズが大きくなります。

その他の参考資料

イベント例
カスタムエディターウィンドウ内にドラッグアンドドロップ UI を作成する