Éditeur CUI · LEÇON 2 / 5
Ajouter une image et une progression
Ajoutez une illustration et une barre de progression à votre carte.
Avant de commencer
- Un navigateur et l’éditeur CUI. Aucun serveur n’est nécessaire pour suivre la leçon.
- Reprenez le projet de la leçon précédente ou importez son exemple JSON.
Vidéo et chapitres
À l’écran
Ajoutez une image au contenu
Sélectionnez Content, ajoutez une image et vérifiez son URL HTTPS directe et son aperçu avant de confirmer.
Transcription descriptive et fichiers
Cette vidéo est muette. La transcription décrit les actions et les résultats visuels ; les sous-titres reprennent les instructions à l’écran.
- 0:00
Ajoutez une image au contenu — Sélectionnez Content dans les calques, puis ouvrez Add.
- 0:06
Collez une adresse d’image HTTPS — Vérifiez l’adresse dans Image URL et l’image dans l’aperçu.
- 0:09
Vérifiez l’image et ses proportions — L’image fait 1600 × 900 pixels. Cliquez sur Add image.
- 0:12
Gardez les proportions de l’image — Contain without distortion évite d’étirer l’illustration.
- 0:15
Réglez la taille de l’image — W : 320 pixels. H : 180 pixels, pour une image au format 16:9.
- 0:22
Placez l’illustration dans la carte — X : 304 pixels. Y : 310 pixels.
- 0:26
L’image reste nette et proportionnée — Ajoutons une barre de progression à côté de l’illustration.
- 0:31
Personnalisez le libellé — Remplacez Progress par Community objective.
- 0:36
Réglez la progression à 75 % — La valeur met à jour le pourcentage et la longueur de la barre.
- 0:39
Placez la progression à côté de l’image — Layout : W 280, H 104, X 660, Y 330.
- 0:46
Vérifiez le résultat avec Test — L’image et la progression doivent rester dans la carte, sans se chevaucher.
- 0:50
Image et progression sont en place — La barre affiche 75 % et l’image conserve son format 16:9.
À vous de jouer
- Reprenez le projet du tutoriel 1.
- Ajoutez une image HTTPS et conservez ses proportions avec le mode Contenir.
- Ajoutez le composant Progression, puis modifiez sa valeur et son libellé.
Un bouton ne répond pas, une image ne s’affiche pas ?
- Pour un bouton ajouté à la main, définissez une action dans Interaction, puis cliquez sur Tester. Le cadre des fenêtres composées possède sa fermeture commune ; un kit ou un bouton personnalisé peut nécessiter sa propre action Fermer l’interface.
- Pour une image, utilisez une URL HTTPS directe et vérifiez l’état de chargement sous le champ. Certains hébergeurs bloquent l’aperçu dans le navigateur.
- Si le canvas semble perdu, utilisez Adapter. Pour annuler une modification, utilisez Annuler ou Ctrl / Cmd + Z.
Tester simule les interactions locales. La vérification de structure ne prouve pas le fonctionnement en jeu ; les commandes et actions d’un plugin doivent aussi être testées sur le serveur.
Quelles données sont dynamiques ?
Dans les composants qui proposent Source, Valeur fixe conserve votre texte ou nombre. Donnée native utilise une information proposée par l’inspecteur, par exemple le nom du joueur ou les joueurs connectés. Donnée du plugin attend un champ fourni par l’intégration propriétaire : saisir son nom ne crée pas cette donnée.
Les aperçus utilisent des données d’exemple et peuvent simuler certaines actions. Ils ne lisent pas automatiquement les comptes ou l’inventaire d’un serveur et ne prouvent pas ses permissions.
Les quatre vidéos et leurs projets illustrent le parcours autonome enregistré en octobre 2026 ; leurs images et anciens libellés sont conservés. Pour les réglages actuels Fenêtre/Page, le format et l’export ZIP, suivez le guide Fenêtres de serveur.