Dokumentation

Pepper Loadingscreen

Kostenloser Loadingscreen mit echtem Ladefortschritt, Video, Begrüßung und Infokarten – Standalone.

Überblick

Pepper Loadingscreen zeigt beim Verbinden ein kurzes Intro-Video, das nahtlos in einen Loop übergeht. Darüber stehen Servername, Untertitel, ein echter Ladefortschritt mit Ladephasen, eine Begrüßung mit Spielername und Spielerzahl, wechselnde Infokarten und Tipps. Alles stellst du in html/config.js (bzw. html/custom.js) ein – Framework egal.

Features

Intro-Video → nahtloser Loop, beide austauschbar (WebM oder Bild)
Echter Ladefortschritt mit Balken, Prozent und Text je Ladephase
Begrüßung mit Spielername und Spielerzahl beim Verbinden
Wechselnde Infokarten und Tipps mit Zähler und Zeitbalken, optionaler QR-Code (z. B. für deinen Discord)
3 Layouts: classic, center, side
Deutsch und Englisch mit automatischer Sprachwahl, Akzentfarbe, Abdunklung, Video-Ton
html/custom.js für eigene Einstellungen, die Updates überstehen
Standalone, keine Abhängigkeiten; im Spiel läuft kein Script

Voraussetzungen

Abhängigkeit	Pflicht/optional	Wofür	Link
FiveM-Server (`fx_version 'cerulean'`)	Pflicht	Beliebiger aktueller Build	https://runtime.fivem.net/artifacts/fivem/
Framework	nicht nötig	Funktioniert mit ESX, QBCore, Qbox oder ohne Framework	–
OneSync	nicht nötig	–	–
Datenbank	nicht nötig	Speichert nichts – keine Datenbank, kein oxmysql	–
Multicharacter-Script	optional	Kann den Loadingscreen selbst schließen (siehe „Multicharacter“)	–

Installation

Ressource aus dem Cfx.re Portal (https://portal.cfx.re/assets/granted-assets) herunterladen.
Nach resources/[pepper]/pepper_loadingscreen entpacken. Den Ordnernamen nicht umbenennen.
Andere Loadingscreens entfernen – FiveM zeigt nur einen an. Lösche sie aus der server.cfg und aus resources.
In der server.cfg eintragen:
```
ensure pepper_loadingscreen
```
html/config.js anpassen (oder html/custom.example.js nach html/custom.js kopieren), Server neu starten. Eine Datenbank oder Items gibt es nicht.

Erster Test

Mit dem Server verbinden – das Intro-Video startet und geht in den Loop über.
Unten läuft der Ladebalken mit Prozentzahl, der Text wechselt mit den Ladephasen (Spieldaten, Karte, Skripte, Sitzung).
Prüfe die Begrüßung „Willkommen, <Name>“ und die Spielerzahl.
Ändere serverName in html/config.js, starte pepper_loadingscreen neu und verbinde dich erneut – erst dann siehst du die Änderung.

Konfiguration

Datei	Steuert
`html/config.js`	Alle Einstellungen und Texte (Sprache, Layout, Farbe, Video, Fortschritt, Begrüßung, Karten, QR-Code, Tipps)
`html/custom.js`	Deine eigenen Werte, die `config.js` überschreiben – wird von Updates nie ausgeliefert (Vorlage `custom.example.js`)
`html/media/`	Videos und Standbild (`intro.webm`, `loop.webm`, `poster.jpg`)
`html/style.css`	Aussehen für tiefere Anpassungen
`fxmanifest.lua`	`loadscreen_manual_shutdown` für Multicharacter-Scripts

Allgemein, Video und Fortschritt

window.PEPPER_LOADINGSCREEN = {
  locale: "auto",
  layout: "classic",
  accentColor: "#e5484d",
  video: { intro: "media/intro.webm", loop: "media/loop.webm", poster: "media/poster.jpg", sound: false, volume: 0.3, shade: 0.25 },
  // …
};

Option	Standard	Beschreibung
`locale`	`"auto"`	`"auto"` (Sprache des Spielers, sonst Englisch), `"de"` oder `"en"`
`layout`	`"classic"`	`"classic"` (unten), `"center"` (mittig) oder `"side"` (Leiste links)
`accentColor`	`"#e5484d"`	Akzentfarbe (Linien, Punkte, Tipp-Balken)
`video.intro`	`"media/intro.webm"`	Läuft einmal – WebM oder Bild, `""` = aus
`video.loop`	`"media/loop.webm"`	Läuft danach in Schleife – WebM oder Bild, `""` = aus
`video.poster`	`"media/poster.jpg"`	Standbild, bis das Video läuft oder falls es nicht lädt
`video.sound` / `video.volume`	`false` / `0.3`	Video-Ton an/aus, Lautstärke 0–1
`video.shade`	`0.25`	Abdunklung 0–1 für bessere Lesbarkeit
`progress.enabled` / `percent` / `phases`	`true`	Ladebalken, Prozentzahl, Text je Ladephase

Begrüßung, Karten, QR-Code und Tipps

Option	Standard	Beschreibung
`welcome.name` / `welcome.players`	`true` / `true`	Begrüßung mit Spielername, Spielerzahl (von `sv_maxclients`)
`cards.enabled` / `cards.interval`	`true` / `10`	Infokarten an/aus, Sekunden pro Karte
`qr.url`	`""`	Link für den QR-Code, z. B. dein Discord, `""` = aus
`tips.enabled` / `tips.interval` / `tips.shuffle`	`true` / `8` / `false`	Tipps an/aus, Sekunden pro Tipp, zufällige Reihenfolge
`locales.<sprache>`	`de`, `en`	Servername, Untertitel, Ladetexte und Phasen, Begrüßung (`{name}`), Spielerzahl (`{players}`, `{max}`), Karten, QR-Text, Tipps

Eigenes Video

Verwende WebM (VP9 oder VP8) – MP4 mit H.264 kann FiveM nicht abspielen. Empfehlung: 1920×1080, 30 fps, möglichst unter 10 MB (Spieler laden die Dateien beim Verbinden herunter). Umwandeln z. B. mit HandBrake (Voreinstellung „WebM“) oder ffmpeg:

ffmpeg -i video.mp4 -c:v libvp9 -b:v 5M -an loop.webm

Datei nach html/media/ legen und eintragen, z. B. loop: "media/mein-video.webm". Nur ein Video? intro: "" setzen und das Video als loop verwenden. Statt eines Videos geht auch ein Bild (.jpg, .png, .webp).

Eigene Einstellungen, die Updates überstehen

Kopiere html/custom.example.js nach html/custom.js und trag dort nur ein, was von config.js abweichen soll. Listen wie tips oder cards werden dabei komplett ersetzt.

window.PEPPER_LOADINGSCREEN_CUSTOM = {
  qr: { url: "https://discord.gg/dein-server" },
  locales: { de: { serverName: "Mein Server" }, en: { serverName: "My Server" } },
};

Multicharacter

Standardmäßig schließt FiveM den Loadingscreen automatisch. Schließt dein Multicharacter-Script ihn selbst (ShutdownLoadingScreenNui), kommentiere diese Zeile in der fxmanifest.lua ein:

loadscreen_manual_shutdown 'yes'

Befehle und Rechte

Pepper Loadingscreen hat keine Befehle, keine Tasten und keine Rechte. Er ist nur beim Verbinden sichtbar; auf dem Server gibt server/handover.lua beim Verbinden einmal Spielername und Spielerzahl an den Ladebildschirm weiter.

FAQ

Das Video ist schwarz oder fehlt?

Die Datei ist MP4 oder der Pfad ist falsch – verwende WebM (VP9/VP8) und prüfe den Pfad in config.js. Bis das Video läuft, zeigt der Loadingscreen das Standbild aus video.poster.

Es erscheint noch der alte Loadingscreen?

Entferne den anderen Loadingscreen aus server.cfg und resources und leere deinen FiveM-Cache. FiveM zeigt nur einen Loadingscreen an.

Meine Änderungen sind nicht sichtbar?

Starte die Ressource neu und verbinde dich erneut – Loadingscreens werden beim Verbinden heruntergeladen.

Der Loadingscreen schließt zu früh oder zu spät?

Schließt dein Multicharacter-Script den Loadingscreen selbst, kommentiere loadscreen_manual_shutdown 'yes' in der fxmanifest.lua ein (siehe „Multicharacter“). Ohne solches Script bleibt die Zeile auskommentiert.

Funktioniert er mit meinem Framework?

Ja. Der Loadingscreen ist Standalone und funktioniert mit ESX, QBCore, Qbox und jedem anderen Framework.

Kostet er Performance im Spiel?

Nein. Im Spiel läuft kein Script; gemessen sind 0,00 ms. Nur auf dem Server gibt ein kleines Script beim Verbinden Name und Spielerzahl weiter.

Stört er meine Warteschlange oder Whitelist?

Nein. Das Server-Script nutzt nur deferrals.handover und kein deferrals.defer(), Warteschlangen- und Whitelist-Scripts bleiben unberührt.

Begrüßung oder Spielerzahl fehlen?

Beide kommen vom Server-Script beim Verbinden. Prüfe, ob server/handover.lua unverändert im fxmanifest.lua steht und welcome.name / welcome.players auf true stehen. Ohne die Daten bleiben die Zeilen ausgeblendet.

Kann ich statt eines Videos ein Bild verwenden?

Ja. Trag einen Bildpfad (.jpg, .png, .webp) als loop ein und setze intro: "".

Wie ändere ich die Farbe und das Layout?

accentColor setzt die Akzentfarbe, layout wählt zwischen classic, center und side. Für mehr passt du html/style.css an.

Wie ändere ich Texte, Tipps und Infokarten?

Unter locales.de bzw. locales.en in config.js (oder in deiner custom.js). Mit locale: "auto" bekommt jeder Spieler Deutsch oder Englisch passend zu seiner Spielsprache.

Wie update ich Pepper Loadingscreen?

Neue Versionen erscheinen im Cfx.re Portal (Granted Assets) und werden im Discord angekündigt. Mit html/custom.js überstehen deine Einstellungen das Update; sonst html/config.js und eigene Videos aus html/media/ vorher sichern.

Support

Fragen oder Fehler? Öffne ein Ticket in unserem Discord: https://discord.gg/6NaFJWKDYu – verknüpfe deinen Kauf vorher mit /verify.

Permanent auf dem Dev-Server von Pepper Scripts getestet.

Changelog

Aktuelle Version 1.1.0: echter Ladefortschritt, Begrüßung mit Spielerzahl, Infokarten, QR-Code, drei Layouts, automatische Sprachwahl und custom.js. Alle Änderungen stehen in der CHANGELOG.md im Ressourcen-Ordner.

Fehler gefunden? Melde ihn im Discord.