Metin2 UI Geliştirme Rehberi: Yeni Nesil Arayüz ve Pencere Tasarımı

Metin2 pvp server projelerinde oyuncuların ilk dikkat ettiği unsurların başında, oyunun görsel kalitesini belirleyen arayüz (UI) tasarımı gelir. Oyunun 2000'li yıllardan kalan eski ve klasik arayüz şablonlarını modernize etmek, yeni butonlar eklemek veya envanter pencerelerini genişletmek UI geliştiricilerinin temel görevidir. Metin2'de arayüz geliştirmek, hem grafik tasarım (görsel varlık üretimi) hem de kodlama (Python scriptleri) süreçlerinin bir arada yürütülmesini gerektirir. Bu rehberde, oyunda sıfırdan bir pencerenin nasıl tasarlanıp kodlanacağını ele alıyoruz.

Görsel Altyapının Hazırlanması: TGA ve SUB Dosyaları

Arayüze eklenecek yeni bir buton, arka plan veya çerçeve görseli doğrudan kodlarla çizilemez. Öncelikle grafik tasarım programları (Photoshop, GIMP vb.) kullanılarak bir tasarım yapılması gerekir:

TGA Formatı: Metin2 grafik motoru, şeffaflık (alpha channel) desteği sunduğu için arayüz görsellerinde çoğunlukla 32-bit .tga formatını kullanır. Tasarladığınız arayüz görsellerini istemcinin ymir work/ui dizini altına uygun klasörlere kaydetmeniz gerekir.

SUB Dosyaları: Eğer büyük bir resim dosyasının içinden sadece belirli bir butonu veya ikonu kırparak kodlara tanıtmak istiyorsanız .sub uzantılı yönlendirme dosyalarını kullanırsınız. Bu dosyalar, ana TGA dosyasının içerisindeki piksellerin koordinatlarını (X ve Y düzlemleri) belirterek motorun ilgili görseli doğru kesmesini sağlar.

Arayüzün Kodlanması: UI Script Sözlük Yapısı

Görseller hazırlandıktan sonra, bu butonların ekranın neresinde duracağı ve pencerenin boyutlarının ne olacağı uiscript.epk içerisindeki Python dosyalarında tanımlanır.

Sözlük (Dictionary) Mimarisi: Bir UI script dosyası (Örn: efekt_paneli.py), tamamen hiyerarşik bir ağaç yapısındadır. En dışta bir ana pencere (Board) tanımlanır. Bu ana pencerenin içerisine sırasıyla çocuk elementler (Children) olarak metinler (TextLine), butonlar (Button), resimler (ExpandedImageBox) veya yazı giriş alanları (EditLine) eklenir.

Koordinatlama Sistemi: Her elementin pencere içindeki konumu x ve y değerleriyle piksel bazlı belirlenir. Tasarımın farklı ekran çözünürlüklerinde (Örn: Hem 1024x768 hem de 1920x1080 çözünürlükte) kaymaması için hizalama (horizontal_align ve vertical_align) komutları "center", "left" veya "right" olarak doğru kurgulanmalıdır.

Arayüz İşlevlerinin Python'a Bağlanması

Tasarımı yapılan boş pencerenin oyunda açılabilmesi ve butonlara tıklandığında işlem yapabilmesi için root.epk içerisindeki kontrol sınıflarıyla (ui.py ve sistemin kendi scripti) ilişkilendirilmesi gerekir.

Geliştirici, hazırladığı UI script dosyasını Python kodları içerisinden ui.ScriptWindow() fonksiyonunu kullanarak hafızaya yükler. Ardından penceredeki buton nesnesini GetChild komutuyla koda çağırır ve SetEvent fonksiyonu yardımıyla butona bir işlev atar (Örneğin: Butona tıklandığında sunucuya paket gönderme veya pencereyi kapatma). Bu aşamada yapılan en ufak bir isimlendirme veya hiyerarşi hatası, istemcinin syserr kaydına düşerek arayüzün tamamen kilitlenmesine neden olur.