¿Qué es NUI en FiveM?
NUI significa New User Interface y es el sistema que utiliza FiveM para renderizar interfaces basadas en HTML dentro del cliente del juego. Bajo el capó, NUI se apoya en el Chromium Embedded Framework, lo que te permite usar HTML, CSS y JavaScript estándar para crear UIs ricas e interactivas. Esto abre enormes posibilidades para crear pantallas de teléfono personalizadas, sistemas de inventario, HUDs y paneles de admin que se sienten nativos del juego mientras aprovechan toda la potencia de las tecnologías web modernas.
Configurar tu primera NUI
Para crear una interfaz NUI necesitas tres cosas: un archivo HTML declarado como ui_page en tu fxmanifest.lua, los propios archivos HTML/CSS/JS y código Lua para comunicar el juego con la interfaz. Tu manifest debe incluir ui_page 'html/index.html' y listar tus assets web en la directiva files. La página HTML carga por defecto dentro de un overlay invisible y tú controlas su visibilidad desde Lua estableciendo el foco NUI con SetNuiFocus.
SendNUIMessage y RegisterNUICallback
La comunicación entre Lua y tu NUI es bidireccional. De Lua hacia la UI usas SendNUIMessage para pasar una tabla que se serializa a JSON y se recibe en JavaScript mediante un listener del evento message en el objeto window. De la UI de vuelta a Lua usas la API fetch para llamar a endpoints registrados con RegisterNUICallback. Este sistema de callbacks permite que tu código JavaScript dispare funciones Lua y reciba respuestas, ofreciendo una integración fluida entre la lógica del juego y el estado de la interfaz.
Diseño responsive para FiveM
Los jugadores de FiveM utilizan un amplio abanico de resoluciones, así que tus diseños NUI deben ser responsive. Usa unidades relativas como vh, vw y porcentajes en lugar de valores fijos en píxeles para el layout. Flexbox y CSS Grid funcionan de maravilla para crear diseños adaptativos. Ten en cuenta que el overlay NUI se sitúa sobre el juego, así que usa fondos transparentes siempre que puedas y evita cubrir toda la pantalla salvo que tu UI esté pensada para ser una experiencia a pantalla completa, como un prop de teléfono o portátil.
Consideraciones de rendimiento
El rendimiento de NUI influye directamente en la tasa de FPS del cliente. Evita animaciones CSS pesadas, manipulación excesiva del DOM y assets de imagen enormes. Usa transforms de CSS para las animaciones en lugar de cambiar propiedades de layout y aplica debounce a los eventos JavaScript que se disparan con frecuencia. Si tu UI se actualiza a menudo, plantéate usar requestAnimationFrame en lugar de setInterval. Cuando la UI no sea visible, envía un mensaje desde Lua para pausar cualquier intervalo o animación activa en tu JavaScript y liberar recursos.
Usar frameworks con NUI
Aunque HTML y JavaScript vanilla funcionan bien para UIs sencillas, las interfaces complejas se benefician de frameworks como React, Vue o Svelte. Estos frameworks gestionan el estado y las actualizaciones del DOM de forma eficiente, reduciendo el código que tienes que escribir. Muchos desarrolladores de FiveM usan React con NUI por su arquitectura basada en componentes y su sólido ecosistema. Configura un paso de build con Vite o webpack para compilar el código del framework en archivos estáticos que puedas incluir en tu recurso y utiliza la build de producción al desplegar para minimizar el tamaño del bundle.