Loading Screen Builder
Cette section s'adresse aux propriétaires d'instances QuantumLogs.
Le Loading Screen Builder vous permet de créer un écran de chargement personnalisé pour votre serveur Garry's Mod, directement depuis l'interface QuantumLogs.
Accéder au Builder
Allez dans Administration > Extensions
Activez l'extension GMod Loading Screen
Cliquez sur l'icône engrenage pour ouvrir le builder
Interface du Builder
Le builder est divisé en deux parties :
Panneau gauche : gestion des composants, paramètres globaux et templates
Panneau droit : prévisualisation en temps réel
Onglet Composants
Depuis cet onglet, vous pouvez :
Ajouter un composant via la palette (grille de boutons par catégorie)
Réorganiser les composants par glisser-déposer
Modifier un composant en cliquant sur l'icône crayon
Dupliquer ou supprimer un composant
Masquer/afficher un composant sans le supprimer
Onglet Style
Configurez les paramètres globaux du loading screen :
Couleur de fond
Police par défaut
Couleurs primaire, secondaire et d'accent
CSS et JavaScript personnalisé
Onglet Templates
Appliquez un template prédéfini pour démarrer rapidement :
Minimal : logo, titre et barre de progression
Gaming : fond image, effets glow, tips rotatifs
Cinématique : fond vidéo, design immersif
Communauté : règles, staff en ligne, liens sociaux
Appliquer un template remplace votre configuration actuelle. Pensez à sauvegarder avant si besoin.
Composants disponibles
Arrière-plan
Fond image
Image en arrière-plan avec overlay configurable
Fond vidéo
Vidéo en arrière-plan (boucle, muet)
Carrousel d'images
Diaporama d'images avec transition (fondu ou glissement)
Contenu
Logo
Logo du serveur (URL d'image)
Titre
Titre principal et sous-titre
Barre de progression
Barre animée avec 4 styles (classique, rayé, glow, néon)
Info téléchargement
Nom du fichier et compteur de fichiers
Info serveur
Nom du serveur, map, joueurs, gamemode
Staff en ligne
Liste des membres staff connectés
Règles
Liste des règles (numérotée ou non)
Astuces
Tips rotatifs avec intervalle configurable
Réseaux sociaux
Liens Discord, Twitter, YouTube, Twitch, Steam
Média
Lecteur musique
Lecteur audio avec playlist, contrôles et volume
Avancé
HTML personnalisé
Code HTML, CSS et JavaScript custom
Carrousel d'images
Le carrousel d'images est un composant d'arrière-plan qui affiche plusieurs images en diaporama avec une transition configurable.
Configuration
Images
Liste d'URLs des images à afficher
(vide)
Intervalle
Temps entre chaque image (secondes)
5
Transition
Type de transition : Fondu ou Glissement
Fondu
Durée transition
Vitesse de la transition (secondes)
0.8
Taille
Cover (remplit), Contain (contient), Auto
Cover
Position
Centre, Haut, Bas, Gauche, Droite
Centre
Overlay
Afficher un filtre de couleur par-dessus
Oui
Couleur overlay
Couleur du filtre
Noir
Opacité overlay
Transparence du filtre (0-100%)
30%
Utilisez des images de haute résolution (1920x1080 minimum) pour un rendu optimal. Les images sont chargées depuis les URLs que vous fournissez - assurez-vous qu'elles sont accessibles publiquement.
Système de positionnement
Chaque composant est placé dans une zone sur une grille 3x3 :
En plus de la zone, vous pouvez ajuster :
Largeur / Hauteur en pixels
Décalage X / Y pour un positionnement fin
Z-Index pour l'ordre de superposition (les composants avec un z-index plus élevé sont au-dessus)
Prévisualisation
La prévisualisation est interactive :
Cliquez sur un composant dans la preview pour le sélectionner
Double-cliquez pour l'éditer directement
Le bouton Rafraîchir recharge la preview après vos modifications
Plein écran ouvre la preview dans un nouvel onglet
Installation sur votre serveur
Une fois votre loading screen configuré, l'URL de votre loading screen est :
Configurez cette URL dans votre serveur Garry's Mod :
Dépannage
La preview ne s'affiche pas
Vérifiez que l'extension GMod Loading Screen est bien activée
Videz le cache de votre navigateur et rechargez la page
Essayez en navigation privée
Les images ne se chargent pas
Vérifiez que les URLs des images sont accessibles publiquement (pas derrière un login)
Utilisez le protocole
https://Vérifiez que le serveur hébergeant les images autorise le chargement depuis d'autres domaines (CORS)
Last updated