NUI (HTML/CSS/JS) ile Özel FiveM UI Nasıl Oluşturulur

FiveM'de NUI nedir?

NUI, New User Interface anlamına gelir ve FiveM'in oyun istemcisi içinde HTML tabanlı arayüzleri işlemek için kullandığı sistemdir. Arka planda NUI, Chromium Embedded Framework tarafından desteklenir; bu da zengin, etkileşimli kullanıcı arayüzleri oluşturmak için standart HTML, CSS ve JavaScript kullanabileceğiniz anlamına gelir. Bu durum, modern web teknolojilerinin tüm gücünden yararlanırken oyuna yerel hissettiren özel telefon ekranları, envanter sistemleri, HUD'lar ve yönetici panelleri oluşturmak için muazzam olanaklar sunar.

İlk NUI Kurulumunuz

Bir NUI arayüzü oluşturmak için üç şeye ihtiyacınız vardır: şu şekilde tanımlanmış bir HTML dosyası: ui_page şunun içindeki fxmanifest.lua, HTML/CSS/JS dosyalarının kendileri ve oyun ile arayüz arasında iletişim kurmak için Lua kodu. Manifest dosyanız şunları içermelidir ui_page 'html/index.html' ve web asset'lerinizi şurada listeleyin: files yönergesi. HTML sayfası varsayılan olarak görünmez bir katman içinde yüklenir ve görünürlüğünü Lua üzerinden NUI odak durumunu şu şekilde ayarlayarak kontrol edersiniz: SetNuiFocus.

SendNUIMessage ve RegisterNUICallback

Lua ile NUI'niz arasındaki iletişim çift yönlüdür. Lua'dan UI tarafına şunu kullanırsınız: SendNUIMessage JSON olarak serileştirilen ve JavaScript tarafında alınan bir tabloyu iletmek için: bir message window nesnesinde event listener. UI'dan Lua'ya geri dönmek için fetch API'sini kullanarak şununla kaydedilmiş uç noktaları çağırırsınız: RegisterNUICallback. Bu callback sistemi, JavaScript kodunuzun Lua fonksiyonlarını tetiklemesini ve yanıt almasını sağlayarak oyun mantığı ile arayüz durumu arasında sorunsuz entegrasyon sunar.

FiveM için Responsive Tasarım

FiveM oyuncuları çok çeşitli ekran çözünürlükleri kullanır, bu nedenle NUI tasarımlarınız duyarlı (responsive) olmalıdır. Şu gibi göreceli birimler kullanın: vh, vw, ve düzen için sabit piksel değerleri yerine yüzdeler. CSS Flexbox ve Grid, uyarlanabilir düzenler oluşturmak için mükemmel çalışır. NUI katmanının oyunun üzerinde yer aldığını unutmayın, bu nedenle mümkün olduğunca şeffaf arka planlar kullanın ve arayüzünüz telefon veya dizüstü bilgisayar prop'u gibi tam ekran bir deneyim amaçlamadıkça tüm ekranı kaplamaktan kaçının.

Performans Hususları

NUI performansı doğrudan oyun istemcisinin kare hızını etkiler. Ağır CSS animasyonlarından, aşırı DOM manipülasyonundan ve büyük görsel varlıklarından kaçının. Düzen özelliklerini değiştirmek yerine animasyonlar için CSS transform kullanın ve sık tetiklenen JavaScript olaylarını debounce edin. Arayüzünüz düzenli olarak güncelleniyorsa, setInterval yerine requestAnimationFrame kullanmayı düşünün. Arayüz görünür olmadığında, kaynakları serbest bırakmak amacıyla JavaScript kodunuzdaki çalışan aralıkları veya animasyonları duraklatmak için Lua üzerinden bir mesaj gönderin.

NUI ile Framework'leri Kullanma

Vanilla HTML ve JavaScript basit UI'lar için sorunsuz çalışsa da, karmaşık arayüzler React, Vue veya Svelte gibi frameworklerden faydalanır. Bu frameworkler state yönetimini ve DOM güncellemelerini verimli şekilde ele alarak yazmanız gereken kod miktarını azaltır. Birçok FiveM geliştiricisi, bileşen tabanlı mimarisi ve güçlü ekosistemi nedeniyle NUI ile birlikte React kullanır. Framework kodunuzu resource dosyanıza dahil edilebilecek statik dosyalara derlemek için Vite veya webpack ile bir build adımı ayarlayın ve paket boyutunu en aza indirmek için dağıtımda production build kullanın.