L'ecran de chargement est la premiere chose que les joueurs voient lorsqu'ils se connectent a votre serveur FiveM. Par defaut, FiveM affiche un ecran basique, mais vous pouvez le remplacer entierement par votre propre design en HTML, CSS et JavaScript. Pensez a votre logo, une musique d'ambiance, une barre de progression et des informations sur le serveur.
Qu'est-ce qu'un ecran de chargement FiveM ?
Un ecran de chargement (loading screen) est une ressource que FiveM affiche pendant que le joueur se connecte et telecharge les fichiers du serveur. Techniquement, c'est une page web classique affichee dans un navigateur integre. Vous pouvez y mettre tout ce qui fonctionne sur un site web normal : images, animations, video, son et elements interactifs.
Structure des fichiers
Dans le dossier resources de votre serveur, creez un nouveau dossier, par exemple loadingscreen. La structure ressemble a ceci :
loadingscreen/fxmanifest.lualoadingscreen/index.htmlloadingscreen/style.cssloadingscreen/script.js(facultatif)loadingscreen/logo.png(facultatif)loadingscreen/music.mp3(facultatif)
Les anciens serveurs utilisent parfois __resource.lua au lieu de fxmanifest.lua. Les deux fonctionnent, mais fxmanifest.lua est le format actuel.
Le manifeste : fxmanifest.lua
Le fichier manifeste indique a FiveM quels fichiers appartiennent a la ressource. Creez fxmanifest.lua avec le contenu suivant :
fx_version 'cerulean'
game 'gta5'
loadscreen 'index.html'
files {
'index.html',
'style.css',
'script.js',
'logo.png',
'music.mp3'
}
La ligne loadscreen 'index.html' est essentielle : elle indique a FiveM que cette ressource est un ecran de chargement. Listez tous les fichiers necessaires dans le bloc files.
Creer un ecran de chargement simple
Creez le fichier index.html. Voici un exemple de base :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="Logo du serveur">
<h1>Bienvenue sur notre serveur</h1>
<p>Veuillez patienter, le serveur se charge...</p>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<script src="script.js"></script>
</body>
</html>
Musique et barre de progression
Ajoutez une musique de fond avec un element audio dans votre HTML :
<audio autoplay loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
Gardez le fichier musical petit (2 a 3 Mo maximum) pour que l'ecran de chargement lui-meme se charge rapidement. Pour une barre de progression, ecoutez en JavaScript l'evenement FiveM qui signale l'avancement du chargement. Ajoutez ceci dans script.js :
const fill = document.querySelector('.progress-fill');
window.addEventListener('message', (e) => {
if (e.data.eventName === 'loadProgress') {
fill.style.width = e.data.loadFraction * 100 + '%';
}
});
Envoyer sur le serveur
Envoyez le dossier complet loadingscreen dans le dossier resources de votre serveur FiveM. Cela se fait via le gestionnaire de fichiers du panneau de jeu ou par SFTP. Chez HostValues, les informations SFTP se trouvent dans l'onglet Settings de votre serveur.
Activer dans server.cfg
Ouvrez le fichier server.cfg et ajoutez la ligne suivante :
ensure loadingscreen
Placez cette ligne de preference en haut, avant les autres ressources. Redemarrez le serveur et votre ecran de chargement sera actif.
Afficher des informations du serveur
Vous pouvez egalement afficher sur l'ecran de chargement des informations comme le nom du serveur, l'adresse IP, les regles ou un lien Discord. Ajoutez-les simplement sous forme de texte ou de liens dans votre HTML. Ainsi, les joueurs savent immediatement ou ils se trouvent et comment joindre l'equipe.
Conseils pour les clients HostValues
- Utilisez le gestionnaire de fichiers du panneau de jeu pour les modifications rapides du HTML ou du CSS.
- Envoyez les fichiers plus volumineux comme la musique ou les videos par SFTP. Les informations de connexion se trouvent dans l'onglet Settings.
- Testez l'ecran de chargement en vous connectant vous-meme a votre serveur. Les modifications prennent effet immediatement apres un redemarrage.
Problemes courants et solutions
- L'ecran de chargement n'apparait pas : verifiez que la ligne
ensurefigure dansserver.cfget que le nom du dossier correspond exactement. Verifiez aussi quefxmanifest.luacontient la ligneloadscreen 'index.html'. - Les fichiers ne se chargent pas : tous les fichiers utilises par la page doivent etre listes dans le bloc
filesdu manifeste. N'oubliez pas les images et les polices. - La musique ne joue pas : certains navigateurs bloquent la lecture automatique. FiveM autorise l'autoplay par defaut, mais verifiez que le chemin et le nom du fichier sont corrects.
- Ecran blanc : ouvrez
index.htmllocalement dans votre navigateur pour verifier les erreurs HTML. Une balise manquante ou un mauvais chemin vers le fichier CSS provoque souvent un ecran vide.
Vous bloquez quelque part ? Ouvrez un ticket de support, notre equipe vous aide volontiers.