Jak stworzyć własne UI do FiveM za pomocą NUI (HTML/CSS/JS)
Naucz się budować rozbudowane interfejsy w grze dla FiveM przy użyciu NUI. Obejmuje konfigurację HTML/CSS/JS, komunikację w Lua, obsługę focusa i porady dotyczące debugowania dla deweloperów.
Agency Scripts
Założyciel i główny deweloper w Agency Scripts
Czym jest NUI w FiveM?
NUI to skrót od New User Interface i jest to system wykorzystywany przez FiveM do renderowania interfejsów opartych na HTML w kliencie gry. Pod maską NUI bazuje na Chromium Embedded Framework, co oznacza, że możesz tworzyć rozbudowane, interaktywne interfejsy za pomocą standardowego HTML, CSS i JavaScript. Otwiera to ogromne możliwości tworzenia własnych ekranów telefonu, systemów ekwipunku, interfejsów HUD i paneli administratora, które sprawiają wrażenie natywnych dla gry, wykorzystując przy tym pełną moc nowoczesnych technologii webowych.
Konfiguracja twojego pierwszego NUI
Aby stworzyć interfejs NUI, potrzebujesz trzech rzeczy: pliku HTML zadeklarowanego jako ui_page w Twoim fxmanifest.lua, same pliki HTML/CSS/JS oraz kod Lua do komunikacji między grą a interfejsem. Twój manifest powinien zawierać ui_page 'html/index.html' i umieść swoje zasoby webowe w files dyrektywa. Strona HTML domyślnie ładuje się w niewidocznej nakładce, a jej widocznością sterujesz z poziomu Lua, ustawiając stan fokusu NUI za pomocą SetNuiFocus.
SendNUIMessage i RegisterNUICallback
Komunikacja między Lua a Twoim NUI jest dwukierunkowa. Z poziomu Lua do UI używasz SendNUIMessage aby przekazać tabelę, która zostaje zserializowana do JSON i odebrana w JavaScript poprzez message event listener na obiekcie window. Z poziomu UI z powrotem do Lua używasz fetch API do wywoływania endpointów zarejestrowanych przez RegisterNUICallback. Ten system wywołań zwrotnych pozwala kodowi JavaScript wywoływać funkcje Lua i odbierać odpowiedzi, umożliwiając bezproblemową integrację między logiką gry a stanem interfejsu.
Responsywny design dla FiveM
Gracze FiveM korzystają z wielu różnych rozdzielczości ekranu, dlatego Twoje projekty NUI powinny być responsywne. Używaj jednostek względnych, takich jak vh, vw, oraz wartości procentowych zamiast stałych wartości w pikselach dla układu. CSS Flexbox i Grid idealnie sprawdzają się przy tworzeniu responsywnych układów. Pamiętaj, że nakładka NUI znajduje się na wierzchu gry, dlatego tam, gdzie to możliwe, stosuj przezroczyste tła i unikaj zasłaniania całego ekranu, chyba że interfejs ma działać na pełnym ekranie, jak telefon lub prop laptopa.
Kwestie wydajności
Wydajność NUI bezpośrednio wpływa na liczbę klatek na sekundę w kliencie gry. Unikaj ciężkich animacji CSS, nadmiernych manipulacji DOM i dużych plików graficznych. Do animacji używaj transformacji CSS zamiast zmiany właściwości układu i stosuj debounce dla często wywoływanych zdarzeń JavaScript. Jeśli Twoje UI aktualizuje się regularnie, rozważ użycie requestAnimationFrame zamiast setInterval. Gdy UI nie jest widoczne, wyślij komunikat z poziomu Lua, aby wstrzymać działające interwały lub animacje w JavaScript i zwolnić zasoby.
Używanie frameworków z NUI
Podczas gdy czysty HTML i JavaScript sprawdzają się przy prostych interfejsach, w przypadku złożonych UI warto skorzystać z frameworków takich jak React, Vue lub Svelte. Sprawnie zarządzają one stanem oraz aktualizacjami DOM, ograniczając ilość kodu, który musisz napisać. Wielu deweloperów FiveM używa Reacta z NUI ze względu na architekturę opartą na komponentach i silny ekosystem. Skonfiguruj etap budowania za pomocą Vite lub webpacka, aby skompilować kod frameworka do plików statycznych, które można dołączyć do Twojego zasobu, i używaj kompilacji produkcyjnej do wdrożenia, aby zminimalizować rozmiar paczki.