[Nasıl Yapılır] NUI kullanın (HTML ile UI Oluşturma)

mcsbey

Paylaşım Ekibi
Katılım
2 Ağu 2019
Mesajlar
104
Tepki puanı
1
Yaş
29

İtibar Puanı:

Hey millet,
çünkü bazılarınız, “Serin bir Giriş veya başka bir şey oluşturmak için Oyunda bir UI oluşturmak istiyorum” gibi bazı sorularınız var, bu Öğreticiyi yazmanız için biraz zaman geçirmeye karar verdim.
Ben ingilizce bir insan değilim bu yüzden bazı gramer hataları yaparsam nazik davranın
: Wink:

!!!IMPORTEND!!!
Bu Öğretici, komut dosyasının ne olduğunu bilmeyen ppl'ler veya mutlak yeni başlayanlar için değil, çünkü her ayrıntıya girmiyorum!
Yani exp'e ihtiyacınız var. aşağıdakilerde:
  • LUA
  • HTML
  • CSS
  • Javascript (veya daha iyi jQuery)
  • çok JSON EXP de iyidir
    : Slight_smile:
Telif Hakkı
Bu Eğitim,
Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.
“fare girişli kullanıcı arayüzü” ne dayanmaktadır (
Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.
) her kodlama telif hakkı kendi
Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.
!
Teorik sayfalar
Bilmeniz gereken ilk şey, Yerel Kullanıcı Arabiriminin (NUI) nasıl çalıştığıdır.
Orada ALLWAYS! Bir istemci betiği ile kullanıcı arayüzünüz arasında basit bir iletişim, ancak kullanıcı arayüzü nedir?
Basit, çok etkili ve birçok fonksiyonla birlikte geliyor!
HTML, CSS ve güçlü jQuery Lib (Javascript) hakkında konuşuyorum.
Yani temelde iletişim her zaman böyle devam eder:
  1. İstemci UI işlevselliğini tetiklemek için bir işlev çağırın
  2. İstemci NUI aracılığıyla bir javascript'e bir dizi veri (JSON) gönderir.
  3. Javascript dosyanız, Clientscript'inizin tetiklediği bir işlevi tetikler (1.; 2.)
  4. Javascript dosyanız betiğinize bir JSON dizisi geri gönderir
  5. (İsteğe bağlı) Müşteri Dosyanız şimdi bir geri arama işlevini tetikler ve yapması gerekeni yapar (belki Giriş Verilerini işlemek, Bir Oynatıcı Kaydetmek,…)
Basit değil mi?
Şimdi ayrıntılı olarak başlayalım
Check out the full files on GitHub :)
1.) HTML Dosyanızı, JavaScript Dosyanızı ve CSS
Dosyanızı oluşturun Örnek için GitHub Repro'yu ziyaret edin
2.) __resource.lua dosyasını kurun
client_script('client/client.lua') --your NUI Lua File

ui_page('client/html/index.html') --THIS IS IMPORTENT

--[[The following is for the files which are need for you UI (like, pictures, the HTML file, css and so on) ]]--
files({
'client/html/index.html',
'client/html/script.js',
'client/html/style.css',
'client/html/cursor.png'
})

ui_page -> Bu, Kaynağınıza UI'nizin bulunduğu yeri söylemek için gereklidir (Kaynağınızın içinde olmalı !!!)
3.) İstemci dosyanızdan bir işlevi tetikleyin
İlk başta size bir fonksiyon tanıtıyorum: SendNUIMessage (JSON Array)
Bu fonksiyon JSON Formatındaki verileri Javascript Dosyanıza göndermek için gereklidir.
Format her zaman:
{
type = value,
type2 = value2,
...
}

“Type”, JavaScript Dosyanızda daha sonra çağıracağınız bir isimdir.
“Değer” bir boolean, bir dize, bir sayı veya başka bir şey gibi her şey olabilir
Şu Örneğe Bakın:
function EnableGui(enable)
...
SendNUIMessage({
type = "enableui",
enable = enable
})
end

4.) NUIMessage’ınızı Javascript dosyanızda taşıyın
window.addEventListener, JSON (NUIMessage) için bekleyen Javascript işlevidir.
Şimdi aşağıdaki satıra bir göz atın:
if (event.data.type == "enableui") {

event.data. type: Bu, “NUIMessage” inizde daha önce kullandığınız türdür.
  • tür adınız merhaba ise, bu event.data’ya benziyor.hello
  • tür adınız fivereborn ise, bu event.data gibi görünüyor.reborn
ve bunun gibi.
Değer her zaman true, “World” veya 1 gibi kullandığınız veri türüdür.
Bazı örnekler:
LUA:
SendNUIMessage({hello = "world"})

Javascript:
if (event.data.hello == "world") {
...



LUA:
SendNUIMessage({fivereborn = true})

Javascript:
if (event.data.fivereborn == true) {
...

5.) Javascript'ten Veri Geri Gönder
Şimdi, UI Tarafı'ndakilerle işiniz bittiğinde, istemci dosyanıza bir sonuç gönderin.
Bunun SendNUIMessage ile aynı formatta olması gerekir, ancak = basit ihtiyacınız olduğunda: UI Tarafında
Bu şuna benziyor
$.post('
Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.
', JSON.stringify({
username: "Five",
password: "reborn"})
);

Http bağlantısı, NUI Geri Çağrınızın bulunduğu ve şunun gibi inşa edildiği varış yeridir:
http://YOUR_RESOURCE_NAME/YOUR_EVENT_NAME

6.) Olayı Clientside'da Gerçekleştirin
Şimdi neredeyse bitti, yapmamız gereken tek şey bir Geri Çağırma Etkinliği oluşturmak.
Bu, RegisterNUICallback (String eventName, function (data, callback)) adlı bir işlev tarafından yapılır.
data 4'teki ile aynı biçime sahiptir.) data.username
Ve bu şuna benziyor:
RegisterNUICallback('YOUR_EVENT_NAME', function(data, cb)
-- Do something here

cb('ok')
end)

Ve bu NUI'nin işleyiş şeklidir ve umarım bu NUI'ye başlamak isteyen herkes için harika bir giriş olur.
Eğer sorunuz varsa, sormaya çekinmeyin