Der Ladebildschirm ist das Erste, was Spieler sehen, wenn sie sich mit Ihrem FiveM-Server verbinden. Standardmaessig zeigt FiveM einen einfachen Bildschirm, aber Sie koennen ihn vollstaendig durch ein eigenes Design mit HTML, CSS und JavaScript ersetzen. Denken Sie an Ihr Serverlogo, Hintergrundmusik, einen Fortschrittsbalken und Serverinformationen.
Was ist ein FiveM-Ladebildschirm?
Ein Ladebildschirm (Loading Screen) ist eine Resource, die FiveM anzeigt, waehrend der Spieler sich verbindet und alle Serverdateien heruntergeladen werden. Technisch handelt es sich um eine normale Webseite, die in einem eingebetteten Browser dargestellt wird. Sie koennen alles verwenden, was auf einer normalen Website funktioniert: Bilder, Animationen, Video, Audio und interaktive Elemente.
Dateistruktur
Erstellen Sie im Ordner resources Ihres Servers einen neuen Ordner, zum Beispiel loadingscreen. Die Struktur sieht so aus:
loadingscreen/fxmanifest.lualoadingscreen/index.htmlloadingscreen/style.cssloadingscreen/script.js(optional)loadingscreen/logo.png(optional)loadingscreen/music.mp3(optional)
Aeltere Server verwenden manchmal __resource.lua statt fxmanifest.lua. Beides funktioniert, aber fxmanifest.lua ist das aktuelle Format.
Das Manifest: fxmanifest.lua
Die Manifestdatei teilt FiveM mit, welche Dateien zur Resource gehoeren. Erstellen Sie fxmanifest.lua mit folgendem Inhalt:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'script.js',
'logo.png',
'music.mp3'
}
Die Zeile loadscreen 'index.html' ist entscheidend: Sie teilt FiveM mit, dass diese Resource ein Ladebildschirm ist. Listen Sie alle Dateien, die die Seite benoetigt, im files-Block auf.
Einen einfachen Ladebildschirm erstellen
Erstellen Sie die Datei index.html. Hier ein Grundbeispiel:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Server-Logo">
<h1>Willkommen auf unserem Server</h1>
<p>Bitte warten, der Server wird geladen...</p>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<script src="script.js"></script>
</body>
</html>
Musik und Fortschrittsbalken
Fuegen Sie Hintergrundmusik mit einem Audio-Element in Ihrem HTML hinzu:
<audio autoplay loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
Halten Sie die Musikdatei klein (maximal 2 bis 3 MB), damit der Ladebildschirm selbst schnell geladen wird. Fuer einen Fortschrittsbalken lauschen Sie in JavaScript auf das FiveM-Event, das den Ladefortschritt meldet. Fuegen Sie Folgendes in script.js ein:
const fill = document.querySelector('.progress-fill');
window.addEventListener('message', (e) => {
if (e.data.eventName === 'loadProgress') {
fill.style.width = e.data.loadFraction * 100 + '%';
}
});
Auf den Server hochladen
Laden Sie den vollstaendigen Ordner loadingscreen in den Ordner resources Ihres FiveM-Servers hoch. Das geht ueber den Dateimanager im Gamepanel oder per SFTP. Bei HostValues finden Sie die SFTP-Zugangsdaten im Tab Settings Ihres Servers.
In server.cfg aktivieren
Oeffnen Sie die Datei server.cfg und fuegen Sie folgende Zeile hinzu:
ensure loadingscreen
Platzieren Sie diese Zeile moeglichst weit oben, vor den anderen Resources. Starten Sie den Server neu, und der Ladebildschirm ist aktiv.
Serverinformationen anzeigen
Sie koennen auf dem Ladebildschirm auch Informationen wie den Servernamen, die IP-Adresse, Regeln oder einen Discord-Link anzeigen. Fuegen Sie diese einfach als Text oder Links in Ihr HTML ein. So wissen Spieler sofort, wo sie gelandet sind und wie sie das Team erreichen.
Tipps fuer HostValues-Kunden
- Nutzen Sie den Dateimanager im Gamepanel fuer schnelle Aenderungen an HTML- oder CSS-Dateien.
- Groessere Dateien wie Musik oder Video laden Sie per SFTP hoch. Die Verbindungsdaten finden Sie im Tab Settings.
- Testen Sie den Ladebildschirm, indem Sie sich selbst mit Ihrem Server verbinden. Aenderungen sind nach einem Neustart sofort sichtbar.
Haeufige Probleme und Loesungen
- Ladebildschirm erscheint nicht: Pruefen Sie, ob die
ensure-Zeile inserver.cfgsteht und ob der Ordnername exakt uebereinstimmt. Stellen Sie auch sicher, dassfxmanifest.luadie Zeileloadscreen 'index.html'enthaelt. - Dateien werden nicht geladen: Alle Dateien, die die Seite verwendet, muessen im
files-Block des Manifests aufgelistet sein. Vergessen Sie auch Bilder und Schriftarten nicht. - Musik spielt nicht ab: Manche Browser blockieren Autoplay. FiveM erlaubt Autoplay standardmaessig, aber pruefen Sie, ob Pfad und Dateiname korrekt sind.
- Weisser Bildschirm: Oeffnen Sie
index.htmllokal in Ihrem Browser, um nach HTML-Fehlern zu suchen. Ein fehlender Tag oder ein falscher Pfad zur CSS-Datei verursacht oft einen leeren Bildschirm.
Kommen Sie nicht weiter? Oeffnen Sie ein Support-Ticket, unser Team hilft Ihnen gerne.