バージョン: 2022.1 以降
この例では、UI Builder と C# スクリプトを使って簡単な遷移を作成する方法を紹介します。
この例では、マウスオーバーすると回転やスケールを行う 3 つのラベルを持つカスタムエディターウィンドウを作成します。
この例で作成するすべてのファイルは、GitHub リポジトリ にあります。
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。
エディターウィンドウのファイルを自動的に作成するには、以下を行います。
任意のテンプレートで Unity プロジェクトを作成します。
create-a-transition
という名前のフォルダーを作成し、この例に使用するファイルを保存します。
そのフォルダーで、Project ウィンドウを右クリックし、Create > UI Toolkit > Editor Window の順に選択します。
C# ボックスに、TransitionExample
と入力します。これにより、以下のファイルが作成されます。
TransitionExample.cs
TransitionExample.uss
TransitionExample.uxml
UI Builder で 2 つ目と 3 つ目のラベルの遷移を作成します。ユーザーがラベルにマウスオーバーするときにラベルのサイズ変更と回転を行う遷移を設定し、遷移が 3 秒間継続するように設定します。
UI Builder で TransitionExample.uxml
を開きます。
StyleSheets ウィンドウで、 Add new selector をクリックし、Label:hover
を入力してラベルにホバーのスタイルを加えます。
Enter キーを押し、USS セレクタの一覧から Label:hover を選択します。
1.1
に変更します。10
と入力します。StyleSheets ウィンドウで、 Add new selector をクリックし、Label
を入力してラベルのスタイルを加えます。
Enter キーを押し、USS セレクタの一覧から Label を選択します。
Transition Animations のセクションで、 Duration の行に 3
と入力します。
ノート: Unity では、hover ではなく Label に遷移を設定することを推奨しています。
保存して、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;
}
Unity で Window > UI Toolkit > Transition Example を選択します。
2 つ目と 3 つ目のラベルにマウスオーバーします。。3 秒の間にラベルが回転し、サイズが大きくなります。
C# で、前セクションの最初のラベルに行ったのと同じように、遷移を作成します。
テキストエディターで TransitionExample.cs
を開きます。
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);
}
}
Unity で Window > UI Toolkit > Transition Example を選択します。
最初のラベルにマウスオーバーしてください。3 秒の間にラベルが回転し、サイズが大きくなります。