Sederhana UI Toolkit alur kerja

Jika Anda melakukan tugas tertentu sering, Anda dapat menggunakan UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Toolkit untuk membuat UI khusus untuk itu. Misalnya Anda dapat membuat jendela editor kustom.

Panduan ini menjelaskan alur kerja UI Toolkit dasar menggunakan jendela editor kustom sebagai contoh. Contohnya menunjukkan bagaimana membuat jendela editor kustom dan menambahkan kontrol UI ke jendela editor kustom Anda menggunakan Pembuat UI, UXML, dan skrip C#.

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

Prerequisites

Panduan ini adalah untuk pengembang yang akrab dengan Editor Unity dan skrip C #, tetapi baru untuk UI Toolkit. Unity merekomendasikan bahwa Anda memiliki pemahaman dasar tentang konsep berikut:

• Pembuat UI
• UXML
• Pohon Visual
• Controls:
  • Label
  • Button
  • ToggleSebuah kotak centang yang memungkinkan pengguna untuk mengganti opsi atau menonaktifkan. More info
    Lihat di Glossary

Buat jendela editor kustom

1. Dari jendela Proyek, klik kanan dan pilih Create > UI Toolkit > Editor Window.
2. Pada UI Toolkit Editor Window Creator, masukkan MyCustomEditor dan disable USS.
3. Klik Confirm.

Ini menciptakan jendela editor kustom dengan dua label. Anda dapat membuka jendela Editor dari menu (Window > UI Toolkit > MyCustomEditor). Anda dapat menemukan file sumber untuk di folder Asset/Editor.

Tambahkan kontrol UI ke jendela

Anda dapat menambahkan kontrol UI ke jendela Anda dengan cara berikut:

• Gunakan UI Builder untuk secara visual menambahkan kontrol UI
• Gunakan file teks seperti XML (UXML) untuk menambahkan kontrol UI
• Gunakan skrip C# untuk menambahkan kontrol UI

Anda dapat menggunakan metode ini secara individual, atau menggabungkan. Contoh berikut membuat tiga set label, tombol, dan toggles menggunakan kombinasi metode ini.

Sitemap Gunakan UI Builder untuk menambahkan kontrol UIUse UI Builder to add UI controls

Untuk menambahkan kontrol UI secara visual ke jendela Anda, gunakan Pembuat UI. Contoh berikut menunjukkan cara menambahkan tombol dan beralih ke jendela editor kustom Anda selain label default.

1. Dalam folder Editor, klik dua MyCustomEditor.uxml untuk membuka UI Builder.

2. Dalam UI Builder, drag Button dan Toggle dari Library > Controls ke dalam Hierarchy atau jendela Pratinjau di Viewport.

3. Pada Hierarchy, tambahkan beberapa atribut untuk kontrol Anda:

   • Klik label, lalu di bidang Text InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
     See in Glossary, ubah teks default ke These controls were created in UI Builder.
   • Klik tombol, dan kemudian di bidang Text Inspector, masukkan This is button1. Di bidang Name Inspector, masukkan button1.
   • Klik toggle, dan kemudian di bidang Label dari Inspector, masukkan Number?. Di bidang Name Inspector, masukkan toggle1.

4. Save dan menutup jendela UI Builder.

5. Buka jendela editor kustom Anda. Anda harus melihat tombol dan toggle Anda hanya ditambahkan di jendela Anda.

Sitemap Gunakan UXML untuk menambahkan kontrol UIUse UXML to add UI controls

Jika Anda lebih memilih mendefinisikan UI Anda dalam file teks, Anda dapat mengedit UXML untuk menambahkan kontrol UI. Contoh menambahkan satu set label, tombol, dan beralih ke jendela Anda.

1. Dalam folder Editor, klik Assets > Create > UI Toolkit > UI Document untuk membuat file UXML yang disebut MyCustomEditor_UXML.uxml.

2. Buka MyCustomEditor_UXML.uxml pada editor teks.

   Tip: Anda dapat melakukannya dengan mengklik panah pada MyCustomEditor_UXML.uxml di Project windowJendela yang menunjukkan isi folder Assets (Project tab) More info
   Lihat di Glossary, dan kemudian klik dua inlineStyle.

3. Secara default, dokumen UXML menampilkan elemen tunggal dengan tag engine:UXML. Ini adalah elemen akar dari pohon XML. Dalam elemen ini, Anda dapat menambahkan kontrol UI dengan atribut mereka.

   File MyCustomEditor_UXML.uxml selesai Anda harus terlihat seperti berikut:

   <?xml version="1.0" encoding="utf-8"?>
   <engine:UXML
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:engine="UnityEngine.UIElements"
       xmlns:editor="UnityEditor.UIElements"
       xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
   >
       <engine:Label text="These controls were created with UXML." />
       <engine:Button text="This is button2." name="button2"/>
       <engine:Toggle label="Number?" name="toggle2"/>
   </engine:UXML>
   

4. Buka MyCustomEditor.cs.

5. Tambahkan bidang VisualTreeAsset pribadi yang disebut m_UXMLTree ke kelas MyCustomEditor. Masukkan atribut [SerializeField] di atasnya:

   [SerializeField]
   private VisualTreeAsset m_UXMLTree;
   

6. Tambahkan garis berikut kode ke akhir CreateGUI().

   rootVisualElement.Add(m_UXMLTree.Instantiate());
   

7. Di jendela Proyek, pilih MyCustomEditor.cs.

8. Seret MyCustomEditor_UXML.uxml dari jendela Proyek ke bidang UXML Tree di Inspector. Ini menetapkan UXML Anda ke pohon visual.

9. Buka jendela editor kustom Anda. Anda harus melihat tiga label, dua tombol, dan dua sakelar di jendela Anda.

Sitemap Gunakan skrip C# untuk menambahkan kontrol UIUse C# script to add UI controls

Jika Anda lebih suka pengkodean, Anda dapat menambahkan Kontrol UI ke jendela Anda menggunakan skrip C #. Contoh berikut menambahkan satu set label, tombol, dan beralih ke jendela Anda.

1. Buka MyCustomEditor.cs.

2. Unity menggunakan UnityEngine.UIElements untuk kontrol UI dasar seperti label, tombol, dan toggle. Untuk bekerja dengan kontrol UI, Anda harus menambahkan deklarasi berikut jika belum hadir.

   using UnityEngine.UIElements;
   

3. Ubah teks label yang ada dari "Hello World! From C#" ke "These controls were created using C# code.".

4. Kelas EditorWindow memiliki properti yang disebut rootVisualElement. Untuk menambahkan kontrol UI ke jendela Anda, meluruskan kelas elemen dengan beberapa atribut, dan kemudian gunakan metode Add dari rootVisualElement.

   Metode CreateGUI() selesai Anda harus terlihat seperti berikut:

   public void CreateGUI()
   {
       // Each editor window contains a root VisualElement object
       VisualElement root = rootVisualElement;
   
       // VisualElements objects can contain other VisualElements following a tree hierarchy.
       Label label = new Label("These controls were created using C# code.");
       root.Add(label);
   
       Button button = new Button();
       button.name = "button3";
       button.text = "This is button3.";
       rootVisualElement.Add(button);
   
       Toggle toggle = new Toggle();
       toggle.name = "toggle3";
       toggle.label = "Number?";
       rootVisualElement.Add(toggle);
   
       // Import UXML
       var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/MyCustomEditor.uxml");
       VisualElement labelFromUXML = visualTree.Instantiate();
       root.Add(labelFromUXML);
   
       rootVisualElement.Add(m_UXMLTree.Instantiate());
   }
   

5. Pergi ke Editor dan buka jendela editor kustom Anda. Anda harus melihat tiga label, tiga tombol, dan tiga toggles di jendela Anda.

Sitemap Tentukan perilaku kontrol UI AndaDefine the behavior of your UI controls

Anda dapat mengatur handler acara untuk kontrol UI Anda sehingga ketika Anda mengklik tombol, dan pilih atau menghapus toggle, kontrol UI Anda melakukan beberapa tugas.

Kode di bawah menunjukkan contoh event handler yang melakukan berikut:

• Ketika tombol diklik, Konsol Editor menampilkan pesan.
• Ketika toggle dipilih, Konsol menunjukkan berapa kali tombol telah diklik.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class MyCustomEditor : EditorWindow
{
    [MenuItem("Window/UI Toolkit/MyCustomEditor")]
    public static void ShowExample()
    {
        MyCustomEditor wnd = GetWindow<MyCustomEditor>();
        wnd.titleContent = new GUIContent("MyCustomEditor");
    }

    [SerializeField]
    private VisualTreeAsset m_UXMLTree;

    private int m_ClickCount = 0;

    private const string m_ButtonPrefix = "button";

    public void CreateGUI()
    {
        // Each editor window contains a root VisualElement object
        VisualElement root = rootVisualElement;

        // VisualElements objects can contain other VisualElements following a tree hierarchy.
        Label label = new Label("These controls were created using C# code.");
        root.Add(label);

        Button button = new Button();
        button.name = "button3";
        button.text = "This is button3.";
        rootVisualElement.Add(button);

        Toggle toggle = new Toggle();
        toggle.name = "toggle3";
        toggle.label = "Number?";
        rootVisualElement.Add(toggle);

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/MyCustomEditor.uxml");
        VisualElement labelFromUXML = visualTree.Instantiate();
        root.Add(labelFromUXML);

        rootVisualElement.Add(m_UXMLTree.Instantiate());

        //Call the event handler
        SetupButtonHandler();
    }

    //Functions as the event handlers for your button click and number counts 
    private void SetupButtonHandler()
    {
        var buttons = rootVisualElement.Query<Button>();
        buttons.ForEach(RegisterHandler);
    }

    private void RegisterHandler(Button button)
    {
        button.RegisterCallback<ClickEvent>(PrintClickMessage);
    }

    private void PrintClickMessage(ClickEvent evt)
    {
        ++m_ClickCount;

        //Because of the names we gave the buttons and toggles, we can use the
        //button name to find the toggle name.
        Button button = evt.currentTarget as Button;
        string buttonNumber = button.name.Substring(m_ButtonPrefix.Length);
        string toggleName = "toggle" + buttonNumber;
        Toggle toggle = rootVisualElement.Q<Toggle>(toggleName);

        Debug.Log("Button was clicked!" +
            (toggle.value ? " Count: " + m_ClickCount : ""));
    }
}

---

Sumber daya tambahan

• Buat jendela editor kustom

• UI Toolkit alur kerja sederhana ditambahkan dalam Unity Panties20212