Interfaces NUI (HTML/CSS/JS) · Lección 1/3 · 8 min
Qué es la NUI y cómo se carga
La NUI es una página web (HTML/CSS/JS) que FiveM dibuja sobre el juego. Así se hacen los menús, HUDs y teléfonos.
Todo menú bonito de FiveM (inventario, teléfono, HUD, tienda) es en realidad una página web corriendo encima del juego: la NUI. Tú la haces con HTML, CSS y JavaScript normales.
Declararla en el fxmanifest
ui_page 'html/index.html'
files {
'html/index.html',
'html/style.css',
'html/app.js',
}fxmanifest.lua
El HTML empieza oculto
<body>
<div id="app" style="display:none">
<h1>Mi menú</h1>
</div>
<script src="app.js"></script>
</body>html/index.html
La NUI siempre está cargada pero arranca OCULTA (display:none) y SIN foco. Tu Lua la muestra cuando hace falta. Si la dejas visible o con foco, el jugador no podrá moverse.
Practica lo aprendido
0/3¿Qué es realmente una interfaz NUI en FiveM?
Pista
Piensa en el inventario o el teléfono: por dentro son HTML y CSS.
Completa el fxmanifest.lua: declara la página de la NUI y la lista de archivos que carga.
'html/index.html' { 'html/index.html', 'html/style.css', 'html/app.js',}Pista
Una palabra apunta al HTML raíz; la otra lista TODO lo que la NUI necesita.
Ordena el HTML de la NUI: un contenedor #app oculto con un título dentro y el script al final.
Coloca las líneas en el orden correcto con las flechas.
<script src="app.js"></script><body> </div> <h1>Mi menú</h1> <div id="app" style="display:none">Pista
Abre el body, luego el div oculto, el título dentro, cierra el div y carga el script.
Reto: prográmalo tú
Crea el esqueleto de un recurso con una NUI: fxmanifest con ui_page y files, y un index.html con un div oculto.
Escríbelo tú en tu editor (VS Code) y pruébalo en tu servidor. Aquí se aprende haciéndolo, no copiando.
Ver pista
ui_page apunta al index.html; files lista TODO lo que la NUI necesita.
Escribe aquí tu solución: