- Katılım
- 12 May 2026
- Mesajlar
- 87
- Tepkime puanı
- 130
KNIGHT ONLINE UI EDITOR (UIE) KULLANIM KILAVUZU
Versiyon: v2.3.26.400 | Kirasoftware (2016-2026)BÖLÜM 1: GİRİŞ
Knight Online UI Editor (UIE), Knight Online oyunu için UI (Kullanıcı Arayüzü) dosyalarını oluşturmak, düzenlemek ve yönetmek için tasarlanmış profesyonel bir grafik editörüdür. Bu araç, oyun geliştiricileri ve mod yapımcıları için essential bir kaynaktır.
UIE, Knight Online'ın özel UIF formatını kullanarak UI elemanlarını kaydeder. Bu format, oyunun runtime'da kullandığı özel bir yapıya sahiptir ve doğrudan düzenlenebilir.
Bu Kılavuz Hakkında
Bu dokümantasyon, UIE'nin tüm özelliklerini kapsamlı bir şekilde açıklamaktadır. Bölümler, yeni başlayanlar için temel bilgilerden başlayarak ileri düzey tekniklere kadar ilerlemektedir.
Kılavuz, aşağıdaki konuları içermektedir:
- UIE'nin temel özellikleri ve kullanım alanları
- Sistem gereksinimleri ve kurulum
- Arayüz tanıtımı ve navigasyon
- UI bileşenlerinin oluşturulması ve düzenlenmesi
- Animasyon sistemi
- Texture yönetimi
- İleri düzey teknikler ve ipuçları
Her bölüm, pratik örnekler ve adım adım talimatlar içermektedir.
BÖLÜM 2: UIE NEDİR?
UIE (UI Editor), Knight Online için UI tasarımı yapmanıza olanak tanıyan bir Windows masaüstü uygulamasıdır. MFC (Microsoft Foundation Classes) kullanılarak geliştirilmiştir ve Direct3D teknolojisini kullanmaktadır.
Temel Özellikler
UIE, aşağıdaki temel özellikleri sunar:
- Çoklu UI Bileşen Desteği: Button, Image, String, Static, Edit, Progress, TrackBar, ScrollBar, Area, List, Tree, Flash ve daha fazlası
- Görsel Düzenleme: Sürükle-bırak ile UI elemanlarını konumlandırma
- Hiyerarşi Görünümü: Tüm UI elemanlarının ağaç yapısında görüntülenmesi
- Özellik Paneli: Seçili elemanların tüm özelliklerini düzenleme
- Texture Yönetimi: DX Texture formatında görselleri düzenleme
- Animasyon Sistemi: UI elemanları için animasyon oluşturma
- Toplu İşlemler: Birden fazla dosya üzerinde toplu değişiklik yapma
UIE, .UIF uzantılı dosyalar kullanır. Bu dosyalar XML benzeri bir yapıda saklanır ve aşağıdaki bilgileri içerir:
- UI elemanlarının pozisyonları ve boyutları
- Texture referansları ve UV koordinatları
- Font bilgileri ve metin içerikleri
- Olay işleyicileri (event handlers)
- Animasyon verileri
- Stil ve görünüm ayarları
UIE, aşağıdaki senaryolarda kullanılır:
- Yeni UI elemanları tasarlama
- Mevcut UI'leri modifiye etme
- Oyun arayüzünü özelleştirme
- Animasyonlu UI efektleri oluşturma
- Texture atlas'larını düzenleme
- UI dosyalarını analiz etme ve debug etme
Kurulum Adımları
UIE'yi kurmak için aşağıdaki adımları izleyin:
1. Adım: UIE kurulum dosyasını indirin
2. Adım: Kurulum dosyasını çalıştırın
3. Adım: Kurulum sihirbazını takip edin
4. Adım: Kurulum konumunu seçin (varsayılan: C:\Program Files\Kirasoftware\UIE)
5. Adım: "Kur" butonuna tıklayın
6. Adım: Kurulum tamamlandıktan sonra UIE'yi başlatın
İlk Yapılandırma
UIE'yi ilk kez çalıştırdığınızda, aşağıdaki ayarları yapmanız gerekir:
- Base Path (Temel Yol): Knight Online veri dosyalarının bulunduğu klasörü seçin
- Tema Ayarları: Arayüz rengi ve görünüm tercihlerinizi belirleyin
- Kısayol Tuşları: İsterseniz kısayol tuşlarını özelleştirin
Base Path, UIE'nin texture dosyalarını ve diğer kaynakları bulmak için kullandığı temel klasördür. Bu ayarı değiştirmek için:
- Üst menüden Tools > Options seçin
- Base Path alanına klasör yolunu girin
- veya Browse butonuna tıklayarak klasörü seçin
- OK butonuna tıklayarak kaydedin
Kurulum sırasında sorun yaşarsanız:
- DLL Hataları: Visual C++ Redistributable paketini yeniden kurun
- DirectX Hataları: DirectX End-User Runtime'ı güncelleyin
- Çalışma izinleri: UIE'yi yönetici olarak çalıştırmayı deneyin
- Uyumluluk: Windows uyumluluk modunu ayarlayın
UIE arayüzü, verimli çalışma için optimize edilmiş bir tasarıma sahiptir. Ana pencere üç ana bölümden oluşur.
Pencere Düzeni
UIE penceresi aşağıdaki bölümlerden oluşur:
- Menu Bar (Üst Menü): Dosya, Düzenle, Görünüm, Ekle, Araçlar ve Yardım menüleri
- Toolbar (Araç Çubuğu): Sık kullanılan komutların hızlı erişim ikonları
- Hierarchy View (Hiyerarşi Görünümü): Sol panel - UI elemanlarının ağaç yapısı
- Canvas (Tuval): Orta panel - UI'nin görsel düzenleme alanı
- Property View (Özellik Paneli): Sağ panel - Seçili elemanın özellikleri
- Status Bar (Durum Çubuğu): Alt kısım - Anlık bilgiler
Hiyerarşi görünümü, tüm UI elemanlarını ağaç yapısında gösterir. Bu panel şunları sağlar:
- UI elemanlarının hiyerarşik ilişkilerini görüntüleme
- Elemanları sürükleyerek yeniden düzenleme
- Elemanları seçme ve vurgulama
- Context menü ile hızlı işlemlere erişim
Panel, her UI elemanının solunda bir ikon gösterir. İkon rengi, elemanın türüne göre değişir.
Canvas (Orta Panel)
Canvas, UI'nin görsel olarak düzenlendiği ana çalışma alanıdır. İki modda çalışır:
- Preview Mode (Önizleme Modu): UI'yi son haliyle görüntüler
- Edit Mode (Düzenleme Modu): UI elemanlarını seçme, taşıma ve boyutlandırma
Edit modunda, seçili elemanların etrafında manipülasyon tutamaçları görünür.
Özellik Paneli (Sağ Panel)
Özellik paneli, seçili UI elemanının tüm özelliklerini düzenlemenize olanak tanır. Panel şu özellik gruplarını içerir:
- Base Properties (Temel Özellikler): ID, pozisyon, boyut
- Appearance (Görünüm): Renk, stil, görünürlük
- Behavior (Davranış): Olaylar, animasyonlar
- Type-Specific (Türe Özgü): Eleman türüne göre değişen özellikler
UIF (UI File), Knight Online'ın kullandığı özel UI dosya formatıdır. Bu format, binary ve text tabanlı veri yapılarını birleştirir.
Dosya Yapısı
UIF dosyaları aşağıdaki ana bölümlerden oluşur:
- Header (Başlık): Dosya formatı ve versiyon bilgisi
- UI Tree (UI Ağacı): Tüm UI elemanlarının hiyerarşik yapısı
- Properties (Özellikler): Her elemanın özellikleri
- Resources (Kaynaklar): Texture ve font referansları
UIF dosyalarını kaydetmek için:
- Ctrl+S: Aktif dosyayı kaydet
- Ctrl+Shift+S: Farklı kaydet
- File > Save As: Yeni isimle kaydet
Dosya yüklemek için:
- Ctrl+O: Dosya açma dialogu
- Drag & Drop: Dosyayı pencereye sürükle-bırak
UI elemanlarını dışa aktarmak için:
- Hiyerarşi görünümünde elemanı seçin
- File > Export seçin
- Çıktı formatını ve konumunu belirleyin
Harici UI dosyalarını içe aktarmak için:
- Hedef elemanı seçin (veya yeni ekleme için boş alan)
- File > Import seçin
- İçe aktarılacak dosyayı seçin
Batch olarak texture yollarını değiştirmek için:
- Tools > Batch Tool > Change Image Path seçin
- Değiştirilecek dosyaları seçin
- Eski ve yeni yolları girin
UIE, çeşitli UI bileşenlerini destekler. Her bileşen farklı amaçlar için tasarlanmıştır.
Temel Bileşenler
1. Image (Görsel)
Texture görüntülemek için kullanılır. Özellikleri:
- Texture dosyası referansı
- UV koordinatları (texture içindeki bölge)
- Pozisyon ve boyut
Tıklanabilir butonlar oluşturur. Durumları:
- Normal: Varsayılan görünüm
- Down: Basılı durumda
- On: Fare üzerindeyken
- Disable: Pasif durumda
Metin görüntülemek için kullanılır. Özellikleri:
- Font ailesi ve boyutu
- Renk (RGBA)
- Hizalama (sol, orta, sağ)
- Metin içeriği
Arka plan görseli ve metin birleşimi. Özellikleri:
- Background image
- Üzerinde metin
- Otomatik boyutlandırma
Kullanıcı girişi için metin kutusu. Özellikleri:
- Input/Ouput modları
- Karakter limiti
- Password mode
- Multi-line desteği
İlerleme çubuğu gösterimi. Özellikleri:
- Background texture
- Foreground (dolgu) texture
- Yatay/Dikey yön
Değer seçimi için. Özellikleri:
- Background texture
- Thumb (kaydırıcı) texture
- Min/Max değerleri
- Yatay/Dikey yön
İçerik kaydırma için. Özellikleri:
- Up/Left butonu
- Down/Right butonu
- Track bar
- Otomatik visible/pos ayarı
Tıklanabilir boş alan. Özellikleri:
- Sadece region tanımı
- Görsel içermez
- Olay işleme için kullanılır
Listedeki string öğeleri. Özellikleri:
- String listesi
- Otomatik scroll
- Seçim yönetimi
Hiyerarşik liste yapısı. Özellikleri:
- Tree item desteği
- Collapse/Expand
- Seviye yönetimi
Adobe Flash içeriği için. Özellikleri:
- SWF dosya referansı
- Playback kontrolü
- Parametre geçirme
BÖLÜM 8: YENİ UI OLUŞTURMA
UI Ekleme Temelleri
Yeni UI elemanı eklemek için şu adımları izleyin:
- Eklemek istediğiniz eleman türünü seçin (Insert menüsü veya toolbar)
- Canvas üzerinde konumlandırın
- Özellikler panelinde ayarları yapın
Yeni bir buton oluşturmak için:
- Insert > Button seçin
- Texture seçin (4 durum için)
- Her durum için UV koordinatlarını ayarlayın
- Region'ı düzenleyin
1. Insert > Button seçin
2. Texture dosyasını seçin
3. "Normal" durumu için bölge seçin
4. "Down" durumu için bölge seçin
5. "On" durumu için bölge seçin
6. "Disable" durumu için bölge seçin
7. Buton pozisyonunu ayarlayın
8. Gerekirse click area tanımlayın
String Oluşturma
Yeni bir metin elemanı oluşturmak için:
- Insert > String seçin
- Font seçin (font dialogundan)
- Renk seçin
- Metin içeriğini girin
- Region'ı ayarlayın
Yeni bir görsel elemanı oluşturmak için:
- Insert > Image seçin
- Texture dosyasını seçin
- Texture üzerinde bölge seçin (UV koordinatları)
- Görsel pozisyonunu ayarlayın
Yeni bir ilerleme çubuğu oluşturmak için:
- Insert > Progress seçin
- Background texture seçin
- Foreground texture seçin
- Yönü belirleyin (yatay/dikey)
Yeni bir kaydırma çubuğu oluşturmak için:
- Insert > ScrollBar seçin
- Up/Left butonu için texture seçin
- Down/Right butonu için texture seçin
- Track bar için texture seçin
- Yönü belirleyin
Birden fazla elemanı gruplamak için:
- Gruplanacak elemanları seçin (Ctrl+tıklama ile)
- Edit > Make Group seçin
- Grup otomatik oluşturulur
Seçme İşlemleri
UI elemanlarını seçmek için:
- Tek seçim: Eleman üzerine tıklayın
- Çoklu seçim: Ctrl tuşunu basılı tutarak tıklayın
- Alan seçimi: Canvas üzerinde sürükleme yapın
Elemanları taşımak için:
- Sürükle-bırak: Mouse ile sürükleyin
- Ok tuşları: Piksel piksel hareket
- Kısayol tuşları: Shift+Ok tuşları ile 10 piksel hareket
Precision hareket için kısayol tuşları:
- Ctrl+X: X ekseninde +1 piksel
- Ctrl+Y: Y ekseninde +1 piksel
- Ctrl+Shift+X: X ekseninde -1 piksel
- Ctrl+Shift+Y: Y ekseninde -1 piksel
Elemanları boyutlandırmak için:
- Köşe tutamaçları: Eşit ölçekleme
- Kenar tutamaçları: Tek yönde boyutlandırma
- Özellik paneli: Kesin değer girişi
Precision boyutlandırma için:
- Ctrl+W: Genişlik +1 piksel
- Ctrl+H: Yükseklik +1 piksel
- Ctrl+Shift+W: Genişlik -1 piksel
- Ctrl+Shift+H: Yükseklik -1 piksel
Elemanları kopyalamak için:
- Ctrl+C: Seçili elemanları kopyala
- Ctrl+V: Yapıştır (orijinal konumdan +10,+10 offset)
- Ctrl+D: Doğrudan çoğalt
Elemanları silmek için:
- Delete tuşu: Seçili elemanları sil
- Edit > Delete: Aynı işlev
Elemanların görünüm sırasını değiştirmek için:
- Edit > Move to Lowest: En alta taşı
- Edit > Move to Lower: Bir seviye aşağı
- Edit > Move to Upper: Bir seviye yukarı
- Edit > Move to Highest: En üste taşı
Elemanları parent yapmak için:
- Child olacak elemanları seçin
- Parent olacak elemanı son seçimde seçili tutun
- Edit > Parent seçin
Elemanları parent'tan çıkarmak için:
- Seçili elemanları seçin
- Edit > Unparent seçin
Değişiklikleri geri almak için:
- Ctrl+Z: Geri al
- Ctrl+Y: Yinele (Redo)
UIE, UI elemanları için temel animasyon desteği sunar.
Animasyon Dialogu
Animasyon oluşturmak için:
- Tools > Animate seçin
- Animasyon dialog penceresi açılır
- Frame sayısını belirleyin
- Animasyonu önizleyin
Desteklenen animasyon türleri:
- Position: X,Y koordinat değişimi
- Scale: Boyut değişimi
- Rotation: Döndürme (varsa)
- Alpha: Şeffaflık değişimi
- Color: Renk geçişleri
Animasyonda anahtar kareler oluşturmak için:
- Animasyon dialogunda frame seçin
- Özellikler panelinde değerleri ayarlayın
- Keyframe otomatik oluşturulur
Animasyonu oynatmak için:
- Play: Animasyonu başlat
- Stop: Animasyonu durdur
- Loop: Döngü modunu aç/kapa
- Speed: Oynatma hızını ayarla
Animasyon geçişlerini yumuşatmak için easing fonksiyonları kullanılır:
- Linear: Sabit hız
- Ease-In: Yavaş başlangıç
- Ease-Out: Yavaş bitiş
- Ease-In-Out: Yavaş başlangıç ve bitiş
Texture yönetimi, UIE'nin en önemli özelliklerinden biridir. Texture dosyaları, UI elemanlarının görsel görünümünü belirler.
Texture Dialogu
Texture dialogu, görselleri seçmek ve UV koordinatlarını ayarlamak için kullanılır. Dialog üç modda çalışır:
- Select Mode: UV bölgesi seçme
- Zoom Mode: Yakınlaştırma/uzaklaştırma
- Hand Mode: Pan (kaydırma)
UV koordinatları, texture üzerindeki bölgeyi belirler. Değerler 0.0 ile 1.0 arasındadır:
- U (Yatay): Soldan sağa 0.0 - 1.0
- V (Dikey): Yukarıdan aşağıya 0.0 - 1.0
UV koordinatlarını ayarlamak için:
- Texture dialogunu açın
- Select modunda sürükleyerek bölge seçin
- Köşe tutamaçları ile hassas ayar yapın
- Auto-select butonları ile otomatik seçim yapın
Texture dialogunda iki auto-select butonu bulunur:
- Auto-Select H (Yatay): Texture'ı yatay olarak eşit bölgelere ayırır
- Auto-Select V (Dikey): Texture'ı dikey olarak eşit bölgelere ayırır
Texture dialogunda image type dropdown menüsü bulunur. Bu menü, farklı UI durumları için bölgeleri seçmenize olanak tanır:
- Button: Normal, Down, On, Disable
- Progress: Back, Fore
- TrackBar: Back, Thumb
Mevcut bir texture'ı değiştirmek için:
- Elemanı seçin
- Özellikler panelinde texture yolunu değiştirin
- veya Edit > Replace Texture kullanın
Birden fazla dosyada texture yolunu değiştirmek için:
- Tools > Batch Tool > Change Image Path seçin
- Değiştirilecek UIF dosyalarını seçin
- Eski dosya yolunu ve yeni dosya yolunu girin
- İşlemi onaylayın
Kullanılmayan texture dosyalarını tespit etmek için:
- Tools > Batch Tool > Gather Image File Names seçin
- UIF dosyalarını seçin
- Karşılaştırma klasörünü seçin
- Kullanılmayan dosyalar listelenir
Ekleme Kısayolları
| Menü | İşlev |
|---|---|
| Insert > Image | Yeni görsel ekle |
| Insert > String | Yeni metin ekle |
| Insert > Button | Yeni buton ekle |
| Insert > Static | Yeni statik eleman ekle |
| Insert > Edit | Yeni düzenleme kutusu ekle |
| Insert > Progress | Yeni ilerleme çubuğu ekle |
| Insert > TrackBar | Yeni kaydırma çubuğu ekle |
| Insert > ScrollBar | Yeni scrollbar ekle |
| Insert > Area | Yeni alan ekle |
| Insert > List | Yeni liste ekle |
| Insert > Group | Yeni grup ekle |
| Insert > Tree | Yeni ağaç ekle |
| Insert > Tree Item | Yeni ağaç öğesi ekle |
| Insert > Flash | Yeni Flash elemanı ekle |
BÖLÜM 13: İPUÇLARI VE TEKNİKLER
Verimlilik İpuçları
UIE'yi daha verimli kullanmak için aşağıdaki ipuçlarını uygulayın:
- Base Path'i doğru ayarlayın: Texture dosyalarının bulunduğu klasörü Base Path olarak belirleyin
- Sık kaydedin: Düzenleme sırasında düzenli olarak Ctrl+S ile kaydedin
- Hiyerarşiyi kullanın: Sol paneldeki ağaç yapısını aktif kullanın
- Kısayolları öğrenin: Klavye kısayolları iş akışınızı hızlandırır
- Grid'i açın: Hassas hizalama için grid görünümünü kullanın
Texture atlas, birden fazla görseli tek bir dosyada birleştirme tekniğidir. Avantajları:
- Daha az dosya sayısı
- Daha hızlı yükleme
- Daha az bellek kullanımı
- Tutarlı görünüm
Atlas oluştururken dikkat edilecekler:
- Her görsel için yeterli boşluk bırakın
- 2'nin kuvveti boyutlar kullanın (256, 512, 1024)
- Alpha kanalını kontrol edin
- UV koordinatlarını hassas ayarlayın
Büyük UI dosyalarında performansı artırmak için:
- Gereksiz elemanları silin: Kullanılmayan UI elemanlarını temizleyin
- Texture boyutlarını optimize edin: Büyük texture'ları küçültün
- Z-order'ı düzenleyin: Edit > Z-Order ile katman sırasını düzeltin
- Batch analiz kullanın: Tools > Analyze UIF ile dosyaları inceleyin
Toplu işlemler, birden fazla dosya üzerinde aynı anda değişiklik yapmanıza olanak tanır:
- Change Image Path: Texture dosya yollarını toplu değiştirme
- Change Font: Font ailesini toplu değiştirme
- Gather Image Names: Kullanılan texture dosyalarını listeleme
- Analyze UIF: UIF dosyalarını analiz etme ve raporlama
Genel Sorular
Spoyler: UIE hangi işletim sistemlerinde çalışır?
Teknik Sorular
Spoyler: Texture boyutu sınırı var mı?
Spoyler: Alpha kanalı nasıl kullanılır?
Spoyler: Animasyon dosyaları nereye kaydedilir?
Sorun Giderme
Spoyler: Dosya açılırken hata alıyorum
İletişim ve Destek
UIE ile ilgili sorularınız ve geri bildirimleriniz için:
Yenilik güncellemeleri gelecektir. Tüm güncellemeler sürekli olarak ücretsiz olacaktır.
Ziyaretçiler için gizlenmiş link,görmek için
Giriş yap veya üye ol.
Pass : KiraSoftWare2026