Écran de chargement personnalisé pour FiveM : loadscreen, fxmanifest et shutdown

Un écran de chargement est une petite page web que les joueurs voient pendant que les fichiers du serveur se téléchargent. C'est une ressource normale avec un manifest et un fichier HTML. Ce guide couvre les fichiers, le manifest, la fermeture de l'écran vous-même et le gardant léger.

#La ressource

Créez un dossier avec le HTML et ses assets :

resources/[ui]/my_loadscreen/
  fxmanifest.lua
  index.html
  css/style.css
  js/app.js
  img/background.jpg
  audio/music.ogg

#Le fxmanifest.lua

fx_version 'cerulean'
game 'gta5'

loadscreen 'index.html'

files {
    'index.html',
    'css/style.css',
    'js/app.js',
    'img/background.jpg',
    'audio/music.ogg',
}

Deux choses importent ici :

• loadscreen 'index.html' nomme la page que FiveM affiche.
• Chaque fichier que la page utilise, y compris le HTML lui-même, doit être dans files. Un fichier qui n'est pas listé retourne un 404 et l'écran est vide ou cassé dans cette partie. Un modèle comme 'img/*' est autorisé pour lister un dossier entier.

Ajoutez-le à server.cfg :

ensure my_loadscreen

#Un index.html minimal

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Welcome to my server</h1>
  <div id="bar"><div id="fill"></div></div>
  <audio id="music" src="audio/music.ogg" autoplay loop></audio>
  <script src="js/app.js"></script>
</body>
</html>

Utilisez des chemins relatifs, comme ci-dessus. La page s'exécute dans le navigateur du jeu, donc vous pouvez utiliser du HTML, CSS et JavaScript normaux. Pour une barre de progression, la page reçoit des messages pendant le chargement du jeu :

window.addEventListener('message', (e) => {
  if (e.data.eventName === 'loadProgress') {
    document.getElementById('fill').style.width = (e.data.loadFraction * 100) + '%'
  }
})

#Une seule loadscreen

FiveM affiche un seul écran de chargement. Si deux ressources déclarent une loadscreen, une seule est utilisée, et laquelle peut changer entre les démarrages. Donc :

• Supprimez ou arrêtez n'importe quelle autre ressource d'écran de chargement de server.cfg.
• Quand vous voulez tester une nouvelle, commentez l'ancienne ligne au lieu de démarrer les deux.

#Fermer l'écran vous-même

Par défaut FiveM ferme l'écran de chargement quand la session de jeu est prête. Un script multicaractère ou spawn a souvent besoin de l'écran ouvert plus longtemps, pour cacher le monde jusqu'à ce que le personnage soit choisi. Pour cela, le manifest éteint la fermeture automatique :

loadscreen_manual_shutdown 'yes'

Ensuite un script client doit le fermer :

-- client.lua
CreateThread(function()
    -- wait until your own condition: player spawned, character chosen...
    while not NetworkIsPlayerActive(PlayerId()) do
        Wait(100)
    end

    ShutdownLoadingScreenNui()
end)

ShutdownLoadingScreenNui ferme la page NUI de votre écran de chargement. Un script qui gère la génération, comme un script multicaractère, l'appelle souvent, ou les natives derrière lui, pour vous. Vérifiez d'abord ce script, puis ajoutez votre propre appel seulement si rien d'autre ne le fait.

Attention : si vous définissez loadscreen_manual_shutdown 'yes' et que rien n'appelle l'arrêt, les joueurs restent sur l'écran de chargement pour toujours. Si cela arrive, voir joueurs bloqués sur l'écran de chargement.

#Musique et vidéo : gardez-les légères

Tout dans files est téléchargé par chaque joueur. Un écran de chargement lourd fait durer l'attente plus longtemps, ce qui est l'opposé du but.

• Musique : utilisez .ogg ou .mp3, quelques minutes au maximum, et un bitrate modéré. Une piste de 3 MB est bien, une de 60 MB ne l'est pas. Ajoutez un bouton muet, et définissez le volume bas dans le code, puisqu'un début fort ennuie les joueurs.
• Vidéo : courte et en boucle, dans .webm ou .mp4, petite résolution et bitrate bas. Encore mieux, utilisez une bonne image de fond, qui est beaucoup plus petite.
• Images : compressez-les. Un fond de 200 à 400 KB ressemble à la même chose qu'un de 8 MB sur la plupart des écrans.
• Polices et bibliothèques : mettez-les dans la ressource. Les charger depuis internet à la connexion rend la page plus lente, et cela échoue si l'hôte est en panne.

Puisque les joueurs téléchargent ces fichiers pour chaque nouvelle version, ne les changez pas souvent. Quand un joueur voit toujours l'ancienne page après une mise à jour, demandez-lui de vider le cache FiveM.

#Optionnel : un curseur

Si vous voulez que le joueur clique sur l'écran de chargement, pour les règles ou un menu, ajoutez le suivant au manifest :

loadscreen_cursor 'yes'

#Problèmes courants

• Écran vide, pas de style. Un fichier manque dans files, ou un chemin dans le HTML est faux.
• L'écran par défaut s'affiche. La ressource n'est pas démarrée, ou la ligne loadscreen manque.
• Il ne ferme jamais. Vous avez défini loadscreen_manual_shutdown 'yes' et aucun script n'appelle ShutdownLoadingScreenNui().
• La musique ne joue pas. Vérifiez le chemin du fichier et le format. Testez d'abord la page dans un navigateur normal.

#Checklist