💬 Personnaliser un texte/score
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.
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.
Pour supprimer une variable, allez dans le Menu principal/Variables puis cliquez sur Supprimer.
Cliquez sur Ajouter une variable.
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.
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.
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 :
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
Mis à jour le : 29/03/2021
Merci !