Benutzerdefinierter Ladebildschirm für FiveM: loadscreen, fxmanifest und Herunterfahren

Ein Ladebildschirm ist eine kleine Webseite, die Spieler sehen, während die Dateien des Servers heruntergeladen werden. Es ist eine normale Ressource mit einem Manifest und einer HTML-Datei. Dieser Leitfaden behandelt die Dateien, das Manifest, das Schließen des Bildschirms selbst und das Halten leicht.

#Die Ressource

Erstelle einen Ordner mit der HTML und seinen Assets:

resources/[ui]/my_loadscreen/
  fxmanifest.lua
  index.html
  css/style.css
  js/app.js
  img/background.jpg
  audio/music.ogg

#Die fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

loadscreen 'index.html'

files {
    'index.html',
    'css/style.css',
    'js/app.js',
    'img/background.jpg',
    'audio/music.ogg',
}

Zwei Dinge sind hier wichtig:

• loadscreen 'index.html' nennt die Seite, die FiveM zeigt.
• Jede Datei, die die Seite verwendet, einschließlich der HTML selbst, muss in files sein. Eine Datei, die nicht aufgelistet ist, gibt 404 zurück und der Bildschirm ist leer oder in diesem Teil kaputt. Ein Muster wie 'img/*' ist erlaubt um einen ganzen Ordner aufzulisten.

Füge es zu server.cfg hinzu:

ensure my_loadscreen

#Ein minimales index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Welcome to my server</h1>
  <div id="bar"><div id="fill"></div></div>
  <audio id="music" src="audio/music.ogg" autoplay loop></audio>
  <script src="js/app.js"></script>
</body>
</html>

Verwende relative Pfade, wie oben. Die Seite läuft im Spiel-Browser, daher kannst du normales HTML, CSS und JavaScript verwenden. Für einen Fortschrittsbalken empfängt die Seite Nachrichten, während das Spiel lädt:

window.addEventListener('message', (e) => {
  if (e.data.eventName === 'loadProgress') {
    document.getElementById('fill').style.width = (e.data.loadFraction * 100) + '%'
  }
})

#Nur ein Ladebildschirm

FiveM zeigt einen einzelnen Ladebildschirm. Falls zwei Ressourcen einen loadscreen deklarieren, wird nur einer verwendet, und welcher kann sich zwischen Starts ändern. Also:

• Entferne oder stoppe jede andere Ladebildschirm-Ressource aus server.cfg.
• Wenn du einen neuen testen möchtest, kommentiere die alte Zeile aus, anstatt beide zu starten.

#Schließe den Bildschirm selbst

Standardmäßig schließt FiveM den Ladebildschirm, wenn die Spiel-Sitzung bereit ist. Ein Multi-Charakter- oder Spawn-Skript braucht den Bildschirm oft länger offen, um die Welt zu verbergen, bis der Charakter gewählt ist. Dafür schaltet das Manifest die automatische Schließung aus:

loadscreen_manual_shutdown 'yes'

Dann muss ein Client-Skript ihn schließen:

-- client.lua
CreateThread(function()
    -- wait until your own condition: player spawned, character chosen...
    while not NetworkIsPlayerActive(PlayerId()) do
        Wait(100)
    end

    ShutdownLoadingScreenNui()
end)

ShutdownLoadingScreenNui schließt die NUI-Seite deines Ladebildschirms. Ein Skript, das den Spawn handhabt, wie ein Multi-Charakter-Skript, ruft es oft auf, oder die dahinter stehenden Native für dich. Überprüfe dieses Skript zuerst, dann füge deinen eigenen Aufruf nur hinzu, falls nichts anderes es tut.

Achtung: Falls du loadscreen_manual_shutdown 'yes' einstellst und nichts ruft das Herunterfahren auf, bleiben Spieler für immer auf dem Ladebildschirm. Falls das passiert, siehe Spieler hängen auf dem Ladebildschirm fest.

#Musik und Video: halte sie leicht

Alles in files wird von jedem Spieler heruntergeladen. Ein schwerer Ladebildschirm macht das Warten länger, was das Gegenteil des Ziels ist.

• Musik: Verwende .ogg oder .mp3, höchstens ein paar Minuten, und eine moderate Bitrate. Ein 3 MB-Track ist in Ordnung, ein 60 MB-Track nicht. Füge einen Stumm-Schalter hinzu und stelle die Lautstärke im Code niedrig, da ein lauter Start Spieler ärgert.
• Video: kurz und in Schleife, in .webm oder .mp4, kleine Auflösung und niedrige Bitrate. Noch besser ist es, ein gutes Hintergrundbild zu verwenden, das viel kleiner ist.
• Bilder: komprimiere sie. Ein Hintergrund von 200 bis 400 KB sieht auf den meisten Bildschirmen gleich aus wie einer von 8 MB.
• Schriftarten und Bibliotheken: lege sie in die Ressource. Lade sie vom Internet beim Beitritt macht die Seite langsamer und schlägt fehl, wenn der Host unten ist.

Da Spieler diese Dateien für jede neue Version herunterladen, ändere sie nicht oft. Wenn ein Spieler nach einer Aktualisierung immer noch die alte Seite sieht, ask sie zu den FiveM-Cache löschen.

#Optional: ein Cursor

Falls du möchtest, dass der Spieler auf den Ladebildschirm klickt, für Regeln oder ein Menü, füge folgendes zum Manifest hinzu:

loadscreen_cursor 'yes'

#Häufige Probleme

• Leerer Bildschirm, kein Stil. Eine Datei fehlt in files oder ein Pfad in der HTML ist falsch.
• Der Standard-Bildschirm wird angezeigt. Die Ressource wird nicht gestartet oder die Zeile loadscreen fehlt.
• Es schließt nie. Du hast loadscreen_manual_shutdown 'yes' eingestellt und kein Skript ruft ShutdownLoadingScreenNui() auf.
• Musik spielt nicht. Überprüfe den Dateipfad und das Format. Teste die Seite zunächst in einem normalen Browser.

#Checkliste