05 - NUI Avanzata

NUI Avanzata

INFO

NUI (HTML/CSS/JS caricati nel client) è la base delle interfacce moderne. Dopo le basi del modulo 08, qui vediamo framework JS, build e best practice.

Obiettivo	Dettagli
Cosa imparerai	• Struttura NUI base • Usare framework (React/Vue) con build • Convenzioni NUI (focalizzazione, input) • Performance NUI
Prerequisiti	• NUI di base (modulo 08/06) • Nozioni HTML/CSS/JS

---

1. Struttura NUI Base

my_ui/
├── fxmanifest.lua
├── ui/
│   ├── index.html
│   ├── style.css
│   └── app.js
└── client.lua

-- fxmanifest.lua
ui_page 'ui/index.html'
 
files {
    'ui/index.html',
    'ui/style.css',
    'ui/app.js'
}
 
client_script 'client.lua'

---

2. Comunicare Client ↔ NUI

-- client.lua
-- Mostra UI e focalizza
local function openUI(data)
    SetNuiFocus(true, true)
    SendNUIMessage({ action = 'open', data = data })
end
 
-- Ricevi dal JS
RegisterNUICallback('close', function(_, cb)
    SetNuiFocus(false, false)
    cb('ok')
end)

// app.js
window.addEventListener('message', (event) => {
    const data = event.data
    if (data.action === 'open') {
        document.getElementById('ui').style.display = 'block'
    }
})
 
// Invia al client (nativo)
function closeUI() {
    fetch(`https://${GetParentResourceName()}/close`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({})
    })
}

---

3. Framework JS con Build (React/Vue)

Per UI complesse (inventari, telefono, HUD) si usa un framework JS con build (bundle). Il workflow tipico:

my_ui/web/            ← progetto JS (package.json)
my_ui/ui/index.html   ← build generato

cd web
npm install
npm run build   # genera i file in ui/

WARNING

Servono Node.js e la build genera file statici (HTML/JS/CSS) che vanno dichiarati nel fxmanifest. Il progetto web/ non va incluso nel file manifest.

---

4. Input e Focalizzazione

Quando la UI è aperta, il giocatore non deve poter controllare il personaggio:

-- client.lua
local uiOpen = false
 
local function setUI(state)
    uiOpen = state
    SetNuiFocus(state, state)         -- mouse + tastiera alla UI
    SetCursorLocation(0.5, 0.5)       -- centro
end
 
-- Blocca i controlli del ped quando UI aperta
CreateThread(function()
    while uiOpen do
        Wait(0)
        DisableControlAction(0, 24, true)   -- attack
        DisableControlAction(0, 25, true)   -- aim
    end
end)

---

5. Performance NUI

Regola	Perché
Non aggiornare l’HUD 60 fps	Consuma CPU; 5–10 fps bastano
Invia SendNUIMessage solo su cambio	Meno messaggi = meno lavoro
Occhiata a resmon per la UI	Le UI pesanti sono una causa di FPS bassi
Svuota/CSS animazioni semplici	Effetti pesanti (blur) costano

-- client.lua
-- Aggiorna l'HUD a 10 fps invece che ogni frame
CreateThread(function()
    while true do
        Wait(100)
        local hp = GetEntityHealth(PlayerPedId())
        SendNUIMessage({ action = 'setHp', hp = hp })
    end
end)

---

6. NUI Security

• La UI è caricata nel client: non mettere logica economica lì
• Usa RegisterNUICallback per validare input prima di TriggerServerEvent
• Non fidarti dei dati che il JS ti rimanda: validali server-side (modulo 12)

---

Verifica

• UI focalizzata correttamente (mouse+keyboard)
• Controlli ped disabilitati quando UI aperta
• Aggiornamenti UI con Wait(100)+ per HUD
• NUI non contiene logica sensibile
• Build JS generata e dichiarata nel manifest

---

Modulo UI e VFX completato! Prossimo modulo: 16 - Framework Alternativi

---

Torna alla: Indice Generale