Het laadscherm is het eerste wat spelers zien wanneer zij verbinden met uw FiveM server. Standaard toont FiveM een eenvoudig scherm, maar u kunt dit volledig vervangen door een eigen ontwerp met HTML, CSS en JavaScript. Denk aan uw serverlogo, muziek, een voortgangsbalk en serverinformatie.
Wat is een FiveM laadscherm?
Een laadscherm (loading screen) is een resource die FiveM toont terwijl de speler verbindt en alle serverbestanden downloadt. Technisch is het een gewone webpagina die in een ingebedde browser wordt weergegeven. U kunt er alles in kwijt wat in een normale website past: afbeeldingen, animaties, video, geluid en interactieve elementen.
Bestandsstructuur
Maak in de map resources van uw server een nieuwe map aan, bijvoorbeeld loadingscreen. De structuur ziet er zo uit:
loadingscreen/fxmanifest.lualoadingscreen/index.htmlloadingscreen/style.cssloadingscreen/script.js(optioneel)loadingscreen/logo.png(optioneel)loadingscreen/music.mp3(optioneel)
Oudere servers gebruiken soms __resource.lua in plaats van fxmanifest.lua. Beide werken, maar fxmanifest.lua is het huidige formaat.
Het manifest: fxmanifest.lua
Het manifestbestand vertelt FiveM welke bestanden bij de resource horen. Maak het bestand fxmanifest.lua aan met de volgende inhoud:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'script.js',
'logo.png',
'music.mp3'
}
De regel loadscreen 'index.html' is essentieel: die vertelt FiveM dat dit een laadscherm is. Vermeld in de files-lijst alle bestanden die de pagina nodig heeft.
Een eenvoudig laadscherm maken
Maak het bestand index.html aan. Hieronder een basisvoorbeeld:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Server logo">
<h1>Welkom op onze server</h1>
<p>Even geduld, de server wordt geladen...</p>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<script src="script.js"></script>
</body>
</html>
Muziek en voortgangsbalk
Voeg achtergrondmuziek toe met een audio-element in uw HTML:
<audio autoplay loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
Houd het muziekbestand klein (maximaal 2 tot 3 MB) zodat het laadscherm zelf snel laadt. Voor een voortgangsbalk luistert u in JavaScript naar het FiveM-event dat de voortgang doorgeeft. Voeg het volgende toe aan script.js:
const fill = document.querySelector('.progress-fill');
window.addEventListener('message', (e) => {
if (e.data.eventName === 'loadProgress') {
fill.style.width = e.data.loadFraction * 100 + '%';
}
});
Uploaden naar de server
Upload de volledige map loadingscreen naar de map resources van uw FiveM server. Dit kan via de bestandsbeheerder in het gamepanel of via SFTP. Bij HostValues vindt u de SFTP-gegevens in het tabblad Settings van uw server.
Activeren in server.cfg
Open het bestand server.cfg en voeg de volgende regel toe:
ensure loadingscreen
Zet deze regel bij voorkeur bovenaan, voor de overige resources. Herstart de server en het laadscherm is actief.
Serverinformatie tonen
U kunt op het laadscherm ook informatie tonen zoals de servernaam, het IP-adres, de regels of een Discord-link. Plaats deze gewoon als tekst of links in uw HTML. Zo weten spelers direct waar zij terechtkomen en hoe zij contact opnemen met het team.
Tips voor HostValues-klanten
- Gebruik de bestandsbeheerder in het gamepanel voor kleine aanpassingen aan de HTML of CSS.
- Upload grotere bestanden zoals muziek of video via SFTP. De verbindingsgegevens staan in het tabblad Settings.
- Test het laadscherm door zelf te verbinden met uw server. Wijzigingen zijn direct zichtbaar na een herstart.
Veelvoorkomende problemen
- Laadscherm verschijnt niet: controleer of de
ensure-regel inserver.cfgstaat en of de mapnaam exact overeenkomt. Controleer ook offxmanifest.luade regelloadscreen 'index.html'bevat. - Bestanden laden niet: alle bestanden die de pagina gebruikt moeten in de
files-lijst van het manifest staan. Vergeet ook afbeeldingen en lettertypes niet. - Muziek speelt niet af: sommige browsers blokkeren autoplay. FiveM staat autoplay standaard toe, maar controleer of het pad en de bestandsnaam kloppen.
- Wit scherm: open
index.htmllokaal in uw browser om te controleren op HTML-fouten. Een ontbrekende tag of een verkeerd pad naar de CSS veroorzaakt vaak een leeg scherm.
Komt u er niet uit? Open een supportticket, ons team helpt u graag verder.