Was ist NUI in FiveM?
NUI steht für New User Interface und ist das System, das FiveM zum Rendern von HTML-basierten Schnittstellen im Spielclient verwendet. Unter der Haube basiert NUI auf dem Chromium Embedded Framework, was bedeutet, dass du die Standardversionen HTML, CSS und JavaScript verwenden können, um umfangreiche, interaktive UIs zu erstellen. Dies eröffnet enorme Möglichkeiten für die Erstellung benutzerdefinierter Telefonbildschirme, Inventarsysteme, HUDs und Admin-Panels, die sich direkt an das Spiel anfühlen und gleichzeitig die volle Leistungsfähigkeit moderner Webtechnologien nutzen.
Einrichten deines ersten NUI
Um eine NUI-Schnittstelle zu erstellen, benötigst du drei Dinge: eine HTML-Datei, die in deinem fxmanifest.Lua als ui_page deklariert ist, die HTML/CSS/JS-Dateien selbst und Lua-Code für die Kommunikation zwischen dem Spiel und der Schnittstelle. Dein Manifest sollte ui_page 'HTML/index.HTML' enthalten und deine Web-Assets in der files-Direktive auflisten. Die HTML-Seite wird standardmäßig in einem unsichtbaren Overlay geladen, und du steuern ihre Sichtbarkeit über Lua, indem du dest NUI-Fokusstatus mit SetNuiFocus festlegen.
SendNUIMessage und RegisterNUICallback
Die Kommunikation zwischen Lua und deinem NUI erfolgt bidirektional. Von Lua zur Benutzeroberfläche verwendest du SendNUIMessage, um eine Tabelle zu übergeben, die in JSON serialisiert und in JavaScript über einen message-Ereignis-Listener für das Fensterobjekt empfangen wird. Von der Benutzeroberfläche zurück zu Lua verwendest du die Abruf-API, um Endpunkte aufzurufen, die bei RegisterNUICallback registriert sind. Mit diesem Rückrufsystem kann dein JavaScript-Code Lua-Funktionen auslösen und Antworten empfangen, wodurch eine nahtlose Integration zwischen Spiellogik und Schnittstellenstatus ermöglicht wird.
Responsive Design für FiveM
FiveM-Player nutzen eine Vielzahl von Bildschirmauflösungen, daher sollten deine NUI-Designs responsiv sein. Verwende für das Layout relative Einheiten wie vh, vw und Prozentsätze anstelle fester Pixelwerte. CSS Flexbox und Grid eignen sich perfekt für die Erstellung adaptiver Layouts. Denk daran, dass sich das NUI-Overlay über dem Spiel befindet. Verwende daher nach Möglichkeit transparente Hintergründe und vermeide es, den gesamten Bildschirm abzudecken, es sei denn, deine Benutzeroberfläche soll ein Vollbilderlebnis wie bei einer Telefon- oder Laptop-Requisite bieten.
Leistungsüberlegungen
Die Leistung des NUI wirkt sich direkt auf die Bildrate des Spiel-Clients aus. Vermeide umfangreiche CSS-Animationen, übermäßige DOM-Manipulation und große Bildressourcen. Verwende CSS-Transformationen für Animationen, anstatt Layouteigenschaften zu ändern, und entprellst du JavaScript-Ereignisse, die häufig ausgelöst werden. Wenn deine Benutzeroberfläche regelmäßig aktualisiert wird, solltest du die Verwendung von requestAnimationFrame anstelle von setInterval in Betracht ziehen. Wenn die Benutzeroberfläche nicht sichtbar ist, sende eine Nachricht von Lua, um alle laufenden Intervalle oder Animationen in deinem JavaScript anzuhalten und so Ressourcen freizugeben.
Verwendung von Frameworks mit NUI
Während Vanilla HTML und JavaScript für einfache UIs gut funktionieren, profitieren komplexe Schnittstellen von Frameworks wie React, Vue oder Svelte. Diese Frameworks handhaben die Zustandsverwaltung und DOM-Aktualisierungen effizient und reduzieren so den Code, den du schreiben müssen. Viele FiveM-Entwickler verwenden React mit NUI aufgrund seiner komponentenbasierten Architektur und seines starken Ökosystems. Richte einen Build-Schritt mit Vite oder Webpack ein, um deinen Framework-Code in statische Dateien zu kompilieren, die in deine Ressource eingebunden werden können, und verwendest du den Produktions-Build für die Bereitstellung, um die Bundle-Größe zu minimieren.
Zusammenfassung
Agency Scripts baut seine gesamte Produktlinie nach denselben Grundprinzipien: Framework-agnostische Architektur, schlanke Performance-Eigenschaften, klar dokumentierte Konfiguration und eine API, die echte Composability zwischen den Scripts ermöglicht. Kein Script ist eine Insel — jedes ist so gebaut, dass es gut allein und noch besser als Teil des Ökosystems funktioniert.
Für Fragen zur Installation, Konfiguration oder Kompatibilität ist der Agency Scripts Discord der schnellste Weg zur Hilfe. Die Community dort ist aktiv und hilfsbereit, und das Core-Team ist regelmäßig präsent. Für kritische Probleme steht auch ein direktes Support-Ticket-System auf der Tebex-Produktseite zur Verfügung.
Updates für alle Agency-Scripts werden über Tebex-Benachrichtigungen kommuniziert. Active-Business-Abonnenten erhalten neue Scripts automatisch ohne zusätzlichen Kauf. Changelog-Details erscheinen im #changelog-Kanal des Discords, damit du Updates bewerten kannst, bevor du sie auf einem Produktionsserver installierst.