📂 Tutoriel Détaillé : La Gestion des Contenus (Rich Media & Assets)

Dans Celestory Creator, la création d'expériences interactives ne se limite pas à tracer des liens logiques. Le logiciel embarque une gestion profonde et centralisée de vos contenus multimédias (textes, images, sons, 3D) pour vous permettre de concevoir un produit fini et riche directement depuis le navigateur. ✨
Ce guide détaille comment Celestory gère et organise les différents types de médias et de textes au sein de vos projets.

1. ✍️ L'Éditeur de Texte Riche Intégré (Rich Text Editor)

Fini le texte brut sans saveur ! Les blocs de narration — Dialogue, Narrateur, Alerte, Notification, Choix avec dialogue — et le bloc Markdown sont équipés d'un éditeur de texte visuel. 🎯
🔺 Deux précisions utiles : le bloc Commentaire (la note libre posée sur le canevas) n'a qu'une zone de texte simple, et le bloc HTML5 ouvre un éditeur de code, pas un éditeur visuel.

Fonctionnalités de formatage

Double-cliquez sur le bloc pour ouvrir sa fenêtre d'édition : une barre d'outils surmonte la zone de texte et vous permet de mettre en forme votre contenu sans écrire de HTML ni de CSS.
Dans les blocs de narration (Dialogue, Narrateur, Alerte…) :

• 🎨 Gras, Italique, Souligné, Barré.
• 🔤 Choix de la police et de la taille.
• 🌈 Couleur du texte.
• 🎭 Insertion d'un personnage dans la ligne de dialogue.

Dans un champ de type Texte riche, la barre est plus complète et ajoute :

• 📑 Titres (H1, H2, H3), citations, listes à puces et numérotées.
• ↔️ Alignement du paragraphe.

🔺 Ni les liens hypertextes ni le surlignement (couleur de fond) ne sont proposés aujourd'hui. Pour un texte cliquable ou une mise en évidence sur fond coloré, passez par un bloc HTML5 ou par le bloc CSS.

🧩 L'Injection de Variables (Le Texte Dynamique)

L'utilité principale de cet éditeur est sa capacité à "interpoler" ou "injecter" de la donnée dynamique provenant du graphe.

• Principe : tout mot écrit entre doubles accolades dans un champ de texte crée automatiquement un nouveau point d'entrée sur le bloc. Vous reliez ensuite ce point à une variable, et Celestory remplace la référence par sa valeur à l'exécution.
• Exemple : dans un bloc Dialogue, écrivez Bonjour {{Prenom}}, bienvenue dans cette aventure ! 👋 Une entrée Prenom apparaît aussitôt sur le bloc ; reliez-la à la variable qui contient le prénom du joueur.
• 🔺 Les doubles accolades sont obligatoires. {Prenom} avec une seule accolade ne déclenche rien et s'affichera tel quel. Et une entrée créée mais non reliée restera vide : créer le point ne suffit pas, il faut le câbler.

2. 🗃️ Le Gestionnaire d'Assets (Images, Audios, Vidéos, 3D)

Celestory centralise tous les fichiers médias de votre projet dans un Gestionnaire d'Assets global. Au lieu d'importer une même image cinq fois dans cinq blocs différents, vous l'importez une seule fois dans votre projet et la référencez partout où elle est nécessaire. 🖼️

Types de médias supportés

L'architecture cloud de Celestory est robuste et gère de très nombreux formats :

• 🏞️ Images : PNG, JPEG, WEBP, GIF, SVG (vectoriel), ICO.
• 🎵 Audio : MP3, WAV, OGG, WEBM (pour la musique de fond comme pour les bruitages).
• 🎞️ Vidéos : MP4, WEBM, MOV.
• 🔤 Polices : OTF et TTF, pour habiller votre application avec votre propre typographie.
• 🎭 Animation 2D : Spine, pour animer des personnages articulés. 🔺 Un personnage Spine demande trois fichiers : l'image .png, le fichier .json et le fichier .atlas, à fournir séparément dans l'éditeur de ressource Spine.
• 📄 Documents : JSON, texte, Markdown, PDF, pour les manipulations de données brutes.

📥 Importer et utiliser un Asset

1. L'Upload : ouvrez la fenêtre Fichiers (Cmd+Shift+E) et utilisez le bouton + → Ajouter des fichiers. 🔺 Le glisser-déposer depuis votre ordinateur n'est pas pris en charge : à l'intérieur de la médiathèque, le glisser-déposer sert uniquement à ranger un fichier dans un dossier.
2. ☁️ Stockage Cloud : Celestory optimise (si besoin) et stocke la ressource de manière sécurisée sur ses serveurs.
3. 👁️ Sélection visuelle : Lorsque vous cliquez sur un champ "Image" ou "Son" d'un bloc, la galerie de votre projet s'ouvre, vous permettant de prévisualiser l'asset avant de le lier au bloc.

3. 🤖 Génération IA à la volée (GenAI native)

Celestory intègre profondément l'intelligence artificielle générative. Vous n'avez plus besoin de sortir du Creator pour trouver du contenu. 🚀

🎨 Imagerie In-Game

Via des blocs spécialisés (ex : Requête IA image), vous pouvez générer du contenu visuel pendant la création, ou mieux, pendant l'exécution du projet pour vos utilisateurs. Les appels partent des serveurs de Celestory — vos clés ne sont jamais exposées — vers Fal pour l'image et la vidéo, et vers OpenRouter pour le texte, qui donne accès à de nombreux modèles (Mistral, OpenAI, Anthropic…).

💬 Texte et Données Intelligentes

Le Creator peut également se connecter à des modèles LLM pour générer des dialogues dynamiques, des résumés, ou analyser les actions d'un joueur, rendant l'interface non plus "scellée" mais capable de s'adapter en temps réel aux inputs complexes. 🧠

4. 🌐 Connexions Externes (Le Contenu Headless / API)

Celestory excelle dans sa capacité à ne pas stocker le contenu en interne si vous ne le souhaitez pas. 🔌

✂️ Séparer le "Front" du "Back"

Pour des projets orientés « métier » ou de gros serious games, il est souvent préférable que les textes, images et données proviennent d'une base de données externe neutre — Airtable ou Baserow, qui ont chacun leur bloc dédié. Pour tout autre service, le bloc Requête HTTP fait le travail.

• 🔌 Les blocs connecteurs : Celestory intègre nativement des blocs de requête Airtable et Baserow.
• ⚙️ Fonctionnement : Plutôt que d'écrire le texte dans un Bloc Dialogue, le Graphe lance une opération "Récupérer la Ligne 12 du tableau Airtable", extrait la colonne "Texte", et l'envoie dynamiquement au Bloc Dialogue.
• 🚀 Avantage : 100% du contenu scénaristique, des traductions linguistiques ou du catalogue de produits est modifiable par un non-designer dans Airtable. Celestory se met à jour instantanément sans jamais avoir besoin d'ouvrir le Graphe pour recompiler l'application.

→ Prochaine étape : Maintenant que vous savez écrire du texte formaté et organiser vos médias, découvrez comment compiler cette expérience et la propulser sur le Web grâce au Déploiement et à l'Hébergement. 🌍

Mis à jour le : 21/09/2026