Unity UI Toolkit vs uGUI: Hangisini seçmeli?

Giriş: Unity Arayüz Geliştirmede Yeni Bir Dönem

Unity oyun motoru, kullanıcı arayüzü (UI) geliştirme konusunda uzun süredir uGUI (Unity UI) sistemini kullanmaktaydı. Ancak son yıllarda, özellikle Unity Editor’ın kendi arayüzünü oluşturmak için geliştirilen ve daha sonra genel kullanıma sunulan yeni bir sistem olan Unity UI Toolkit, geliştiricilerin dikkatini çekmeye başladı. Peki, hangi sistemi ne zaman kullanmalıyız? Bu makale, her iki UI sisteminin temellerini, güçlü ve zayıf yönlerini karşılaştırarak projeniz için en doğru kararı vermenize yardımcı olacaktır.

uGUI: Geleneksel ve Yaygın Çözüm

uGUI, Unity’nin 4.6 sürümüyle tanıtılan ve yıllardır oyun içi arayüzler için standart haline gelmiş bir sistemdir. Temel olarak bir `Canvas`, `RectTransform`, `EventSystem` ve çeşitli UI bileşenlerinden (Button, Text, Image vb.) oluşur. Görsel tabanlı bir yaklaşımla, sahne üzerinde doğrudan sürükle-bırak yöntemiyle arayüzler oluşturmanıza olanak tanır.

uGUI’nin Temel Özellikleri:

• Görsel Tasarım: Unity Editor içinde WYSIWYG (Ne Görüyorsan Onu Alırsın) prensibiyle çalışır.
• Kolay Kullanım: Yeni başlayanlar için hızlı bir öğrenme eğrisine sahiptir.
• Bileşen Tabanlı: Her UI öğesi bir `GameObject` ve üzerindeki `RectTransform` bileşeni ile yönetilir.
• Etkinlik Sistemi: `EventSystem` sayesinde tıklama, sürükleme gibi kullanıcı etkileşimlerini kolayca yönetir.
• TextMeshPro Entegrasyonu: Yüksek kaliteli metin renderlama için TextMeshPro ile sorunsuz çalışır.

// uGUI'de bir butonun tıklama olayına abone olma
using UnityEngine;
using UnityEngine.UI;

public class MyUGUIButton : MonoBehaviour
{
    public Button myButton;

    void Start()
    {
        if (myButton != null)
        {
            myButton.onClick.AddListener(OnButtonClick);
        }
    }

    void OnButtonClick()
    {
        Debug.Log("uGUI Butona Tıklandı!");
    }
}

Unity UI Toolkit: Modern ve Performans Odaklı Yaklaşım

Unity UI Toolkit, başlangıçta Unity Editor’ın kendi arayüzünü oluşturmak için geliştirilmiş, web teknolojilerinden (HTML, CSS gibi) ilham alan modern bir UI sistemidir. UXML (Unity XML) ile arayüz yapısı tanımlanır, USS (Unity Style Sheets) ile stil verilir ve C# ile etkileşim ve mantık sağlanır. Deklaratif bir yaklaşıma sahiptir ve genellikle daha performanslıdır.

Unity UI Toolkit’in Temel Özellikleri:

• Deklaratif Tasarım: Arayüz yapısı UXML dosyalarıyla, stil USS dosyalarıyla ayrılır.
• Performans: Özellikle karmaşık arayüzler ve büyük veri setleri için uGUI’ye göre daha iyi performans sunar. Retained mode rendering kullanır.
• Esneklik: CSS benzeri stil sistemi sayesinde çok esnek tasarım seçenekleri sunar.
• UI Builder: Görsel olarak UXML dosyalarını düzenlemek ve USS stillerini uygulamak için özel bir editör aracı.
• Veri Bağlama: Daha güçlü ve esnek veri bağlama mekanizmalarına sahiptir.

// Unity UI Toolkit'te basit bir UXML ve USS örneği
// MyUI.uxml
<UXML xmlns:ui="UnityEngine.UIElements">
    <ui:Button name="my-button" text="UI Toolkit Buton" />
</UXML>

// MyUI.uss
.my-button {
    background-color: #3f51b5;
    color: white;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
}

// C# Kodu
using UnityEngine;
using UnityEngine.UIElements;

public class MyUIToolkitButton : MonoBehaviour
{
    public UIDocument uiDocument;

    void OnEnable()
    {
        if (uiDocument != null && uiDocument.rootVisualElement != null)
        {
            var root = uiDocument.rootVisualElement;
            var button = root.Q("my-button");
            button?.RegisterCallback(evt => Debug.Log("UI Toolkit Butona Tıklandı!"));
        }
    }
}

uGUI ve Unity UI Toolkit Karşılaştırması

1. Geliştirme Yaklaşımı

• uGUI: Imperative (Emredici) ve görsel tabanlıdır. Her şeyi C# kodu veya Editor üzerinden doğrudan manipüle edersiniz.
• Unity UI Toolkit: Deklaratif (Bildirimsel) ve veri odaklıdır. Arayüzünüzün nasıl görünmesi gerektiğini tanımlarsınız, sistem gerisini halleder. Bu, özellikle karmaşık arayüzlerde kodu daha okunaklı ve yönetilebilir hale getirir.

2. Performans

• uGUI: `Canvas` yapısı ve batching mekanizması sayesinde çoğu basit oyun arayüzü için yeterlidir. Ancak çok sayıda dinamik öğe veya sık güncellenen arayüzler (örn: envanter sistemleri) performans sorunlarına yol açabilir (`Canvas Rebuild`).
• Unity UI Toolkit: Retained mode rendering mimarisi sayesinde genellikle daha performanslıdır. Yalnızca değişen öğeleri yeniden çizer ve karmaşık hiyerarşilerde daha az CPU/GPU yükü oluşturur. Büyük ölçekli ve veri yoğun arayüzler için idealdir.

3. Esneklik ve Genişletilebilirlik

• uGUI: Standart bileşenler yeterli olmadığında özel bileşenler yazmak mümkündür, ancak stil ve layout konusunda `RectTransform`’un kısıtlamaları vardır.
• Unity UI Toolkit: USS (CSS benzeri) sayesinde stil ve layout üzerinde çok daha fazla kontrol sağlar. Kendi `VisualElement`’larınızı oluşturmak ve bunları UXML ile kullanmak oldukça kolaydır.

4. Tasarım Araçları

• uGUI: Unity Editor’ın sahne görünümünde doğrudan manipülasyon ve `Inspector` penceresi aracılığıyla ayarlar.
• Unity UI Toolkit: UI Builder adlı özel bir pencere sunar. Bu araç, UXML ve USS dosyalarını görsel olarak düzenlemenize, stilleri denemenize ve arayüz hiyerarşisini oluşturmanıza olanak tanır.

5. Veri Bağlama

• uGUI: Genellikle C# kodunda manuel olarak veya basit `INotifyPropertyChanged` benzeri yapılarla veri bağlanır.
• Unity UI Toolkit: Daha gelişmiş bir veri bağlama sistemi sunar. `INotifyValueChanged` ve `Binding` API’leri sayesinde UI elemanlarını doğrudan veri kaynaklarına bağlamak daha kolay ve performanslıdır.

Pratik İpuçları: Hangisini Ne Zaman Kullanmalı?

İpucu 1: Projenizin İhtiyaçlarını Belirleyin

Doğru UI sistemini seçmek, projenizin türüne ve hedeflerine bağlıdır:

• Hızlı Prototipleme ve Basit Oyun İçi UI: Eğer hızlıca bir menü, sağlık barı veya basit envanter sistemi oluşturmanız gerekiyorsa ve performans kritik bir sorun değilse, uGUI genellikle daha hızlı bir başlangıç sağlar. Özellikle Unity’ye yeni başlayanlar için öğrenme eğrisi daha düşüktür.
• Karmaşık Menüler, Editör Araçları ve Veri Yoğun Uygulamalar: Eğer oyununuzda detaylı envanterler, yetenek ağaçları, karmaşık ayar menüleri veya Unity Editor içinde kullanacağınız özel araçlar geliştiriyorsanız, Unity UI Toolkit‘in sunduğu performans, esneklik ve düzenli yapı avantajlarından yararlanmalısınız. Web geliştirme tecrübesi olanlar için UI Toolkit daha tanıdık gelecektir.

İpucu 2: Mevcut Projelerde Hibrit Yaklaşım

Eski bir projeniz varsa ve tamamen Unity UI Toolkit‘e geçmek istemiyorsanız, her iki sistemi birlikte kullanabilirsiniz. Örneğin, mevcut oyun içi arayüzlerinizi uGUI ile bırakıp, yeni eklenecek karmaşık editör araçlarını veya ana menüleri UI Toolkit ile geliştirebilirsiniz. `IMGUIContainer` gibi araçlar, uGUI içeriğini bir `VisualElement` içine gömmenize olanak tanır, ancak bu her zaman en iyi performans çözümü olmayabilir.

İpucu 3: Performans Optimizasyonu İçin İpuçları

• uGUI İçin: `Canvas` sayısını minimumda tutun, `Graphic Raycaster`’ları sadece gerektiği yerlerde kullanın, layout gruplarını (örn: `HorizontalLayoutGroup`) dikkatli kullanın ve `Canvas Rebuild`’leri azaltmak için sık güncellenen elemanları ayrı `Canvas`’lara yerleştirmeyi düşünün. Obje havuzlama (`Object Pooling`) tekniğini dinamik UI elemanları için kullanın.
• Unity UI Toolkit İçin: Çok fazla iç içe `VisualElement` kullanmaktan kaçının, USS seçicilerini karmaşık hale getirmeyin ve gereksiz yere sık sık stil değişiklikleri yapmayın. `VisualElement`’ları gerektiğinde `display: none` ile gizlemek, tamamen yok etmekten daha performanslı olabilir.

Yaygın Hatalar ve Çözümleri

uGUI’de Yaygın Hatalar:

• Aşırı `Canvas` Kullanımı: Her küçük UI parçası için ayrı `Canvas` oluşturmak, draw call’ları ve performansı olumsuz etkiler. Çözüm: Mümkün olduğunca tek bir `Canvas` içinde hiyerarşiyi düzenleyin veya sadece gerçekten gerekli olduğunda ayrı `Canvas`’lar kullanın (örn: sabit HUD ve dinamik pop-up’lar için).
• `Layout Group`’ların Yanlış Kullanımı: `Layout Group`’lar (örn: `VerticalLayoutGroup`) her frame’de yeniden hesaplama yapabilir, bu da performansı düşürür. Çözüm: Dinamik olarak değişmeyen layout’lar için `Layout Group` yerine `RectTransform`’ları manuel olarak ayarlayın veya `Layout Group`’ların `SetLayoutDirty()` çağrılarını optimize edin.

Unity UI Toolkit’te Yaygın Hatalar:

• Karmaşık USS Seçicileri: Tıpkı web CSS’inde olduğu gibi, çok genel veya çok iç içe seçiciler performans sorunlarına yol açabilir. Çözüm: Daha spesifik sınıf adları ve ID’ler kullanın.
• Gereksiz `VisualElement` Hiyerarşileri: Her şeyi bir `VisualElement` içine sarmak, arayüz ağacını gereksiz yere büyütür. Çözüm: Mümkün olduğunca düz bir hiyerarşi oluşturun ve yalnızca gerekli olan yerlerde kapsayıcı `VisualElement`’lar kullanın.

Sonuç

Hem uGUI hem de Unity UI Toolkit, Unity’de arayüz geliştirmek için güçlü araçlardır. uGUI, basit ve hızlı prototipleme için hala harika bir seçimken, Unity UI Toolkit modern web teknolojilerine aşina olanlar için daha performanslı, esnek ve ölçeklenebilir bir çözüm sunar. Özellikle Unity Editor araçları veya karmaşık, veri yoğun oyun arayüzleri geliştiriyorsanız, UI Toolkit’i öğrenmek ve kullanmak gelecekte size büyük avantajlar sağlayacaktır. Projenizin gereksinimlerini dikkatlice değerlendirerek ve her iki sistemin güçlü yönlerini göz önünde bulundurarak en iyi kararı verebilirsiniz.