Loading screenen er det foerste, spillere ser, naar de forbinder til din FiveM-server. Som standard viser FiveM en simpel skaerm, men du kan erstatte den helt med dit eget design i HTML, CSS og JavaScript. Taenk paa dit serverlogo, baggrundsmusik, en fremskridtsbjealke og serverinformation.
Hvad er en FiveM-loading screen?
En loading screen er en resource, som FiveM viser, mens spilleren forbinder og downloader alle serverfiler. Teknisk set er det en almindelig webside, der vises i en indlejret browser. Du kan bruge alt, der virker paa en normal hjemmeside: billeder, animationer, video, lyd og interaktive elementer.
Filstruktur
Opret i mappen resources paa din server en ny mappe, for eksempel loadingscreen. Strukturen ser saadan ud:
loadingscreen/fxmanifest.lualoadingscreen/index.htmlloadingscreen/style.cssloadingscreen/script.js(valgfrit)loadingscreen/logo.png(valgfrit)loadingscreen/music.mp3(valgfrit)
Aeldre servere bruger undertiden __resource.lua i stedet for fxmanifest.lua. Begge virker, men fxmanifest.lua er det aktuelle format.
Manifestet: fxmanifest.lua
Manifestfilen fortaeller FiveM, hvilke filer der hoerer til resourcen. Opret fxmanifest.lua med foelgende indhold:
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'script.js',
'logo.png',
'music.mp3'
}
Linjen loadscreen 'index.html' er afgoerende: den fortaeller FiveM, at denne resource er en loading screen. List alle filer, siden har brug for, i files-blokken.
Opret en simpel loading screen
Opret filen index.html. Her er et grundlaeggende eksempel:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Serverlogo">
<h1>Velkommen til vores server</h1>
<p>Vent venligst, serveren indlaeses...</p>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<script src="script.js"></script>
</body>
</html>
Musik og fremskridtsbjealke
Tilfoej baggrundsmusik med et audio-element i din HTML:
<audio autoplay loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
Hold musikfilen lille (hoejst 2 til 3 MB), saa loading screenen selv indlaeses hurtigt. Til en fremskridtsbjealke lytter du i JavaScript paa FiveM-eventen, der rapporterer indlaesningsfremskridt. Tilfoej foelgende i script.js:
const fill = document.querySelector('.progress-fill');
window.addEventListener('message', (e) => {
if (e.data.eventName === 'loadProgress') {
fill.style.width = e.data.loadFraction * 100 + '%';
}
});
Upload til serveren
Upload den komplette mappe loadingscreen til mappen resources paa din FiveM-server. Det kan du goere via filhaandteringen i gamepanelet eller via SFTP. Hos HostValues finder du SFTP-oplysningerne under fanen Settings paa din server.
Aktiver i server.cfg
Aabn filen server.cfg, og tilfoej foelgende linje:
ensure loadingscreen
Placer linjen helst oeverst, foer de andre resources. Genstart serveren, og din loading screen er aktiv.
Vis serverinformation
Du kan ogsaa vise information som servernavn, IP-adresse, regler eller et Discord-link paa loading screenen. Tilfoej dem blot som tekst eller links i din HTML. Saa ved spillerne med det samme, hvor de er, og hvordan de kontakter teamet.
Tips til HostValues-kunder
- Brug filhaandteringen i gamepanelet til hurtige aendringer i HTML- eller CSS-filer.
- Upload stoerre filer som musik eller video via SFTP. Forbindelsesoplysningerne staar under fanen Settings.
- Test loading screenen ved at forbinde til din egen server. Aendringer traeder i kraft med det samme efter en genstart.
Almindelige problemer og loesninger
- Loading screenen vises ikke: tjek, at
ensure-linjen staar iserver.cfg, og at mappenavnet stemmer praecis. Tjek ogsaa, atfxmanifest.luaindeholder linjenloadscreen 'index.html'. - Filer indlaeses ikke: alle filer, siden bruger, skal vaere listet i
files-blokken i manifestet. Glem heller ikke billeder og skrifttyper. - Musik afspilles ikke: nogle browsere blokerer autoplay. FiveM tillader autoplay som standard, men dobbelttjek, at stien og filnavnet er korrekte.
- Hvid skaerm: aabn
index.htmllokalt i din browser for at tjekke for HTML-fejl. En manglende tag eller en forkert sti til CSS-filen foraarsager ofte en blank skaerm.
Sidder du fast? Opret en supportticket, vores team hjaelper dig gerne videre.
Tip: hos HostValues kan du leje en FiveM server og være online på få minutter.