Buat transisi di jendela editor kustom

Contoh ini menunjukkan bagaimana membuat transisi sederhana di Pembuat UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary dan C #.

Contoh gambaran

Contohnya membuat jendela editor kustom dengan tiga label yang berputar dan berskala Anda menginjak mereka. transisi berlangsung selama tiga detik.

Anda dapat menemukan file yang lengkap yang contoh ini menciptakan di Repositori GitHub ini.

Prerequisites

Panduan ini dimaksudkan untuk pengembang yang akrab dengan Editor Unity, UI Toolkit, dan skrip C# yang memiliki pemahaman dasar tentang hal berikut:

• Pembuat UI
• USS
• Pseudo-classes

Buat file jendela Editor

Gunakan menu untuk membuat file jendela Editor secara otomatis.

1. Buat proyek Unity dengan template apa pun.

2. Buat folder bernama create-a-transition untuk menyimpan file untuk contoh ini.

3. Dalam folder itu, klik kanan di jendela Proyek dan pilih Create > UI Toolkit > Editor Window.

4. Dalam kotak C#, masukkan TransitionExample. Ini menciptakan file berikut:

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

Buat transisi di UI Builder

Buat transisi untuk label kedua dan ketiga di UI Builder. Tetapkan mengubah ukuran dan memutar label saat hovers pengguna label dan mengatur transisi untuk bertahan selama tiga detik.

1. Buka TransitionExample.uxml di UI Builder.

2. Di jendela StyleSheets, klik Add new selector dan masukkan Label:hover untuk menambahkan gaya hover untuk label.

3. Tekan Enter dan pilih Label:hover dalam daftar pemilih AS.

4. Pada bagian Transform dari InspectorJendela Unity yang menampilkan informasi tentang Pengaturan GameObject yang dipilih saat ini, aset atau proyek, memungkinkan Anda untuk memeriksa dan mengedit nilai. More info
   Lihat di Glossary, lakukan berikut untuk mengukur dan memutar label:
   • Dalam baris Scale, mengubah nilai X menjadi 1.1.
   • Dalam baris Rotate, masukkan 10.

5. Di jendela StyleSheets, klik Add new selector dan masukkan Label untuk menambahkan gaya untuk label.

6. Tekan Enter dan pilih Label dalam daftar pemilih AS.

7. Pada bagian Transition Animations, masukkan 3 di baris Duration. Sitemap Unity merekomendasikan bahwa Anda mengatur transisi pada label daripada hover.Note: Unity recommends that you set transitions on the label rather than the hover.

8. Simpan dan tutup UI Builder. File TransitionExample.uss Anda terlihat seperti berikut:

   .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. Di Unity, pilih Window > UI Toolkit > Transition Example.

10. Selama label kedua dan ketiga. Label berputar dan meningkatkan ukuran selama tiga detik.

Buat transisi di C#

Dalam C #, buat transisi yang sama yang Anda lakukan di bagian sebelumnya untuk label pertama.

1. Buka TransitionExample.cs dalam editor teks.

2. Ganti isi TransitionExample.cs dengan berikut:

   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. Di Unity, pilih Window > UI Toolkit > Transition Example.

4. Hover atas label pertama. Label berputar dan meningkat dalam ukuran selama tiga detik.

Sumber daya tambahan

• USS transisi