如何使用NUI（HTML/CSS/JS）构建自定义FiveM界面

FiveM 中的 NUI 是什么？

NUI 代表新用户界面，是 FiveM 用于在游戏客户端内渲染基于 HTML 的界面的系统。底层由 Chromium Embedded Framework 驱动，这意味着你可以使用标准的 HTML、CSS 和 JavaScript 构建丰富的交互式 UI。这为创建自定义电话屏幕、库存系统、HUD 和管理面板提供了巨大可能，这些界面既原生感十足，又能充分利用现代网页技术的强大功能。

设置您的第一个 NUI

创建NUI界面需要三样东西：一个声明为 ui_page 在您的 fxmanifest.lua，HTML/CSS/JS 文件本身，以及用于游戏与界面通信的 Lua 代码。您的清单应包含 ui_page 'html/index.html' 并在 files directive。HTML 页面默认加载在一个不可见的覆盖层中，你可以通过 Lua 设置 NUI 焦点状态来控制其可见性，使用 SetNuiFocus.

SendNUIMessage 和 RegisterNUICallback

Lua 与您的 NUI 之间的通信是双向的。从 Lua 到 UI，您使用 SendNUIMessage 传递一个表，该表被序列化为 JSON 并通过 message 窗口对象上的事件监听器。从UI到Lua，您使用fetch API调用注册的端点 RegisterNUICallback该回调系统允许您的JavaScript代码触发Lua函数并接收响应，实现游戏逻辑与界面状态的无缝集成。

FiveM响应式设计

FiveM 玩家使用各种屏幕分辨率，因此你的 NUI 设计应具备响应式。使用相对单位如 vh, vw，以及用于布局的百分比而非固定像素值。CSS Flexbox和Grid非常适合创建自适应布局。请记住，NUI覆盖层位于游戏之上，因此尽可能使用透明背景，除非您的UI设计为全屏体验（如电话或笔记本道具），否则避免覆盖整个屏幕。

性能考虑因素

NUI 性能直接影响游戏客户端的帧率。避免使用繁重的 CSS 动画、过度的 DOM 操作和大型图像资源。使用 CSS 变换进行动画，而不是更改布局属性，并对频繁触发的 JavaScript 事件进行防抖处理。如果你的 UI 经常更新，考虑使用 requestAnimationFrame 替代 setInterval。当 UI 不可见时，从 Lua 发送消息暂停 JavaScript 中运行的任何定时器或动画，以释放资源。

在 NUI 中使用框架

虽然原生 HTML 和 JavaScript 适合简单 UI，复杂界面更适合使用 React、Vue 或 Svelte 等框架。这些框架高效处理状态管理和 DOM 更新，减少你需要编写的代码。许多 FiveM 开发者因其组件化架构和强大生态系统而使用 React 配合 NUI。设置 Vite 或 webpack 构建步骤，将框架代码编译为静态文件以包含在资源中，部署时使用生产构建以最小化包大小。