Het standaard FiveM-laadscherm is functioneel maar saai. Een custom laadscherm geeft je server direct een professionele uitstraling. Spelers zien het als eerste wanneer ze verbinden, dus het is je kans om een goede indruk te maken. In dit artikel laten we zien hoe je er een bouwt en installeert.
Hoe werkt een FiveM laadscherm?
Een laadscherm is een simpele webpagina (HTML, CSS, JavaScript) die FiveM toont terwijl de server resources laadt. Het is een resource op je server met een speciaal type: loadscreen. FiveM injecteert de pagina in een ingebouwde browser.
Een laadscherm maken
Maak een nieuwe map in je resources/-map, bijvoorbeeld [loadscreen]/mijn-loadscreen. Je hebt twee bestanden nodig:
fxmanifest.lua:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'logo.png'
}
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Server Logo">
<h1>Mijn RP Server</h1>
<p>Laden...</p>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
</div>
<script>
var count = 0, total = 1;
window.addEventListener('message', function(e) {
if (e.data.eventName === 'loadProgress') {
count = e.data.loadFraction;
document.getElementById('progress').style.width = Math.floor(count * 100) + '%';
}
});
</script>
</body>
</html>
Styling
Gebruik CSS om je laadscherm vorm te geven. Populaire elementen:
- Een achtergrondafbeelding of video van de stad
- Je serverlogo gecentreerd
- Een voortgangsbalk die de laadstatus toont
- Serverregels of tips als scrollende tekst
- Social media links (Discord, website)
Houd de bestandsgrootte klein. Grote afbeeldingen vertragen het laden van het laadscherm zelf. Gebruik WebP voor afbeeldingen en comprimeer video's.
Installeren op je server
- Upload de map naar
resources/[loadscreen]/. - Voeg in
server.cfgtoe:ensure mijn-loadscreen. - Herstart de server.
Het laadscherm verschijnt automatisch wanneer een speler verbindt.
Muziek toevoegen
Voeg een audiobestand toe aan je resource en speel het af in JavaScript:
var audio = new Audio('music.mp3');
audio.volume = 0.3;
audio.loop = true;
audio.play();
Houd het volume laag (0.2 tot 0.4) en kies rustige achtergrondmuziek. Luide muziek bij het verbinden schrikt spelers af.
Kant-en-klare laadschermen
Wil je niet zelf bouwen? Er zijn gratis en betaalde laadschermen beschikbaar:
- CFX Forum releases: gratis community-laadschermen.
- Tebex: betaalde premium laadschermen met geavanceerde functies.
Pas de kleuren, logo en tekst aan naar je server.
Kan ik een video als achtergrond gebruiken?
Ja. Gebruik een HTML5 <video>-element met autoplay, muted en loop. Houd de video onder 10 MB en gebruik MP4 met H.264-codering voor de beste compatibiliteit.
Waarom zie ik mijn laadscherm niet?
Controleer: staat de resource in server.cfg met ensure? Klopt het pad in fxmanifest.lua? Is loadscreen correct gespeld? Check de F8-console voor foutmeldingen.
Kan ik de laadvoortgang tonen?
Ja. FiveM stuurt loadProgress-events naar de pagina. Gebruik het JavaScript-voorbeeld hierboven om een voortgangsbalk te vullen op basis van de werkelijke laadstatus.
Stel je custom laadscherm in op een FiveM server bij HostValues met volledige bestandstoegang.
