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

バージョン: 2022.1 以降

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

例の概要

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

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

要件

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

• UI Builder
• USS
• 擬似クラス
• イベントの処理

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

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

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 秒の間にラベルが回転し、サイズが大きくなります。

その他の参考資料

• USS 遷移