🚀 Votre premier projet : de la page blanche au premier écran

Votre compte est créé, la page d'accueil est vide, et il y a ce grand bouton « Nouveau projet ». Cet article vous tient la main de ce clic jusqu'au moment où une phrase que vous avez écrite s'affiche dans un vrai lecteur. 🎬

Le résultat attendu : une application minuscule mais complète — elle démarre, elle affiche votre phrase, elle s'arrête. Rien de plus, et c'est exactement le but : vous aurez touché tous les gestes fondateurs de Celestory au moins une fois.

Le temps nécessaire : environ 10 minutes, dont deux passées sur un mur que presque tout le monde rencontre et que personne ne voit venir. On l'a mis au bon endroit dans le parcours, juste avant que vous ne tombiez dedans.

🔺 Aucun prérequis technique. Vous n'écrirez pas une ligne de code, et vous n'aurez besoin d'aucun fichier, image ou son.

1️⃣ Créer le projet

Sur la page d'accueil, cliquez la carte Nouveau projet — son sous-titre annonce la couleur : « Démarrer un nouveau projet vide à partir de zéro ».

Une fenêtre s'ouvre et vous demande quatre choses, et quatre seulement :

Remplissez le nom, laissez le reste tel quel, cliquez Créer. L'éditeur s'ouvre directement sur votre nouveau projet.

⚠️ On ne vous demande pas de choisir un modèle. Contrairement à ce que laisse croire l'existence de plusieurs templates dans Celestory, cette fenêtre n'en propose aucun : tout nouveau projet est créé en Chatbot, sans alternative possible à cet instant. Si vous vouliez un Roman visuel, ce sera un module à ajouter ensuite — pas une case à cocher ici.

2️⃣ Faire l'inventaire : ce que Celestory vient de créer pour vous

Prenez dix secondes pour regarder ce que vous avez sous les yeux. Ça vaut le coup, parce que c'est très peu — et que savoir à quel point c'est peu vous évitera beaucoup de confusion.

Dans le graphe, il y a exactement un bloc : un rectangle vert nommé Départ, posé un peu en haut à gauche de la zone de travail. C'est tout. Pas de dialogue d'exemple, pas de choix, pas de fil.

En coulisses, il y a déjà trois menus (le bouton bleu du projet en haut à gauche → Menus) :

• un Menu principal avec un unique bouton Démarrer déjà branché sur votre module ;
• un ATH transparent avec un bouton ⏸️ ;
• un menu Pause en superposition, avec Reprendre et Sauvegarder & quitter.

Et il n'y a rien d'autre : zéro variable, zéro personnage, zéro décor, zéro ressource de contenu. La liste des personnages de votre module Chatbot est littéralement vide.

🔺 C'est la clé du parcours qui suit : les menus sont prêts à lancer une histoire, mais l'histoire, elle, est vide. Un projet neuf est une coquille fonctionnelle autour d'un contenu inexistant.

3️⃣ Poser votre premier bloc — et le relier dans le même geste

C'est ici que se joue la différence entre une première séance réussie et vingt minutes de perplexité. Il existe deux façons d'ajouter un bloc ; une seule est recommandée pour votre tout premier.

✨ La bonne méthode : tirer un fil dans le vide

Regardez le bord droit du bloc Départ : il porte un petit triangle creux. Ce triangle est sa sortie.

1. Cliquez sur ce triangle et faites glisser vers une zone vide du graphe, à droite.
2. Relâchez dans le vide.
3. Un menu « Connecter à… » s'ouvre, avec un champ de recherche.
4. Tapez alerte et choisissez l'entrée Alerte (in).

Le bloc Alerte apparaît là où vous avez relâché la souris, et il est déjà relié au bloc Départ. Un geste, deux problèmes réglés.

🔺 Pourquoi Alerte et pas Dialogue ? Parce qu'Alerte ne demande qu'une chose : du texte. Le bloc Dialogue, lui, commence par vous demander « Choisir votre premier personnage: » — et comme votre projet n'en a aucun, vous devriez d'abord en créer un. Une excellente deuxième étape, une mauvaise première.

⚠️ Le menu « Blocs les plus utilisés » vous ment un peu. Sur un projet neuf, cette section est pré-remplie avec quatre blocs choisis d'avance — Alerte, Assignation, Choix, Condition — alors que vous n'avez encore rien utilisé. Et Dialogue, qui aurait dû y figurer, n'y est pas : il se trouve plus bas, dans Autres blocs. Ne cherchez pas de logique dans ce classement tant que vous n'avez pas réellement construit quelque chose.

🔺 Les autres méthodes, et le piège qui va avec

Vous pouvez aussi ajouter un bloc par le bouton Ajouter un bloc de la barre du haut, ou par un clic droit sur le graphe → Ajouter un bloc.

• Le clic droit pose le bloc là où vous avez cliqué : c'est propre, mais le bloc arrive non relié.
• Le bouton de la barre du haut pose le bloc au centre de la vue… sauf tant que vous n'avez ni déplacé ni zoomé le graphe. Sur un projet fraîchement créé, ce centre vaut encore 0,0 — c'est-à-dire exactement la position du bloc Départ.

⚠️ Un bloc peut en recouvrir un autre au pixel près, sans le moindre avertissement. Celestory empile les blocs sans jamais tester s'ils se chevauchent. Si vous utilisez le bouton de la barre du haut comme tout premier geste, votre nouveau bloc se posera sur le bloc Départ et vous croirez qu'il ne s'est rien passé. Le remède est simple : faites glisser le bloc du dessus pour découvrir celui du dessous — ou, mieux, utilisez la méthode du fil tiré dans le vide.

🔎 Au passage : triangles et cercles

Sur les bords des blocs, deux formes coexistent :

• les triangles portent le flux de l'histoire (l'ordre dans lequel les choses se passent) ;
• les cercles portent des valeurs (un texte, un nombre, une image).

Et dans les deux cas : creux = rien n'est branché, plein = quelque chose est branché. Un coup d'œil suffit donc pour savoir si votre graphe tient debout. Retenez-le, on y revient à l'étape 6.

4️⃣ Écrire votre phrase

Double-cliquez sur le bloc Alerte.

⚠️ Un simple clic ne fait que sélectionner le bloc — il ne l'ouvre pas. C'est la cause numéro un du « je n'arrive pas à éditer mon bloc » chez les débutants. Double-clic, toujours.

Une fenêtre flottante s'ouvre. Elle contient :

• tout en haut, un champ « Ajouter un titre personnalisé… » — c'est le nom que le bloc affichera dans le graphe. Facultatif, mais très utile dès que votre graphe dépasse cinq blocs ;
• plus bas, un champ par point du bloc. Celui qui vous intéresse s'appelle texte.

🔺 Les noms de points sont traduits dans la langue de l'interface (texte, image), sauf les deux points de flux in et out, qui restent en anglais dans toutes les langues.

Cliquez dans le champ texte et écrivez votre phrase — par exemple :

Bonjour, et bienvenue dans ma toute première expérience Celestory.

C'est un éditeur de texte enrichi : le gras, les listes et les polices sont disponibles dans sa barre d'outils. Pour ce premier essai, du texte brut suffit largement.

Refermez la fenêtre du bloc. Le graphe affiche maintenant deux blocs reliés par un fil. ✅

5️⃣ Sauvegarder — à la main, maintenant

⚠️ Celestory ne sauvegarde jamais tout seul. Il n'y a aucune sauvegarde automatique, aucun enregistrement périodique en tâche de fond, et aucun avertissement si vous fermez l'onglet. Le navigateur vous laissera partir sans un mot, et tout ce que vous venez de faire disparaîtra.

Deux façons de sauvegarder, elles font la même chose :

• le bouton disquette de la barre du haut (son infobulle dit : « Sauvegarder le graphe dans le cloud. ») ;
• le raccourci Cmd+S (Ctrl+S sous Windows).

Un bandeau « Sauvegarde du projet… » apparaît, puis un bandeau vert « Project saved » — oui, en anglais, même dans une interface en français. Tant que vous n'avez pas vu ce bandeau vert, rien n'est à l'abri.

⚠️ Le raccourci est ignoré tant que votre curseur est dans un champ de saisie (comme le champ texte de l'Alerte) : cliquez d'abord sur le graphe, puis faites Cmd+S.

🔺 Prenez tout de suite l'habitude du Cmd+S après chaque changement qui vous a coûté un effort. C'est le seul filet de sécurité qui existe.

6️⃣ Jouer

Cliquez le bouton Jouer le module courant (icône ▶, en haut à droite de la barre). Son infobulle annonce Maj+P, mais ce raccourci ne fait rien : cliquez sur le bouton.

Deux fenêtres s'ouvrent :

• Tester en jouant — le lecteur lui-même, une fenêtre au format téléphone (360 × 680 pixels, le format portrait par défaut de tout nouveau projet) ;
• Débogue — un petit panneau à droite, avec trois onglets : Général, Variables, Affichage.

Votre phrase doit apparaître dans le lecteur. 🎉 Puis plus rien : c'est normal, la sortie du bloc Alerte n'est reliée à aucune suite, donc l'histoire s'arrête là. Vous venez de construire, de bout en bout, une expérience Celestory qui fonctionne.

🔺 Deux façons de jouer, à ne pas confondre. Le clic direct sur le bouton lance « Jouer le module courant » : il démarre directement au bloc Départ et saute complètement vos menus. Si vous survolez le bouton sans cliquer, un petit menu propose en plus « Ouvrir le menu Menu principal » : celui-là affiche votre écran d'accueil, avec son bouton Démarrer, comme le verra un vrai utilisateur. Testez les deux : ils ne racontent pas la même chose.

🔺 Bonne nouvelle au passage : le lecteur joue l'état actuel de votre éditeur, pas la dernière version sauvegardée. Vous n'avez donc pas besoin de sauvegarder pour tester. Vous avez besoin de sauvegarder pour ne pas perdre ce que vous testez.

🧱 Le mur : « j'ai appuyé sur Jouer et il ne se passe rien »

C'est le mur annoncé en introduction, et il est presque inévitable si vous avez ajouté votre bloc autrement que par le fil tiré dans le vide.

Le symptôme. Vous cliquez Jouer. La fenêtre s'ouvre, le décor par défaut s'affiche… et rien d'autre. Pas de texte, pas de bouton, pas de message d'erreur. Si vous êtes passé par le menu d'accueil, le bouton Démarrer répond bien — l'écran devient simplement vide.

La cause. Le bloc Départ n'est relié à rien. Celestory sait par où commencer, mais n'a aucune idée de ce qui vient après, alors il ne fait rien. Un bloc posé sans être branché est un bloc mort.

⚠️ Et surtout : personne ne vous le dira. Celestory sait détecter trois erreurs de compilation — aucun bloc de départ, plusieurs blocs de départ, un type de bloc introuvable — mais ces erreurs ne sont affichées dans aucune interface. Elles ne partent que dans la console technique du navigateur, que vous n'avez aucune raison d'ouvrir. Le silence n'est donc pas le signe que tout va bien : c'est juste du silence.

Le diagnostic en trois secondes. Deux réflexes, dans cet ordre :

1. Regardez les triangles. Sur le bord droit du bloc Départ, un triangle creux signifie : rien ne part d'ici. C'est votre réponse.
2. Lisez la fenêtre Débogue, onglet Général. Elle affiche « Bloc courant » avec son identifiant et son nom. Si elle vous dit obstinément que le bloc courant est start, c'est que la lecture n'a jamais avancé d'un pas. Le bouton « Centrer la vue sur le bloc » ramène même le graphe pile sur le coupable.

La correction. Faites glisser un fil du triangle du bloc Départ jusqu'au triangle d'entrée (à gauche) de votre bloc Alerte. Relancez. C'est réglé.

🔺 Ce mur-là est le premier d'une petite famille de pannes qui ne disent pas leur nom. Une fois que votre premier écran fonctionne, l'article Quand rien ne marche, et que rien ne le dit recense les suivantes : décors qui ne se chargent pas, répliques invisibles, histoires qui se figent. Gardez-le sous la main, mais pas avant d'avoir fini celui-ci.

✅ Le récapitulatif en six gestes

1. Nouveau projet → un nom → Créer. (Pas de choix de modèle : ce sera un Chatbot.)
2. Constater qu'il y a un seul bloc, trois menus, et rien d'autre.
3. Tirer un fil depuis le triangle du bloc Départ vers le vide → Alerte (in).
4. Double-cliquer le bloc Alerte → écrire sa phrase dans le champ texte.
5. Cmd+S → attendre le bandeau vert.
6. Cliquer Jouer le module courant → lire sa phrase à l'écran.

Si un jour un projet refuse de démarrer, remontez cette liste à l'envers : neuf fois sur dix, la réponse est à l'étape 3.

→ Prochaine étape : vous avez relié deux blocs sans vraiment regarder ce que vous faisiez. L'article Relier deux blocs : le fil, les triangles et les cercles explique ce que ces formes signifient, ce qui peut se brancher sur quoi, et pourquoi certains fils sont refusés. 🔗

Mis à jour le : 23/09/2026