Warum ein benutzerdefiniertes Benachrichtigungssystem erstellen?
Standard-FiveM-Benachrichtigungen sind funktionsfähig, es mangelt ihnen jedoch an optischem Glanz und Flexibilität. Die meisten Roleplay-Server basieren auf generischen Text-Popups, die alle identisch aussehen, was es für Spieler schwierig macht, zwischen einem Fehler, einer Erfolgsbestätigung oder einer Informationswarnung zu unterscheiden. Ein mit NUI erstelltes benutzerdefiniertes Benachrichtigungssystem gibt Ihnen die volle Kontrolle über Stil, Animationen, Positionierung, Soundeffekte und Warteschlangenverhalten. Es verwandelt ein grundlegendes UI-Element in etwas, das zur Markenidentität deines Servers passt und das Spielerlebnis erheblich verbessert. In diesem Tutorial erstellen wir ein komplettes Toast-Benachrichtigungssystem von Grund auf mit Lua auf der Server- und Client-Seite, wobei HTML, CSS und JavaScript das NUI-Frontend antreiben.
Einrichten der NUI-Ebene
Die Grundlage jedes benutzerdefinierten Benachrichtigungssystems in FiveM ist die NUI-Ebene (Neue Benutzeroberfläche). Mit NUI kannst du html-Inhalte als Overlay über dem Spiel rendern, was bedeutet, dass Ihnen die volle Leistungsfähigkeit moderner Webtechnologien zur Verfügung steht. Erstelle zunächst deine Ressourcenstruktur mit einem fxmanifest.Lua, einem clientseitigen Lua-Script und einem html-Ordner, der deine UI-Dateien enthält. Das Manifest muss deine NUI-Seite deklarieren und Nachrichtenhandler registrieren, damit deine Lua-Scripts mit dem Frontend kommunizieren können.
Deine Datei HTML/index.HTML sollte minimal sein. Es ist lediglich ein Container-Div erforderlich, in das Benachrichtigungen von JavaScript dynamisch eingefügt werden. Halte den HTML schlank, da jedes Benachrichtigungselement programmgesteuert erstellt und zerstört wird. Verknüpfe dein Stylesheet und dein Script und stellst du sicher, dass der Text einen transparenten Hintergrund hat, damit die Spielwelt hinter deinen Benachrichtigungen sichtbar bleibt.
Entwerfen der Toast-Benachrichtigung CSS
Toast-Benachrichtigungen sollten visuell nach Typ unterschieden werden. Definiere separate Farbschemata für Erfolg-, Fehler-, Info- und Warnungs-Benachrichtigungen. Positioniere den Container mit einer festen Positionierung in der oberen rechten Ecke des Bildschirms und stapeln du Benachrichtigungen vertikal mit einem kleinen Abstand dazwischen. Jeder Toast sollte einen subtilen Glasmorphismus-Effekt mit Hintergrundunschärfe, einen farbigen linken Rand zur Angabe des Typs und sanfte Eingangs- und Ausgangsanimationen haben. Verwende CSS-Keyframes zum Einschieben von rechts und zum Ausblenden, wenn die Benachrichtigung abläuft.
Erstellen der JavaScript-Benachrichtigungswarteschlange
Die JavaScript-Schicht verarbeitet eingehende Nachrichten von Lua, erstellt DOM-Elemente, verwaltet die Warteschlange und kümmert sich um die automatische Entlassung. Eine Benachrichtigungswarteschlange ist unerlässlich, da nicht zehn Benachrichtigungen gleichzeitig auf dem Bildschirm angezeigt werden sollen. Begrenze die sichtbare Anzahl auf maximal fünf und stellst du alle Überlaufbenachrichtigungen in die Warteschlange, sodass sie angezeigt werden, als würden frühere ablaufen. Jede Benachrichtigung sollte eine konfigurierbare Dauer haben und durch Klicken auf eine Benachrichtigung sollte diese sofort geschlossen werden. Der Fortschrittsbalken am unteren Rand jedes Toasts gibt den Spielern einen visuellen Hinweis darauf, wie lange die Benachrichtigung auf dem Bildschirm angezeigt wird.
Clientseitige Lua-Integration
Auf der Clientseite benötigst du eine Funktion, die NUI-Nachrichten an deine HTML-Ebene sendet, und einen Export, damit andere Ressourcen Benachrichtigungen auslösen können, ohne direkt von den Interna deines Scripts abhängig zu sein. Der native SendNUIMessage sendet Daten an den Browserkontext, wo dein JavaScript sie aufnimmt. Binde dies in eine saubere API-Funktion ein, die einen Titel, eine Nachricht, einen Typ und optional eine Dauer akzeptiert. Registriere sowohl ein Client-Ereignis als auch einen Export, damit Benachrichtigungen sowohl von serverseitigen Scripts als auch von anderen Client-Ressourcen ausgelöst werden können. Dieser duale Ansatz gewährleistet maximale Kompatibilität mit jedem Framework.
Serverseitiger Ereignisversand
Das serverseitige Script bietet Hilfsfunktionen zum Senden von Benachrichtigungen an bestimmte Spieler, alle Spieler oder Gruppen von Spielern. Hier kümmerst du dich um Anwendungsfälle wie das Versenden von Ankündigungen, das Versenden von Transaktionsbestätigungen oder das Benachrichtigen von Administratoren über verdächtige Aktivitäten. Durch die Zentralisierung der Versandlogik auf dem Server behaltest du einen einzigen Kontrollpunkt für die Benachrichtigungszustellung. Du kannst hier auch eine Ratenbegrenzung hinzufügen, um Benachrichtigungs-Spam durch bösartige oder fehlerhafte Client-Scripts zu verhindern. Der Server sollte die Benachrichtigungsparameter vor der Weiterleitung validieren, um eine NUI-Einschleusung durch manipulierte Nachrichten zu verhindern.
Hinzufügen von Soundeffekten und Polieren
Soundeffekte machen Benachrichtigungen von einem rein visuellen Element zu einem multisensorischen Feedback-Mechanismus. Spieler laufen oft im Hintergrund oder konzentrieren sich auf das Fahren und verpassen möglicherweise einen stillen Trinkspruch. Ein kurzer, dezenter Signalton bei Erfolgsbenachrichtigungen, ein leiser Signalton bei Fehlern und ein sanfter Ping bei Info-Benachrichtigungen stellen sicher, dass Spieler wichtige Informationen auch dann registrieren, wenn sie nicht in den Benachrichtigungsbereich schauen. Halte deine Audiodateien kurz, unter 500 Millisekunden, und verwendest du aus Gründen der Browserkompatibilität das OGG-Format. Stelle die Lautstärke auf etwa 30 Prozent ein, damit sie mit dem Spielklang harmoniert, anstatt ihn zu überfordern. Speichere die Sounddateien in deinem Verzeichnis html/sounds und ladest du sie vorab in JavaScript, um Wiedergabeverzögerungen bei der ersten Benachrichtigung zu vermeiden.
Erweiterte Funktionen und Anpassung
Sobald das Kernsystem funktioniert, solltest du darüber nachdenken, erweiterte Funktionen hinzuzufügen, um deinen Server von anderen abzuheben. Permanente Benachrichtigungen, die auf dem Bildschirm bleiben, bis der Spieler explizit darauf klickt, sind nützlich für wichtige Warnungen wie ausstehende Telefonanrufe oder Gefängnis-Timer. Mit Aktionsschaltflächen in Benachrichtigungen können Spieler direkt reagieren, beispielsweise eine Handelsanfrage annehmen, ohne ein separates Menü öffnen zu müssen. Du kannst auch eine Benachrichtigungsgruppierung implementieren, bei der wiederholte identische Benachrichtigungen in einem einzigen Toast zusammengefasst werden, mit einem Zähler-Badge, das die Anzahl der Vorkommen anzeigt. Erstelle für die Framework-Integration Bridge-Dateien, die die Standardbenachrichtigungsfunktionen in QBCore oder ESX überschreiben, sodass jede Ressource auf deinem Server automatisch dein benutzerdefiniertes System verwendet, ohne dass Codeänderungen erforderlich sind. Dieses Muster des Ersetzens von Framework-Standardwerten durch deine eigene Implementierung ist eine saubere Möglichkeit, die Benutzeroberfläche eines gesamten Servers in einem Schritt zu aktualisieren.
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.