🗺️ Tutoriel Détaillé : L'Interface du Graphe (Visual Scripting)

L'espace de travail principal de Celestory Creator repose sur une Interface de Graphe nodal (ou Graphe de Nœuds). Plutôt que d'écrire du code de haut en bas ou de configurer des écrans fixes de gauche à droite, vous concevez vos créations à la manière d'une carte heuristique infinie. ✨
La donnée et le parcours de l'utilisateur y voyagent physiquement via des câbles (les Liens) qui connectent entre elles différentes actions (les Blocs). 🔗

1. 🧭 La Navigation dans le Canevas (Vue Infinie)

Le graphe est optimisé pour afficher à l'écran, sans ralentissement, des centaines de Blocs interconnectés. 🏎️💨

Se repérer dans l'espace

• 🤚 Pan (Déplacement) : Pour vous déplacer sur le canevas, il vous suffit de cliquer sur une zone vide de la grille et de glisser votre souris (Drag), ou d'utiliser le clic-molette (clic-milieu).
• 🔍 Zoom Infini : Utilisez la molette de votre souris ou la gestuelle à deux doigts (Pinch) sur votre pavé tactile pour dézoomer et avoir une vue d'ensemble de l'architecture de votre module, ou au contraire zoomer sur un micro-réglage très spécifique d'un point d'un bloc.
• 🧭 Se recentrer : trois boutons en bas à droite du canevas permettent de zoomer, dézoomer et tout afficher d'un coup — pratique quand on s'est perdu dans un grand graphe.
• 🔺 Le fond du canevas est uni et les blocs se posent exactement là où vous les lâchez : il n'y a pas de magnétisme. Prenez l'habitude d'aérer vous-même votre graphe au fur et à mesure.

2. 🧱 Anatomie d'un Bloc (les "Nœuds")

Les "Nœuds" sont matérialisés dans Celestory par des Blocs. Un graphe consiste à connecter ces Blocs. Mais comment lire un Bloc à l'écran ? 🤔
Chaque bloc se divise visuellement en 3 zones majeures :

🏷️ L'En-tête (Header)

Il comporte souvent l'icône et le nom de la catégorie (ex: Image, Condition, Générer du JSON). C'est par cette zone que vous pouvez "attraper" un Bloc pour le déplacer librement dans le canevas.

⬅️ Côté Gauche : Les Entrées (Inputs)

Ce sont les "prises" (ou ports) par lesquelles la donnée et l'exécution entrent dans le Bloc.

• ▶️ Le port d'Exécution entrant (la Flèche "Play") : C'est par ici qu'arrive le flux d'histoire (le fait que cette action doit s'enclencher à cet exact moment).
• 📥 Les ports de Données entrants (Valeurs) : Ils définissent les éléments que le bloc doit "consommer" pour fonctionner. Par exemple, pour un bloc de calcul, les ports de données entrants sont les nombres qu'il doit lire avant d'effectuer son travail.

➡️ Côté Droit : Les Sorties (Outputs)

Une fois que le bloc a fait son travail (afficher une image, calculer une somme, vérifier une condition), l'énergie ressort par la droite.

• ⏯️ Les ports d'Exécution sortants : Indiquent au Bloc suivant "c'est à ton tour !". Certains blocs (comme le Bloc Condition) possèdent plusieurs sorties d'exécution (Généralement "Vrai" et "Faux" ou "Condition remplie" / "Non remplie") pour créer des embranchements (les fameux "Arbres de choix").
• 📤 Les ports de Données sortants : La réponse du Bloc. Si vous reliez cette réponse à un nouveau Bloc, la donnée a correctement "circulé".

3. 🔌 Tracer les Liens (Connecter la Logique)

Dans Celestory, vous câblez littéralement votre application. ⚡

1. 🎯 Créer un Lien : Cliquez sur un port entrant ou sortant (par exemple un petit rond, ou un symbole de flèche à droite d'un Bloc) et maintenez le clic pour "tirer" le fil.
2. 🤝 Lâcher sur le port destinataire : Relâchez le lien sur le port que vous souhaitez connecter du Bloc suivant. L'interface s'assurera visuellement qu'un câble relie les deux éléments.
3. ✂️ Détruire un Lien : Vous pouvez cliquer sur un port déjà lié pour "arracher" le câble et le lâcher dans le vide pour le supprimer, ou le brancher ailleurs.

💡 Le Typage des Liens

Le graphe de Celestory est sûr 🛡️. Il empêche en temps réel les erreurs techniques en vérifiant les types de vos données.

• 🚥 Typage visuel : Si vous tentez de lier un "Texte entrant" avec la prise correspondant à une "Image 3D", le graphe refusera de créer le chemin ou vous indiquera une alerte visuelle. Vous ne pouvez lier que ce qui est mathématiquement et logiquement compatible, évitant les crashs à la compilation d'un module final.

4. 🖱️ Interaction Directe au sein de l'Interface

S'il n'est pas nécessaire de coder, l'interface comporte des outils dignes d'un IDE (Environnement de Développement) très avancés, directement dans les Blocs :

A. 📝 L'Éditeur de Texte Riche (Rich Media Editor)

Dans les blocs de Dialogue, de Narrateur ou d'Alerte, une barre de mise en forme apparaît au-dessus de la zone de texte, dans la fenêtre d'édition du bloc.
Vous n'avez pas besoin de CSS : gras, italique, souligné, barré, choix de la police, de la taille et de la couleur du texte sont à portée de clic. ✨
🔺 Les titres, listes à puces et citations ne sont pas proposés dans ces blocs. Ils apparaissent dans les champs adossés à une ressource Texte riche, dont la barre d'outils est plus complète.

B. 💻 L'IDE Embarqué !

Besoin d'aller un cran plus loin ? Dans les Blocs qui demandent du formatage complexe (Injection CSS, HTML5, ou un bout de code JavaScript), double-cliquez sur le bloc : sa fenêtre d'édition fait apparaître l'éditeur Monaco (le moteur de Visual Studio Code, intégré à Celestory).
Cela vous octroie tous les bénéfices d'un vrai éditeur code : coloration syntaxique dynamique, numérotation des lignes et auto-fermeture des accolades. 🚀

4bis. 🧩 Injecter une Variable dans un Texte : les Doubles Accolades

C'est l'un des mécanismes les plus caractéristiques de Celestory, et il tient en une règle :
tout mot écrit entre doubles accolades dans un champ de texte crée automatiquement un nouveau point d'entrée sur le bloc.
Exemple, dans un bloc Dialogue :

Bonjour {{Prenom}} ! Vous avez {{Score}} points.

Dès que vous écrivez ceci, deux nouvelles entrées apparaissent sur le bloc : Prenom et Score. Il ne reste plus qu'à les relier aux variables correspondantes, comme n'importe quel autre point. À l'exécution, Celestory remplace chaque référence par la valeur reçue. 🪄
🔺 Deux erreurs classiques :

• une seule accolade ({Prenom}) ne déclenche rien : le texte s'affichera tel quel ;
• une entrée créée mais non reliée reste vide à l'exécution. Créer le point ne suffit pas, il faut le câbler.

Ce mécanisme fonctionne dans dix blocs : Formater texte, Notification et HTML5 (tous templates), Dialogue, Choix avec dialogue, Narrateur et Alerte (Chatbot), Dialogue, Alerte et Slide (Visual Novel).
🔺 Une troisième erreur, moins visible : le nom ne peut contenir que des lettres non accentuées, des chiffres et des tirets bas. {{Prénom}} avec un accent, {{mon-score}} avec un tiret ou {{ Prenom }} avec des espaces ne sont pas détectés, sans aucun message. Et la casse compte : {{prenom}} et {{Prenom}} sont deux points différents.

5. ⚡ Astuces et Raccourcis de Productivité

Au fur et à mesure que votre graphe va grossir (les modules les plus lourds vont souvent dépasser les 100 Blocs liés en architecture de toiles d'araignées ou branches symétriques), la maîtrise de ces actions vous fera gagner de précieux jours :

1. 📦 La Sélection Multiple (Box Select) : Vous pouvez maintenir Shift + Clic Gauche (ou dessiner un carré de sélection avec le clic de la souris) pour englober plusieurs Blocs d'un coup. Les Blocs mis en surbrillance peuvent ensuite être déplacés en bloc tout en conservant leur topologie interne. Idéal pour "aérer" votre Graphe en un coup de poignet.
2. 👯 Duplication Rapide : Sélectionnez un ou plusieurs blocs, puis Cmd+C et Cmd+V pour coller la structure. Le menu du clic droit propose alors une entrée Coller. La copie garde les réglages, mais pas les liens vers vos autres blocs.
3. 🗑️ Suppression Rapide : Sélectionnez les Blocs inutilisés ou les liens rompus, et pressez la touche Suppr (ou Backspace) pour élaguer votre conception à la volée.
4. 🤏 Minimise/Maximise des Blocs : Certains gros noeuds disposent d'un bouton de repli pour occuper un minimum de place dans l'espace de votre canvas tout en protégeant leur réglage. Pensez à les replier pour gagner de l'espace.

→ Prochaine étape : Apprenez à segmenter la difficulté de vos Graphes tentaculaires grâce aux Modules et Fonctions répétables, pour éviter de créer dupliquer les mêmes centaines de Blocs. 🚀

Mis à jour le : 21/09/2026