🖼️ Afficher un décor : la chaîne des trois blocs

Un décor plein écran n'est jamais posé par un seul bloc. Il faut en enchaîner trois : un qui va chercher l'image, un qui prépare comment elle doit s'ajuster à l'écran, et un seul qui s'enfile réellement dans le fil de l'histoire. Les deux premiers sont des blocs de valeur : ils se branchent sur une entrée, ils ne se posent jamais entre deux autres blocs du flux. Le troisième est un bloc de flux : c'est lui, et lui seul, qui prend place dans la séquence, juste avant la réplique qu'il doit habiller.

🧩 Le schéma

Charger image          ──image──▶     Image de fond          ──image de fond──▶     Fond
(imageFromUrl)                        (createBackgroundImage)                        (switchBackground)
  url : Texte                           image : Image                                 in : Flux ◀── s'enfile ici
  image : Image (sortie)                taille : Couvrir (par défaut)                  fond : Image de fond
                                         couleur, répétition,                          durée, effet d'entrée,
                                         position x, position y                        effet de sortie,
                                         image de fond : sortie                        texte, position du texte
  bloc de valeur                        bloc de valeur                                 out : Flux
  pas d'entrée/sortie de flux           pas d'entrée/sortie de flux                    bloc de flux

Seul Fond a des points « in » et « out » de type Flux : c'est le seul des trois qui occupe une case dans la séquence du graphe. Charger image et Image de fond n'ont ni l'un ni l'autre — impossible de les enfiler dans le fil même si on le voulait, ils n'ont que des points de valeur à brancher.

🔗 Bloc par bloc

Charger image (imageFromUrl)

• Entrée : url (Texte) — le lien direct vers le fichier (https://…).
• Sortie : image (Image).
• Aucun point de flux : ce bloc ne fait que convertir une URL en valeur « Image », utilisable par n'importe quel bloc qui accepte une image (Image de fond, mais aussi Modifier personnage pour un portrait).

Image de fond (createBackgroundImage)

• Entrée image (Image) — reçoit la sortie du bloc précédent.
• Entrée taille — un choix parmi Contenue, Automatique, Couvrir (valeur par défaut du bloc).
• Entrées couleur, répétition, position x, position y — pour les cas où l'image ne remplit pas tout le cadre.
• Sortie : image de fond — un objet « Image de fond », pas une image brute. C'est ce type précis qu'attend le bloc Fond.
• Pas de point de flux non plus : ce bloc ne fait qu'assembler un réglage, il n'affiche rien par lui-même.

Fond (switchBackground)

• Entrée in (Flux) — c'est ici que le bloc s'enfile, avant la réplique à habiller.
• Entrée fond — reçoit la sortie image de fond du bloc précédent. C'est le seul point qui accepte le type « Image de fond » complet (couleur, répétition, position compris) ; y brancher directement une simple Image sans passer par Image de fond revient au même problème que le bloc hérité Scène décrit dans Les blocs hérités : les champs attendus (taille, couleur, répétition) sont absents, et le rendu reste vide ou incohérent.
• Entrées durée, effet d'entrée, effet de sortie, texte, position du texte — l'animation de transition et un texte optionnel affiché par-dessus.
• Sortie out (Flux) — la suite du fil.

📐 « Couvrir » n'étire pas ce que vous croyez

Le réglage Couvrir du bloc Image de fond ne produit pas un background-size: cover classique — celui qui remplit tout le cadre en rognant ce qui dépasse. Il produit, vérifié dans le code du lecteur, un background-size: 100% auto :

• la largeur de l'image est toujours calée sur la largeur du cadre ;
• la hauteur suit ensuite, proportionnellement à cette largeur, selon les proportions propres de l'image — sans distorsion de l'image elle-même.

Le résultat dépend donc du format de votre image par rapport au cadre :

• une image plus large que haute, dans un cadre plus haut que large (un écran de smartphone), laisse apparaître la couleur de fond en haut et en bas ;
• une image plus haute que large, dans un cadre large, déborde verticalement du cadre — la partie en trop est simplement masquée, pas redimensionnée.

Il n'y a donc pas d'étirement de l'image au sens propre (aucune déformation), mais le cadre n'est pas nécessairement couvert. Si vous avez besoin d'un vrai recadrage plein cadre, un bloc CSS posant background-size: cover !important sur le décor reste, à ce jour, la seule solution — voir Mettre en forme sans écrire de CSS pour savoir si un réglage natif du module ne fait pas déjà l'affaire avant d'en arriver là.

🌐 Une image depuis une URL externe : ce qui se passe vraiment

Rien n'est téléversé dans le projet : le bloc Charger image se contente d'emballer l'URL saisie dans une valeur « Image ». Aucun des trois blocs de la chaîne n'attend, avant de continuer, que l'image ait effectivement fini de charger — contrairement au bloc Jouer musique, qui lui bloque le fil tant que le son n'a pas démarré. Concrètement :

• le fil continue immédiatement, l'image se charge en arrière-plan comme n'importe quelle image de page web ;
• si l'URL est injoignable, mal formée, ou refusée par le site distant (protection anti-hotlink, CORS), le décor n'apparaît simplement pas — le fond retombe sur la couleur réglée dans Image de fond, sans erreur ni blocage ;
• rien ne vous avertit de cet échec pendant le test : le seul moyen de le voir est d'ouvrir Tester en jouant et de regarder le décor, pas seulement la validation.

Choisissez donc des URL stables (Wikimedia Commons, par exemple, sert des URL directes conçues pour l'usage externe) plutôt qu'un lien copié depuis un site qui pourrait un jour bloquer les requêtes venant d'ailleurs que de lui-même.

→ Prochaine étape : si un décor déjà branché selon cette chaîne reste invisible malgré tout, relisez Les blocs hérités — vous avez peut-être posé Scène au lieu de Fond.

Mis à jour le : 21/09/2026