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 de solution de secours héritée __resource.lua Les directives sont définies dans la référence officielle du manifeste de ressource. référence du manifeste de ressource.

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 dépôt officiel guide de l'écran de chargement Cfx.re documente loadProgress et les autres événements exposés à cette frame NUI. Traitez les données d'événement comme une entrée et mettez à jour le texte avec textContent, pas innerHTML.

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

Un gestionnaire côté serveur playerConnecting peut transmettre de petites valeurs avec deferrals.handover. FiveM les expose en tant que window.nuiHandoverData. Utilisez ceci pour afficher des valeurs telles qu'un nom de joueur ; n'incluez jamais de secrets, de jetons, d'identifiants privés ou de données qui accordent un droit. Insérez des valeurs contrôlées par le joueur 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

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