Как создать кастомный интерфейс FiveM с помощью NUI (HTML/CSS/JS)

Что такое NUI в FiveM?

NUI означает New User Interface и это система, которую FiveM использует для отображения интерфейсов на основе HTML внутри игрового клиента. В основе NUI лежит Chromium Embedded Framework, что позволяет использовать стандартные HTML, CSS и JavaScript для создания богатых, интерактивных UI. Это открывает огромные возможности для создания кастомных экранов телефонов, систем инвентаря, HUD и админ-панелей, которые ощущаются нативными для игры, используя всю мощь современных веб-технологий.

Настройка вашего первого NUI

Для создания NUI интерфейса вам нужны три вещи: HTML файл, объявленный как ui_page в вашем fxmanifest.lua , сами HTML/CSS/JS файлы и Lua-код для связи между игрой и интерфейсом. Ваш манифест должен включать ui_page 'html/index.html' и перечислите ваши веб-ресурсы в files директива. HTML-страница загружается внутри невидимого оверлея по умолчанию, и вы управляете ее видимостью через Lua, устанавливая состояние фокуса NUI с помощью SetNuiFocus.

SendNUIMessage и RegisterNUICallback

Связь между Lua и вашим NUI двунаправленная. От Lua к UI вы используете SendNUIMessage передавать таблицу, которая сериализуется в JSON и принимается в JavaScript через message слушатель событий на объекте window. Из UI обратно в Lua вы используете fetch API для вызова зарегистрированных конечных точек с RegisterNUICallback. Эта система callback позволяет вашему JavaScript-коду вызывать Lua-функции и получать ответы, обеспечивая бесшовную интеграцию между игровой логикой и состоянием интерфейса.

Адаптивный дизайн для FiveM

Игроки FiveM используют широкий диапазон разрешений экранов, поэтому ваши NUI-дизайны должны быть адаптивными. Используйте относительные единицы, такие как vh, vw и проценты вместо фиксированных значений в пикселях для верстки. CSS Flexbox и Grid отлично подходят для создания адаптивных макетов. Имейте в виду, что NUI-оверлей располагается поверх игры, поэтому используйте прозрачные фоны, где возможно, и избегайте покрытия всего экрана, если ваш UI не предназначен для полноэкранного отображения, как телефон или ноутбук.

Вопросы производительности

Производительность NUI напрямую влияет на частоту кадров игрового клиента. Избегайте тяжелых CSS-анимаций, чрезмерной манипуляции DOM и больших изображений. Используйте CSS-трансформации для анимаций вместо изменения свойств макета и применяйте дебаунсинг для часто срабатывающих событий JavaScript. Если ваш UI обновляется регулярно, рассмотрите использование requestAnimationFrame вместо setInterval. Когда UI не виден, отправляйте сообщение из Lua для приостановки любых запущенных интервалов или анимаций в вашем JavaScript, чтобы освободить ресурсы.

Использование Frameworks с NUI

Хотя ванильный HTML и JavaScript подходят для простых интерфейсов, сложные интерфейсы выигрывают от использования фреймворков, таких как React, Vue или Svelte. Эти фреймворки эффективно управляют состоянием и обновлениями DOM, сокращая объем кода, который нужно писать. Многие разработчики FiveM используют React с NUI из-за его компонентной архитектуры и развитой экосистемы. Настройте этап сборки с помощью Vite или webpack для компиляции кода фреймворка в статические файлы, которые можно включить в ваш ресурс, и используйте production-сборку для деплоя, чтобы минимизировать размер бандла.