O que é NUI no FiveM?
NUI significa New User Interface e é o sistema que FiveM usa para renderizar interfaces baseadas em HTML dentro do cliente do jogo. Internamente, o NUI é desenvolvido com o Chromium Embedded Framework, o que significa que você pode usar HTML, CSS e JavaScript padrão para criar interfaces de usuário ricas e interativas. Isso abre enormes possibilidades para a criação de telas de telefone personalizadas, sistemas de inventário, HUDs e painéis de administração que parecem nativos do jogo, ao mesmo tempo em que aproveita todo o poder das modernas tecnologias da web.
Configurando sua primeira NUI
Para criar uma interface NUI, você precisa de três coisas: um arquivo HTML declarado como ui_page em seu fxmanifest.lua, os próprios arquivos HTML/CSS/JS e o código Lua para comunicação entre o jogo e a interface. Seu manifesto deve incluir ui_page 'html/index.html' e listar seus ativos da web na diretiva files. A página HTML é carregada dentro de uma sobreposição invisível por padrão, e você controla sua visibilidade por meio de Lua definindo o estado de foco NUI com SetNuiFocus.
EnviarNUIMessage e RegisterNUICallback
A comunicação entre Lua e sua NUI é bidirecional. De Lua para a UI, você usa SendNUIMessage para passar uma tabela que é serializada para JSON e recebida em JavaScript por meio de um ouvinte de evento message no objeto de janela. Da UI de volta para Lua, você usa a API fetch para chamar endpoints registrados com RegisterNUICallback. Este sistema de retorno de chamada permite que seu código JavaScript acione funções Lua e receba respostas, permitindo uma integração perfeita entre a lógica do jogo e o estado da interface.
Design responsivo para FiveM
Os players FiveM usam uma ampla variedade de resoluções de tela, portanto, seus designs NUI devem ser responsivos. Use unidades relativas como vh, vw e porcentagens em vez de valores de pixel fixos para layout. CSS Flexbox e Grid funcionam perfeitamente para criar layouts adaptáveis. Tenha em mente que a sobreposição NUI fica na parte superior do jogo, então use fundos transparentes sempre que possível e evite cobrir a tela inteira, a menos que sua IU seja projetada para ser uma experiência de tela inteira, como um telefone ou laptop.
Considerações sobre desempenho
O desempenho do NUI afeta diretamente a taxa de quadros do cliente do jogo. Evite animações CSS pesadas, manipulação excessiva de DOM e grandes recursos de imagem. Use transformações CSS para animações em vez de alterar as propriedades do layout e elimine eventos JavaScript que são acionados com frequência. Se sua IU for atualizada regularmente, considere usar requestAnimationFrame em vez de setInterval. Quando a IU não estiver visível, envie uma mensagem de Lua para pausar quaisquer intervalos de execução ou animações em seu JavaScript para liberar recursos.
Usando Frameworks com NUI
Embora HTML e JavaScript simples funcionem bem para interfaces de usuário simples, interfaces complexas se beneficiam de estruturas como React, Vue ou Svelte. Essas estruturas lidam com gerenciamento de estado e atualizações de DOM com eficiência, reduzindo o código que você precisa escrever. Muitos desenvolvedores FiveM usam React com NUI por causa de sua arquitetura baseada em componentes e ecossistema forte. Configure uma etapa de compilação com Vite ou webpack para compilar o código da estrutura em arquivos estáticos que podem ser incluídos em seu recurso e use a compilação de produção para implantação para minimizar o tamanho do pacote.