UI Builder と C# スクリプトによる簡単な遷移の作成

Version:2021.3+

この例では、擬似クラスと C# イベントによってトリガーされる簡単な遷移を作成する方法を紹介します。

例の概要

この例では、マウスオーバーすると回転や拡大縮小を行う 3 つのラベルを持つカスタムエディターウィンドウを作成します。遷移は 3 秒間続きます。

この例で作成する完成したファイルは、こちらの GitHub リポジトリ にあります。

必要な要件

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

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

エディターウィンドウファイルを作成する

メニューを使用して、3 つのデフォルトラベルを持つエディターウィンドウファイルを作成します。

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 で、StyleSheets ウィンドウを使用してラベルのホバースタイルを作成し、これにより遷移をトリガーします。ホバーではなくラベルで遷移を設定します。ホバーで遷移を設定する場合、カーソルがラベルから離れると遷移は機能しません。

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 と入力します。

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. 1 つ目のラベルにカーソルを合わせます。3 秒の間にラベルが回転し、サイズが大きくなります。

追加リソース

• USS 遷移