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
| Composant | Description |
|---|---|
| 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
| Composant | Description |
|---|---|
| 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
| Composant | Description |
|---|---|
| Lecteur musique | Lecteur audio avec playlist, contrôles et volume |
Avancé
| Composant | Description |
|---|---|
| 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
| Option | Description | Par défaut |
|---|---|---|
| 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 :
┌──────────┬──────────┬──────────┐
│ Haut-G │ Haut-C │ Haut-D │
├──────────┼──────────┼──────────┤
│ Milieu-G │ Centre │ Milieu-D │
├──────────┼──────────┼──────────┤
│ Bas-G │ Bas-C │ Bas-D │
└──────────┴──────────┴──────────┘
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 :
https://votre-instance.quantumlogs.cloud/loading-screen
Configurez cette URL dans votre serveur Garry's Mod :
sv_loadingurl "https://votre-instance.quantumlogs.cloud/loading-screen"
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)