Comment créer un écran de chargement FiveM

Un écran de chargement FiveM actuel est une ressource NUI déclarée avec loadscreen dans fxmanifest.lua. Gardez la première version locale et petite : un document HTML, une feuille de style et un script. Ajoutez des données de progression ou de transfert serveur uniquement après que l'écran de base s'ouvre et se ferme correctement.

Les exemples de configuration et de code ici ciblent FiveM pour GTA V Legacy. Enhanced a des règles d'exécution et de compatibilité différentes ; vérifiez les changements Legacy-to-Enhanced de Cfx.re avant de les appliquer à un serveur Enhanced.

Sauvegardez la ressource existante et conservez d'abord l'arrêt automatique par défaut. Un script d'arrêt manuel défectueux peut laisser les joueurs devant l'écran de chargement une fois le jeu prêt.

Structure de la ressource

resources/[local]/my_loadscreen/
├── fxmanifest.lua
└── html/
    ├── index.html
    ├── style.css
    └── app.js

fxmanifest.lua:

fx_version 'cerulean'
game 'gta5'

author 'Your name'
description 'FiveM loading screen'
version '1.0.0'

loadscreen 'html/index.html'

files {
    'html/index.html',
    'html/style.css',
    'html/app.js'
}

Les nouvelles ressources doivent utiliser fxmanifest.lua. N’ajoutez pas d’ancien fichier __resource.lua comme solution de repli. Les directives sont définies dans la référence officielle des manifestes de ressources.

Créez du HTML accessible

html/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Connecting to Example RP</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>Connecting to Example RP</h1>
    <progress id="progress" value="0" max="1" aria-label="Loading progress"></progress>
    <p id="status" aria-live="polite">Loading server resources…</p>
  </main>
  <script src="app.js"></script>
</body>
</html>

Utilisez du texte qui reste lisible sur l'arrière-plan, respecte la réduction de mouvement et ne dépend pas de l'audio en lecture automatique. Compressez les images et les vidéos avant de les empaqueter ; chaque client doit télécharger la ressource.

Ajoutez la feuille de style

Enregistrez ceci sous le nom html/style.css; elle fournit la feuille de style référencée par le HTML :

body { margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: #15212b; color: #fff; font: 20px/1.6 system-ui; }
main { width: min(620px, 85vw); }
progress { width: 100%; height: 20px; accent-color: #6cd6ba; }

Lisez l'événement de progression du chargement documenté

html/app.js:

const progress = document.getElementById('progress');
const status = document.getElementById('status');

window.addEventListener('message', (event) => {
  if (event.data?.eventName !== 'loadProgress') return;

  const value = Number(event.data.loadFraction);
  if (!Number.isFinite(value)) return;

  const clamped = Math.max(0, Math.min(1, value));
  progress.value = clamped;
  status.textContent = `Loading ${Math.round(clamped * 100)}%`;
});

Le guide officiel Cfx.re des écrans de chargement décrit loadProgress et les autres événements exposés à ce cadre NUI. Traitez les données des événements comme des entrées et mettez le texte à jour avec textContent, et non innerHTML.

Transmettez uniquement des données de transfert sécurisées

Un gestionnaire playerConnecting côté serveur peut transmettre de petites valeurs avec deferrals.handover. FiveM les expose dans window.nuiHandoverData. Utilisez ce mécanisme pour des valeurs d’affichage comme le nom d’un joueur ; n’incluez jamais de secrets, de jetons, d’identifiants privés ni de données accordant un droit d’accès. Insérez les valeurs contrôlées par les joueurs avec textContent ou innerText.

Activez l'arrêt manuel uniquement lorsque nécessaire

Si l'écran doit s'estomper après le démarrage des scripts client, ajoutez ces lignes :

loadscreen_manual_shutdown 'yes'
client_script 'client.lua'

L'exemple ci-dessous le ferme depuis client.lua lorsque la session réseau démarre. Si votre framework nécessite d'abord la sélection du personnage, utilisez plutôt son signal de prêt documenté :

CreateThread(function()
    while not NetworkIsSessionStarted() do
        Wait(100)
    end

    ShutdownLoadingScreenNui()
end)

Testez les reconnexions, les redémarrages de ressources et un client lent. Si l'écran peut rester bloqué, supprimez loadscreen_manual_shutdown et le script client pour revenir à la gestion automatique du cycle de vie.

Déployez et vérifiez

Ajouter ensure my_loadscreen à l'emplacement souhaité dans server.cfg.
Utilisez refresh et ensure my_loadscreen sur un serveur de développement.
Connectez-vous avec un client propre et inspectez la console F8 ainsi que la console du serveur.
Testez une connexion lente, une reconnexion, une connexion annulée et un redémarrage du serveur.
Vérifiez les résolutions de bureau courantes et un client peu performant avant de remplacer la ressource de production.