バージョン: 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 秒の間にラベルが回転し、サイズが大きくなります。
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.