Создание простого перехода с помощью скриптов UI Builder и C#

Версия: 2021.3+

В этом примере показано, как создать простые переходы, которые вызывают псевдоклассы и события C#.

Примерный обзор

В этом примере создается пользовательское окно редактора с тремя метками, которые поворачиваются и масштабируются при нажатии на них курсора мыши. Переход длится три секунды.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• UI Builder
• USS
• Псевдоклассы
• Обработка событий

Создание файлов окна редактора

Используйте меню для создания файлов окна Редактора с тремя метками по умолчанию.

1. Создайте проект Unity с любым шаблоном.

2. Создайте папку create-a-transition для хранения файлов для этого примера.

3. В этой папке щелкните правой кнопкой мыши окно Project и выберите Создать > UI Toolkit > Окно редактора.

4. В поле C# введите TransitionExample. Это создаст следующие файлы:

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

Создать переход с UI Builder

В UI Builder используйте окно StyleSheets для создания стиля перехода для метки, который запускает переход. Установите переход на метке, а не на переходе. Если вы установите переход на переходе, переход не будет работать, если курсор покинет метку.

1. Откройте TransitionExample.uxml в UI Builder.

2. В окне StyleSheets нажмите Добавить новый селектор и введите Label:hover, чтобы добавить стиль указания для метки.

3. Нажмите Enter и выберите Label:hover в списке селекторов USS.

4. В течение Transform в разделе Inspector, выполните следующие действия для масштабирования и вращения меток:
   • В строке Масштаб измените значение X на 1.1.
   • В строке Вращать введите 10.

5. В окне StyleSheets нажмите Добавить новый селектор и введите Label для добавления стиля для метки.

6. Нажмите Enter и выберите Этикетка в списке селекторов USS.

7. В разделе Анимации перехода введите 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 выберите Окно > UI Toolkit > Пример перехода.

10. Наведите курсор на вторую и третью метки. Метки вращаются и увеличиваются в размере в течение трех секунд.

Создание перехода с помощью скриптов 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 выберите Окно > UI Toolkit > Пример перехода.

4. Наведите курсор мыши на первую метку. Метка вращается и увеличивается в размере в течение трех секунд.

Дополнительные ресурсы

• USS переходный период