Retour au blog
Scripts8 min de lecture

Agency-Loadingscreen : les cinq premières secondes de ton serveur valent de l’or

Pourquoi l’écran de chargement est l’élément le plus sous-estimé d’un serveur FiveM et comment Agency-Loadingscreen le gère.

Agency Scripts

Fondateur et développeur principal chez Agency Scripts

La première impression compte

Chaque nouveau joueur qui rejoint ton serveur passe 30 à 90 secondes devant l’écran de chargement avant de voir quoi que ce soit d’autre. C’est plus long que la plupart des séquences de tutoriel. L’écran de chargement par défaut de GTA V ne leur apprend rien sur ton serveur, un excellent écran leur apprend tout. Agency-Loadingscreen a été conçu autour de cette idée.

Ce que nous proposons

Une interface soignée au style glassmorphism qui affiche les règles du serveur, le lien Discord, la liste du personnel et une image principale qui change régulièrement. Lecteur de musique personnalisé avec contrôle du volume. Statistiques du serveur en miniature : population actuelle, durée de fonctionnement, prochain événement. Transitions fluides une fois le chargement terminé. Le tout aux couleurs de ton serveur, grâce à une seule configuration.

Pourquoi la musique compte

Le son diffusé pendant le chargement donne le ton émotionnel. Du hip-hop lo-fi pour les serveurs RP décontractés, de la synthwave pour les serveurs à thème cyberpunk, de l’ambiant cinématique pour les communautés RP sérieuses. Les joueurs se mettent inconsciemment dans l’ambiance avant même d’apparaître en jeu. Nous proposons une bibliothèque de morceaux intégrée et une option de configuration pour utiliser ton propre CDN audio.

Performances

L’écran de chargement s’exécute dans le navigateur avant le chargement des ressources du jeu, les performances dépendent donc du poids de la page. Agency-Loadingscreen pèse moins de 400KB au total, polices incluses. Il se charge instantanément, même avec une connexion lente, ce qui compte puisque certains de tes joueurs disposent d’une connexion rurale à 50Mbps.

Tests A/B pour les administrateurs

Le panneau d’administration comprend un mode de test A/B simple : configure deux variantes d’écran de chargement et nous en afficherons une à 50% des nouveaux joueurs, tout en suivant le nombre de joueurs qui arrivent jusqu’à leur apparition en jeu pour chaque variante. C’est le type d’outil d’optimisation utilisé par les serveurs professionnels pour peaufiner leur parcours de première impression.

Installation & configuration

Agency-Loadingscreen est une ressource client autonome, sans dépendance à une base de données. Télécharge-la sur Tebex, dépose le dossier dans ton répertoire resources et ajoute ensure agency-loadingscreen à server.cfg . La ressource doit se charger tôt, place-la avant la ressource principale de ton framework dans server.cfg pour qu’elle s’affiche avant le début du chargement des ressources du jeu.

Toute la personnalisation se fait dans config.lua et le html/config.js fichier. Les éléments de marque de ton serveur (nom, couleurs, logo, texte des règles, liste du personnel, lien Discord) se trouvent dans config.js. Aucune connaissance en développement web n’est nécessaire, la configuration est un objet JavaScript simple avec des noms de champs clairs.

Options de configuration

La configuration couvre les paramètres visuels, le contenu et les performances :

  • Nom du serveur et slogan, affichés bien en évidence dans la section principale.
  • Palette de couleurs, couleurs principale, secondaire et d’accent au format hexadécimal. Appliquées globalement au texte, aux bordures et aux boutons.
  • URL du logo, le logo de ton serveur affiché dans un coin. SVG et WebP recommandés pour une image nette.
  • Images principales, jusqu’à 10 images alternées avec un intervalle de transition et un effet de fondu configurables.
  • Règles du serveur, texte au format markdown affiché dans le panneau des règles. Prise en charge des titres, des listes et du texte en gras.
  • Morceaux de musique, liste d’URL audio avec option de lecture aléatoire. Les joueurs peuvent couper le son ou régler le volume à l’aide d’un contrôle discret.
  • Statistiques en direct, active l’affichage du nombre actuel de joueurs, de la durée de fonctionnement du serveur et du prochain événement programmé.
  • Tests A/B, active la configuration de la variante B et le suivi de la répartition 50/50.

Compatibilité avec les frameworks

Agency-Loadingscreen s’exécute entièrement dans la couche du navigateur, avant l’initialisation de toute ressource FiveM. Il ne dépend d’aucun framework et fonctionne de la même manière sur les serveurs QBCore, ESX et standalone. La statistique du nombre de joueurs en ligne récupère les données depuis le point de terminaison d’informations du serveur FiveM, indépendamment du framework.

Pourquoi c’est important pour le roleplay

L’écran de chargement est un rituel de passage. Les joueurs le traversent à chaque session, c’est le moment entre « Je lance le jeu » et « Je suis dans le monde ». Un écran qui met ce temps à profit pour immerger les joueurs dans l’esthétique et les règles de ton serveur fixe les attentes avant leur apparition en jeu. Les joueurs qui lisent les règles sur l’écran de chargement sont moins susceptibles de prétendre qu’ils ne les connaissaient pas. Les joueurs qui entendent la bonne musique arrivent dans le bon état d’esprit.

La fidélisation des nouveaux joueurs échoue souvent dès la première session. Si les soixante premières secondes d’un nouveau joueur sur ton serveur se résument à un écran vide ou à une image de chargement GTA V générique, tu as gâché un moment où il est particulièrement attentif. Agency-Loadingscreen transforme ce moment en espace de promotion active du serveur : invitation Discord, noms du personnel, événements à venir, identité visuelle du serveur.

La fonctionnalité de test A/B existe parce que l’optimisation de l’écran de chargement est mesurable. Si la variante A affiche ton lien Discord de façon bien visible, contrairement à la variante B, et que les nouveaux joueurs de la variante A rejoignent Discord deux fois plus souvent, tu as un résultat concret sur lequel agir. Les serveurs gérés de manière professionnelle s’appuient sur les données ; voici un cas où les données de l’écran de chargement peuvent réellement être collectées.

Questions fréquentes

Puis-je afficher l’événement actuel sur la carte ou le scénario de roleplay en cours sur l’écran de chargement ?

Oui. Le panneau de statistiques en temps réel prend en charge un champ de texte personnalisé qui peut être mis à jour via le point de terminaison HTTP du serveur. Lance un petit script serveur qui transmet l’état de l’événement au point de terminaison toutes les quelques minutes, et l’écran de chargement l’affichera en temps réel. C’est ainsi que les serveurs informent les joueurs qui les rejoignent des événements en cours avant leur apparition en jeu.

La musique se lance-t-elle automatiquement malgré les politiques de lecture automatique des navigateurs ?

Le navigateur intégré de FiveM fonctionne dans un contexte où les restrictions de lecture automatique ne s’appliquent pas. Il ne s’agit pas d’un onglet de navigateur standard qui exige une interaction de l’utilisateur. La musique se lance automatiquement de façon fiable. Les joueurs disposent d’une commande de désactivation du son dans un coin, par courtoisie, et non comme solution de contournement.

Comment suivre les résultats des tests A/B ?

Active le point de terminaison de suivi A/B dans config.js et indique l’adresse de ton serveur d’analyse ou d’un simple webhook. Chaque variante est identifiée et l’événement de connexion est déclenché à la fermeture de l’écran de chargement. Compare le taux d’adhésion à Discord, la durée de la première session ou tout autre indicateur important pour ton serveur entre les deux groupes.

Puis-je afficher une vidéo au lieu d’images qui défilent ?

Oui. Définis heroType: 'video' et indique une URL vidéo. La vidéo est lue sans son et en boucle. Garde les fichiers vidéo sous 20MB pour garantir des performances de chargement acceptables sur les connexions lentes. Le format WebM en 720p est l’encodage recommandé pour ce cas d’utilisation.

Prérequis

  • Serveur FiveM (n’importe quel framework ou standalone)
  • Compte cfx.re avec une licence Agency-Loadingscreen valide
  • Hébergement audio et images (CDN, Discord CDN ou ton propre serveur)
  • Aucune dépendance à une base de données

Stratégie de contenu pour ton écran de chargement

La plupart des serveurs remplissent leur écran de chargement, puis ne le mettent jamais à jour. Les règles du serveur ont été rédigées il y a un an. La liste du personnel n’est plus à jour depuis six mois. Les images principales sont des captures d’écran d’événements qui ont eu lieu il y a longtemps. Un écran de chargement périmé indique aux joueurs expérimentés que le serveur ne soigne pas les détails.

Ajoute un rappel à ton calendrier le premier de chaque mois : remplace les images qui défilent par des captures d’écran d’événements récents, vérifie que la liste du personnel est à jour, vérifie que le lien Discord fonctionne et actualise le champ « prochain événement ». Ça prend quinze minutes et permet à l’écran de chargement de rester vivant.

Mieux encore : intègre la mise à jour de l’écran de chargement à ton processus de planification des événements. Lorsqu’un événement est programmé, mets l’écran de chargement à jour pour en faire la promotion. Après l’événement, remplace cette annonce par une capture d’écran récapitulative. L’écran de chargement devient un tableau des événements actuels plutôt qu’une brochure statique.

La bibliothèque musicale mérite d’être renouvelée selon les saisons : thèmes estivaux, ambiances hivernales, listes de lecture spéciales pour les événements. Les joueurs qui se connectent tous les jours remarquent la musique plus que tout autre élément ; leur proposer de temps en temps de la nouveauté montre que le serveur est activement entretenu.

Le script correspondant

Prêt pour ton serveur, mises à jour incluses.

Prêt à commencer ?

Procurez-vous les scripts dans notre boutique, ou rejoignez le Discord pour le support, les mises à jour et un aperçu de la suite.