🔀 Votre premier choix : le lecteur décide, l'histoire bifurque

Jusqu'ici, votre histoire est une ligne droite : Départ → Dialogue, et c'est tout. Le lecteur lit, il ne fait rien. Dans cet article, on ajoute la chose qui transforme un texte en expérience interactive : un embranchement. Une question, deux boutons, et deux suites différentes.

C'est le bloc Choix. On part d'ici :

  ┌─────────┐        ┌────────────┐
  │ Départ  │───────▶│  Dialogue  │
  └─────────┘   out  └────────────┘
                 in            out ▶ (dans le vide)

…et on arrive là :

                                         ┌────────────────────┐
                                    ┌───▶│ Dialogue « gauche »│
  ┌─────────┐   ┌──────────┐        │    └────────────────────┘
  │ Départ  │──▶│ Dialogue │──▶┌────┴─────┐
  └─────────┘   └──────────┘   │  Choix   │
                               │          │
                               │ à gauche ▶───▶ (branche 1)
                               │ à droite ▶───▶ (branche 2)
                               └──────────┘

🔺 Cet article a été vérifié dans le code source du Creator (packages/frontend/src/containers/), pas recopié depuis des notes internes. Les points, les fils, les triangles et les cercles ne sont pas réexpliqués ici : voir l'article Relier deux blocs : le fil, les triangles et les cercles.

🧩 Le bloc Choix, et son cousin

Deux blocs font le même travail de base, avec un supplément pour le second :

Ils partagent exactement le même mécanisme d'options : ce que vous lirez plus bas vaut pour les deux. Le Choix avec dialogue a simplement deux champs de plus (le dialogue et son contenu média).

⚠️ Choix avec dialogue appartient au template Chatbot : vous ne le trouverez pas dans un module Roman visuel. Le bloc Choix, lui, est commun à tous les templates.

🪄 Ce qui rend ce bloc spécial : il se fabrique tout seul

Voici le point que personne ne devine du premier coup, et qui explique tout le reste.

Quand vous posez un bloc Choix sur le graphe, il n'a aucune sortie. Zéro. Un bloc Dialogue arrive avec sa sortie déjà là ; le bloc Choix arrive nu, avec juste son entrée et ses réglages.

Ses sorties naissent de ce que vous écrivez dedans. Chaque ligne que vous tapez dans le champ choix fait pousser :

• une sortie (un triangle à droite du bloc : c'est une sortie de flux), portant exactement le texte de la ligne ;
• une entrée portant le même texte (on y reviendra, c'est pour l'habillage).

Vous écrivez « à gauche » → une sortie nommée « à gauche » apparaît. Vous effacez la ligne → la sortie disparaît. Vous corrigez « à gauche » en « vers la clairière » → la sortie est renommée, et le fil déjà branché dessus reste en place. C'est voulu : la sortie est attachée à la ligne de texte elle-même, pas à son libellé.

🔺 Il n'y a aucun maximum. Deux options, cinq, vingt : rien dans le code ne plafonne la liste. Au-delà de cinq ou six le bloc devient juste très haut sur le canvas, et vos boutons très nombreux à l'écran.

🛠️ Le pas-à-pas

On suppose que votre graphe contient déjà un Départ relié à un Dialogue, comme à la fin de l'article précédent. Le Dialogue dit quelque chose comme « Le chemin se sépare en deux. »

1. Poser le bloc Choix

Faites un clic droit sur une zone vide du canvas, un peu à droite de votre Dialogue. Le navigateur de blocs s'ouvre, avec un champ Rechercher un bloc… en haut.

Tapez choix, puis cliquez sur Choix dans la liste.

💡 Astuce plus rapide, et qui évite l'étape 3 : tirez un fil depuis la sortie de votre Dialogue et lâchez-le dans le vide. Celestory ouvre alors une liste ne contenant que les blocs compatibles avec ce point, et crée le bloc déjà relié.

2. Ouvrir sa fenêtre d'édition

Double-cliquez sur le bloc Choix. Sa fenêtre s'ouvre, avec ses champs :

• in — l'entrée, qui affiche pour l'instant « Le bloc … n'est connecté à aucun autre bloc. »
• choix — une liste, vide, avec un bouton ＋ Texte.
• chrono — un nombre, à 0.

3. Relier le Dialogue au Choix

Si vous n'avez pas utilisé l'astuce de l'étape 1 : sur le canvas, tirez un fil depuis la sortie du Dialogue jusqu'à l'entrée du bloc Choix.

4. Écrire la première option

Dans la fenêtre du Choix, cliquez sur ＋ Texte sous le champ choix. Une ligne de saisie apparaît. Tapez :

Prendre le sentier de gauche

Regardez le bloc sur le canvas : une sortie vient d'apparaître, nommée Prendre le sentier de gauche.

5. Écrire la deuxième option

Recliquez sur ＋ Texte et tapez :

Prendre le sentier de droite

💡 Plus rapide : avec le curseur encore dans le champ d'une option, appuyez sur Entrée — une nouvelle ligne est insérée juste en dessous, et le curseur y saute. Vous pouvez écrire vos cinq options d'affilée sans jamais toucher la souris.

Votre bloc a maintenant deux sorties. C'est ça, un embranchement : une entrée, deux sorties.

6. Réordonner ou supprimer (facultatif)

Chaque ligne a une poignée de glissement à gauche (pour changer l'ordre d'affichage des boutons) et une croix à droite (pour la supprimer).

⚠️ Supprimer une ligne supprime aussi sa sortie et le fil qui y était branché, sans demander confirmation. Un Cmd+Z / Ctrl+Z annule l'ensemble.

7. Construire la première branche

Clic droit dans le vide → Dialogue. Écrivez-y la suite du sentier de gauche : « La clairière s'ouvre devant vous. »

Puis tirez un fil depuis la sortie Prendre le sentier de gauche du bloc Choix jusqu'à l'entrée de ce nouveau Dialogue.

8. Construire la seconde branche

Recommencez : un second Dialogue (« Le sentier s'enfonce sous les arbres. »), relié à la sortie Prendre le sentier de droite.

9. Tester

Cliquez sur Jouer le module courant : la fenêtre Tester en jouant s'ouvre. Vous voyez la réplique d'introduction, puis deux boutons. Cliquez sur l'un, vous lisez sa suite ; relancez le test, cliquez sur l'autre, vous lisez l'autre suite.

Vous venez d'écrire votre première histoire à embranchement. 🎉

🗺️ Où on en est

                                          ┌──────────────────────────┐
                                     ┌───▶│ Dialogue                 │
                                     │    │ « La clairière s'ouvre » │
  ┌────────┐   ┌───────────────────┐ │    └──────────────────────────┘
  │ Départ │──▶│ Dialogue          │ │
  └────────┘   │ « Le chemin se    │ │
               │   sépare en deux »│ │
               └─────────┬─────────┘ │
                         │           │
                         ▼           │
               ┌──────────────────────────────┐
               │ Choix                        │
               ├──────────────────────────────┤
               │ Prendre le sentier de gauche ▶┘
               │ Prendre le sentier de droite ▶┐
               └──────────────────────────────┘│
                                               │  ┌────────────────────────────┐
                                               └─▶│ Dialogue                   │
                                                  │ « Le sentier s'enfonce... »│
                                                  └────────────────────────────┘

🔗 Faire se rejoindre les deux branches

Deux chemins qui divergent pour toujours, c'est rarement ce qu'on veut : le plus souvent, les deux sentiers mènent au même village, et l'histoire continue d'un seul tenant.

Bonne nouvelle : il n'y a rien de spécial à faire. Une entrée de type flux accepte plusieurs fils ; branchez simplement la sortie du Dialogue « clairière » et celle du Dialogue « sous-bois » sur l'entrée d'un même troisième bloc.

   ┌──────────┐ « clairière » ┐
   │  Choix   ▶───▶ Dialogue ─┤
   │          │               ├──▶ ┌────────────────────────┐
   │          ▶───▶ Dialogue ─┘    │ Dialogue « Le village »│
   └──────────┘ « sous-bois »      └────────────────────────┘

⚠️ La règle inverse, elle, est stricte : une sortie de flux n'accepte qu'un seul fil. Plusieurs fils peuvent arriver sur la même entrée ; un seul peut partir d'une même sortie. Si le Creator refuse votre fil, c'est presque toujours ça.

🔺 Si le croisement de fils devient illisible, double-cliquez sur un fil : Celestory y insère un bloc Connecteur, un simple relais qui ne fait rien d'autre que faire passer le flux. C'est du rangement visuel, pas de la logique.

Et si vous voulez au contraire que les branches restent séparées jusqu'à la fin : ne les rejoignez pas. Quand une branche se termine sur un bloc dont la sortie ne va nulle part, l'histoire s'arrête là. C'est une fin, pas une erreur.

🔇 Le piège : l'option qu'on oublie de relier

C'est la panne de ce bloc, et elle ne dit rien.

Si une option a bien sa sortie, mais que cette sortie n'est reliée à aucun bloc, alors au moment de jouer, le bouton n'est pas affiché du tout. Pas grisé, pas barré, pas accompagné d'un message : simplement absent de la liste.

Vous avez écrit trois options, vous n'en avez relié que deux, vous testez, et vous voyez deux boutons. Rien, nulle part, ne vous dit que le troisième existe : le graphe se valide, aucune croix rouge n'apparaît sur le bloc, aucun avertissement n'est levé.

Le cas extrême est plus déroutant encore : si aucune option n'est reliée, le lecteur voit une zone de choix vide et l'histoire s'arrête net, en attendant un clic impossible.

🔺 Le réflexe qui évite les trois : comptez les triangles de sortie, comptez les fils qui en partent — les deux nombres doivent être égaux avant de tester.

💬 « Connecte un bloc Modifier choix pour le rendre dynamique »

En ouvrant la fenêtre du bloc Choix, vous avez peut-être remarqué qu'en dessous de la liste des options, chaque option réapparaît une seconde fois, comme un champ à part, avec cette phrase :

Connecte un bloc Modifier choix pour le rendre dynamique.

Ce n'est pas une erreur, et vous n'avez rien à faire. C'est simplement le message d'état vide d'un champ facultatif : à côté de chaque option, Celestory prévoit une prise où brancher un bloc Modifier choix. Tant que rien n'y est branché, le champ affiche cette invitation. Une option sans Modifier choix fonctionne parfaitement.

Le bloc Modifier choix sert à rendre une option variable d'une partie à l'autre. Il propose quatre comportements :

C'est ainsi qu'on écrit « la porte est verrouillée tant que vous n'avez pas la clé » : une option Ouvrir la porte branchée sur un Modifier choix de type Désactiver, dont la condition dépend d'une variable.

⚠️ Attention à ne pas confondre les deux effacements : Enlever via Modifier choix, c'est un bouton masqué exprès, selon une condition que vous maîtrisez. Un bouton absent parce que sa sortie n'est reliée à rien, c'est un oubli. À l'écran, les deux sont rigoureusement identiques.

⏱️ Le chrono : une sortie de plus, en option

Le champ chrono du bloc Choix vaut 0 par défaut, c'est-à-dire « pas de limite de temps ».

Posez-y un nombre de secondes, et une sortie supplémentaire apparaît sur le bloc : temps écoulé. Si le lecteur n'a rien cliqué avant la fin du décompte, l'histoire part par cette sortie-là. Une barre de progression s'affiche au-dessus des boutons pendant le compte à rebours.

Remettez le chrono à 0 et la sortie temps écoulé disparaît — avec le fil qui y était branché, exactement comme pour une option supprimée.

📌 À retenir

• Un bloc Choix arrive sans aucune sortie : ses sorties naissent des lignes que vous écrivez dans le champ choix.
• Une ligne = un bouton à l'écran = une sortie à relier. Aucun maximum.
• Renommer une option conserve son fil ; la supprimer détruit son fil.
• Une sortie de flux n'accepte qu'un seul fil, mais une entrée en accepte plusieurs : c'est comme ça que deux branches se rejoignent.
• Une option dont la sortie ne va nulle part n'apparaît pas en jeu, sans le moindre avertissement.
• Le message « Connecte un bloc Modifier choix » est une invitation facultative, pas une erreur.

→ Prochaine étape : votre histoire bifurque, mais elle ne se souvient de rien — au prochain embranchement, elle aura oublié le sentier que le lecteur avait pris. Direction Une variable, c'est se souvenir. 🧠

Mis à jour le : 23/09/2026