Pour personnaliser un texte, il doit ĂȘtre "formatĂ©" par des variables dans un graphique. Une variable est un indicateur qui peut voir sa valeur varier.

Voici la valeur que peut avoir chaque type de variable :

Booléen : Vrai ou Faux
Nombre : 1, 2, 3...
Texte : chaĂźne de caractĂšres

Nous verrons ici comment créer des variables avancées de type texte.

1. Pour commencer dans Celestory

aller Ă  https://creator.celestory.io/home/examples



Ouvrez un exemple en cliquant sur sa couverture ou créez un nouveau projet.

Ouvrons l'exemple de Bot (par exemple !).

Supprimons la partie du graphique aprĂšs le premier choix pour tester la variable Type.



2. Cliquez sur Menu Principal/Variables



Pour supprimer une variable, allez dans le Menu principal/Variables puis cliquez sur Supprimer.



Cliquez sur Ajouter une variable.



3. Créez 2 variables textuelles

en cliquant sur Ajouter une variable et en sélectionnant Texte comme Type de la variable.

La premiĂšre sera Couleur de la pilule. Ensuite, cliquez sur Ajouter une variable.



Inscrivez x comme valeur initiale. 



En procĂ©dant de la mĂȘme maniĂšre, crĂ©ons une deuxiĂšme variable de texte appelĂ©e Nom d'utilisateur avec la valeur initiale de y.



4. Créez un bloc Assignation

qui a la particularité de changer la valeur d'une variable lorsque le Fil de l'Histoire passe par ce bloc. Créez également un bloc de Dialogue aprÚs le choix.

Faites un clic droit sur un espace vide du graphique et cliquez sur Ajouter un bloc.



Cliquez sur le bloc Assigner pour le faire apparaĂźtre.



Maintenez le clic sur le point variable et faites glisser la souris jusqu'Ă  un espace vide du graphique.



Un menu contextuel apparaßt pour sélectionner la variable dont vous souhaitez modifier la valeur. Sélectionnez la Couleur de la pilule.



Ensuite, le point variable est lié. La valeur point est également liée.



Double-cliquez sur le bloc Assignation.



Écrivez en rouge l'affaire de valeur. Cela signifie que le Fil de l'Histoire, en entrant dans le bloc Assignation, va changer la Couleur de la pilule de x à rouge.



Vous pouvez fermer la fenĂȘtre d'Assignation. Reliez le bloc Assignation au bloc de Choix et au bloc Dialogue.

Faisons le mĂȘme processus pour crĂ©er un autre bloc Assignation qui transforme la Couleur de la pilule de x en bleu.



5. Créez une réplique personnalisée

en ouvrant le bloc Dialogue.

Les rĂ©pliques personnalisĂ©es sont appelĂ©es "texte formatĂ©" et la partie Ă  formater (c'est-Ă -dire Ă  personnaliser) doit suivre la syntaxe {{ z }} oĂč z est une inconnue.

Écrivons la ligne à partir du caractùre Alex :

Alex : Vous avez choisi la couleur {{ z }}



Lorsque vous fermez la fenĂȘtre, l'inconnu est automatiquement reconnu par le bloc Dialogue et un z apparaĂźt.



Cliquez et maintenez le clic gauche sur le point z et prolongez-le jusqu'à un espace vide du graphe. Vous devez sélectionner ce que z représente.



SĂ©lectionnez la variable Couleur de la pilule dans le menu contextuel.



Un bloc variable Couleur de la pilule apparaĂźt.



Notez que vous pouvez créer autant de blocs de variables que vous le souhaitez, mais vous pouvez également minimiser le nombre de vos blocs variables en le liant à ses représentations multiples.

Vous auriez donc Ă©galement pu avoir cette configuration :



6. Prévisualisez votre graphe

en cliquant sur Jouer.



Les fenĂȘtres de Tester en Jouant et DĂ©bogue apparaissent.



Notez qu'en cliquant sur la fenĂȘtre du test de jeu pour prĂ©visualiser l'expĂ©rience de l'utilisateur, le Fil de l'Histoire illumine le bloc en cours.

Cliquez dans la fenĂȘtre DĂ©bogue sur l'onglet Variables pour voir la valeur actuelle des variables de texte. La Couleur de la pilule est x et le Nom d'utilisateur est y.



Lorsque vous cliquez sur le choix Rouge par exemple, la valeur x devient rouge.

Dans le mĂȘme temps, le bloc Dialogue affiche le texte personnalisĂ© d'Alex, en indiquant Ă  l'utilisateur la valeur actuelle de la variable texte.



Si nous fermons la fenĂȘtre de jeu et si nous faisons une autre prĂ©visualisation en cliquant Ă  nouveau dessus, mais en choisissant cette fois-ci le Choix Bleu, le mĂȘme texte personnalisĂ© affichera l'autre valeur actuelle : bleu.

Vous pouvez fermer la fenĂȘtre Tester en Jouant.



7. Permettre Ă  l'utilisateur de taper du texte

en créant un bloc Saisie de texte.



Le bloc Saisie de texte apparaĂźt.



Ouvrez-le.



Le texte du bouton est le texte qui sera affiché sur le bouton pour valider la saisie du texte de l'utilisateur. Il est par défaut écrit "OK".

Vous pouvez modifier le style du bouton avec un design prédéfini ou votre propre design (à créer dans Menu principal/Style).

Ensuite, faites dĂ©filer la fenĂȘtre vers le bas.



Le style de texte du bouton est le design du bouton de validation de la Saisie.

Le style de la Saisie permet de modifier le design de la fenĂȘtre de Saisie de texte.

Le style du texte de Saisie permet de modifier le design du texte entré par l'utilisateur.

Écrivons sur le texte du bouton : Valider mon nom.



Puis fermez la fenĂȘtre.

8. Assignons la valeur entrée par l'utilisateur à une variable

en créant un bloc Assignation.



Étendez le point variable du bloc Assignation.



Choisissez Nom d'utilisateur car c'est la variable dont nous voulons changer la valeur.



Liez ensuite les deux blocs en reliant le point de valeur du bloc Saisie de Texte Ă  la valeur du bloc Assignation (cela va la remplacer).



9. Personnaliser la prochaine réplique

en créant un autre bloc Dialogue dans lequel Alex accueillera l'utilisateur. Vous pouvez écrire :

Alex : Bienvenue {{ z }}.



Reliez le bloc Dialogue au bloc Assignation et Ă©tendez le point z Ă  la variable Nom d'utilisateur.



Le bloc de variable Nom d'utilisateur apparaßt. 

Vous auriez Ă©galement pu lier le point z au bloc de variable Nom d'utilisateur car le nombre de bloc variable n'a pas d'influence sur le Fil de l'Histoire.



10. Jouer le graphe depuis le bloc Saisie de texte

en utilisant le clic-droit et sélectionnant Jouer depuis ce bloc.



Vous prévisualisez directement le graphe à partir de ce point.



Cliquez sur l'onglet Variable de la fenĂȘtre DĂ©bogue. Comme vous n'avez pas fait le chemin de l'utilisateur pour changer la valeur de la variable Couleur de la pilule, sa valeur est toujours x.



En tant qu'utilisateur, Ă©crivez votre nom dans la fenĂȘtre de Saisie de Texte. Cliquez ensuite sur Valider mon nom.



Non seulement vous voyez la variable Nom d'utilisateur changer de valeur avec ici Peter mais aussi la ligne Dialogue ĂȘtre personnalisĂ©e avec la mĂȘme valeur. 



You can now delete the graph after the Red or Blue choice for the next step.



11. Créons un tableau de score.

En effet, vous pouvez utiliser un texte personnalisé pour afficher une valeur de type Nombre ou de type booléenne et vous pouvez également afficher un texte personnalisé sur une image.

La variable de type booléen, Pilule rouge prise, a la valeur False par défaut.



Par exemple, créons 2 variables de type Nombre: Courage et Sécurité.  

Faites attention en créant les variables à choisir le bon type.

Supposons que Courage et Sécurité aient une valeur initiale de 5/10.





12. Assignez les valeurs des variables

en créant un premier bloc Assignation aprÚs le choix Rouge, étendez le point variable et choisissez Pilule rouge prise comme variable, puis double-cliquez sur le bloc Assignation pour définir la nouvelle valeur comme Vrai.



Créez ensuite 4 autres blocs : 2 blocs d'Incrémentation aprÚs chaque choix, puis 2 blocs de Décrémentation.

Liez-les ensuite aux variables suivantes et double-cliquez sur chaque bloc pour modifier le nombre de points qu'il faut rajouter ou soustraire.

Partons de la situation suivante :

Le choix de la pilule rouge ajoute 4 points de S_écurité_ et soustrait 1 point de Courage.

Le choix de la pilule bleue ajoute 2 points de Courage et soustrait 3 points de Sécurité.

Vous devriez avoir une situation comme celle-ci :



En détail, vous pouvez voir ici les changements dans les blocs.



Si vous le souhaitez, vous pouvez écrire l'opération mathématique en titres des blocs comme ceci. Vous obtenez une visualisation de vos changements directement sur le graphe.



Créez un bloc Image

Différence entre un bloc Image et un bloc Affichage :

Un bloc Image affiche une image sur le flux, à laquelle vous pouvez ajouter un texte personnalisé.

Un bloc Affichage affichera un média en plein écran (image, vidéo, son) et interrompra le flux. L'utilisateur devra cliquer dessus pour revenir au flux.



Reliez le bloc Image aux blocs Décrémentation précédents et double-cliquez dessus.



Cliquez sur + puis sur l'Ɠil pour sĂ©lectionner une image.



Allez dans le dossier Objets et sélectionnez le fichier image de l'ordinateur portable blanc en double-cliquant dessus ou en cliquant sur OK.



Faites dĂ©filer vers le bas dans la fenĂȘtre du bloc Image. Ici, vous pouvez modifier les marges du texte par rapport Ă  l'image. Entrons une marge supĂ©rieure de 45 pixels.



Vous pouvez fermer la fenĂȘtre du bloc Image.

14. Créons un bloc de Format texte

en utilisant le clic droit et en sélectionnant Format text.



Ouvrez le bloc Format texte.



Le bloc de Format texte vous permet d'écraser un texte sur une image avec un texte personnalisé.

Vous pouvez Ă©crire dans la section format (respectez les lignes vides entre les deux) :

đŸ’Ș Courage {{ a }}}/10

⛑ SĂ©curitĂ© {{ b }}/10

💊 Pilule rouge prise: {{ c }}

Notez qu'au fur et Ă  mesure que vous l'Ă©crivez, les inconnues a, b, c apparaissent dans la fenĂȘtre et dans le bloc sur le graphe.



Vous pouvez fermer la fenĂȘtre.

Etendez chaque point d'inconnu et sélectionnez la variable correspondante : a pour Courage, b pour Sécurité, c pour Pilule rouge prise.

Ensuite, maintenez enfoncé et cliquez avec le bouton gauche de la souris sur le point de texte du Format texte et liez-le au point de texte de Image pour le remplacer.



Modifier la taille de la police du bloc Image en allant dans Réglages du module/Design, faites défiler vers le bas et cliquez sur l'onglet Image.

Sélectionnez 15 comme taille de police et le noir comme couleur. 



Vous pouvez fermer la fenĂȘtre.

15. Prévisualisez le bloc Image

en cliquant dessus avec le bouton droit de la souris et en sélectionnant Jouer depuis ce bloc.



Comme nous ne commençons la prévisualisation qu'à partir de ce bloc, seules les valeurs initiales des variables apparaissent.



16. Jouer le graphe du début

en cliquant sur Jouer.

En fonction de votre choix, vous obtiendrez un tableau d'affichage différent. Voici un exemple :



Dans cet exemple, les 3 variables sont visibles car l'utilisateur en est conscient grĂące Ă  votre retour visuel.

🌟
FĂ©licitations, vous savez comment personnaliser n'importe quel texte dans votre application ! Vous ĂȘtes maintenant en mesure de donner un feedback Ă  votre utilisateur pour chaque action qu'il effectue.

Pour apprendre Ă  maĂźtriser les variables de type boolĂ©en, rendez-vous sur ☑ Mise en place de Conditions.

Pour aller plus loin et apprendre Ă  maĂźtriser les variables de type Nombre, rendez-vous sur 🧼 Mise en place des Conditions (avancĂ©)

Pour comprendre tous les éléments de l'interface, rendez-vous sur les Eléments de l'outil.
Cet article a-t-il répondu à vos questions ?
Annuler
Merci !