Interfaces NUI (HTML/CSS/JS) · Lección 2/3 · 9 min

Mostrar y ocultar la interfaz (el foco)

SetNuiFocus es la clave: da el ratón a la web. Si te olvidas de quitarlo, dejas al jugador atrapado.

Para que el jugador pueda hacer clic en tu menú, hay que darle el «foco» a la NUI con SetNuiFocus. Y SIEMPRE hay que quitárselo al cerrar, o se queda con el ratón fuera sin poder jugar.

Lua: abrir y cerrar

lua

local abierto = false

RegisterCommand('menu', function()
  abierto = true
  SetNuiFocus(true, true)               -- foco + ratón a la NUI
  SendNUIMessage({ action = 'open' })   -- avisa al JS
end)

-- Cerrar (lo llamará el JS con un callback, ver siguiente lección)
RegisterNUICallback('close', function(_, cb)
  abierto = false
  SetNuiFocus(false, false)             -- ¡devuelve el control al juego!
  cb('ok')
end)

client.lua

javascript

window.addEventListener('message', (e) => {
  if (e.data.action === 'open') {
    document.getElementById('app').style.display = 'block';
  }
});

// Cerrar con ESC
document.onkeyup = (e) => {
  if (e.key === 'Escape') {
    document.getElementById('app').style.display = 'none';
    fetch(`https://${GetParentResourceName()}/close`, { method: 'POST', body: '{}' });
  }
};

app.js

Olvidarse de SetNuiFocus(false, false) al cerrar es EL bug más común de NUI: el jugador se queda con el cursor y no puede moverse. Pon siempre el cierre con ESC y por callback.

Practica lo aprendido

0/3

Test

Al cerrar un menú NUI, ¿por qué es imprescindible llamar a SetNuiFocus(false, false)?

Pista

El foco es el ratón. ¿Quién debe tenerlo cuando el menú está cerrado?

Corrige el error

Este callback cierra el menú pero deja al jugador atrapado con el ratón. Arréglalo.

Este código tiene un fallo:

1RegisterNUICallback('close', function(_, cb)

2 abierto = false

3 cb('ok')

4end)

Reescríbelo corregido:

Pista

Falta devolver el foco al juego al cerrar.

Rellena los huecos

Completa el comando que abre el menú: da foco y ratón a la NUI y avísala con un mensaje.

1RegisterCommand('menu', function()

2 SetNuiFocus(, )

3 SendNUIMessage({ action = })

4end)

Pista

Para abrir: foco y ratón en true; el action (entre comillas) que escucha el JS es 'open'.

Reto: prográmalo tú

Añade que al pulsar un botón 'Cerrar' del HTML se oculte el menú y se devuelva el control al juego.

Escríbelo tú en tu editor (VS Code) y pruébalo en tu servidor. Aquí se aprende haciéndolo, no copiando.

Ver pista

onclick → fetch(...'/close') → RegisterNUICallback('close') con SetNuiFocus(false,false).

Escribe aquí tu solución:

← Qué es la NUI y cómo se carga Siguiente: Comunicar Lua y JavaScript

¿Qué tal esta lección?