Articles sur : ÉlĂ©ments de l'outil
Cet article est aussi disponible en :

đŸ—‚ïž RĂ©glages de modules (design)


Chaque projet est décomposé en Modules, tel des Chapitres.


Chaque module partage le mĂȘme Nom et ModĂšle, les mĂȘmes prĂ©rĂ©glages de Design ainsi que les mĂȘmes Personnages.


Pour changer ces éléments, allez dans Réglage du module, option disponible en dessous de chaque groupe de graphe d'un module sur la barre latérale gauche.



Voici de dĂ©tails des onglets de la fenĂȘtre des RĂ©glages du module :


Général


Dans ce menu, vous pouvez renommer et dupliquer votre module.



Note : Pour supprimer un sous-graphe, vous devez d'abord sélectionner un sous-graphe puis cliquer sur la croix à droite de son nom dans le menu latéral (supprimer un graphe de départ n'est possible qu'en supprimant un module).



Personnages


C'est dans ce menu que vous pouvez modifier ou créer vos personnages.
Pour ajouter un personnage, cliquez sur le bouton Ajouter personnage.



Note : Il existe une bibliothĂšque de personnages prĂȘts Ă  ĂȘtre utilisĂ©s disponible dans l'exemple [đŸ•ș Personnages animĂ©s] (https://creator.celestory.io/project/JhOjVBxRv)


N'hĂ©sitez pas Ă  renommer les personnages de façon Ă  les retenir facilement car vous devrez les nommer dans la zone de texte des blocs đŸŸ© Dialogue pour les faire apparaĂźtre.


Plusieurs options :


Nom : Nommez votre personnage.


Apparition : Changer le cÎté duquel apparaßt votre personnage (à faire correspondre avec l'orientation de l'image de votre personnage) ou si il apparaßt en fondu.


Image : Sélectionnez le ficher image de votre personnage dans les fichiers du projet.


Apparence des dialogues : Personnalisez la bordure de votre personnage pour le faire ressortir dans vos dialogues.


Style du texte : Personnalisez la police de votre personnage.


Supprimer : Supprime votre personnage (pas le fichier Image associé).


Style de l'app



Cadre



Vous pouvez cadrer votre jeu pour que celui-ci puisse s’adapter Ă  tout type de support et rĂ©solution.


Largeur maximale


Cette fonction vous permet de sélectionner la largeur du cadre de votre feed. Différentes mesures vous sont proposées, comme la taille en pixel ou le pourcentage de remplissage de l'écran.


Note : Vous pouvez choisir plusieurs unités de mesure : pixels (px), pourcentage de l'écran (%), ou d'autres unités lié au CSS.


Couleur de fond


Cette fonction vous permet de choisir la couleur qui s'affiche quand le cadre dépasse du feed.



Image de fond


Cette fonction vous permet d'importer une image de fond qui viendra remplir ce qui dépasse du cadre de votre feed. Elle n'est donc pas à confondre avec le fond.


Url


Le champ Url permet de mettre un lien direct vers une image plutĂŽt que d'utiliser un fichier de projet.


Fond



Vous avez la possibilité de modifier le fond de votre jeu : soit en utilisant une image, soit en sélectionnant une couleur de votre choix.


Couleur


Un colorpicker est Ă  votre disposition pour choisir la couleur qui vous convient.


Vous pouvez aussi sĂ©lectionner l’image de votre choix pour qu'elle apparaisse en fond. 


Pour adapter le rendu, plusieurs fonctions sont à votre disposition dans le menu Afficher les options avancées (disponible une fois une image sélectionnée) :


Position


Vous pouvez modifier les axes X et Y pour rogner votre image pour quelle s’adapte parfaitement à votre contenu.


Taille


Comme lorsque vous changer votre fond d’écran sur votre systĂšme d’exploitation, vous pouvez adapter la taille de votre image et obtenir un rendu spĂ©cifique. Les rendus possibles sont les suivants : "automatique" (remplissage par dĂ©faut), "couvrir" (la taille de l'image est adaptĂ©e pour entrer pleinement dans le cadre, quitte Ă  ĂȘtre rĂ©trĂ©cie), "contenue" (l'image est Ă©largie jusqu'Ă  couvrir tout le fond), "personnalisĂ©e".


Repeat


Autre fonction pour adapter et optimiser l’affichage de votre image de fond. Certaines options permettent par exemple d'arrondir l'image ou d'en faire des mosaïques totales ("repeat"), horizontales ("repeat X") ou verticale ("repeat Y").


L'option Enlever l'image permet de retirer l'image préalablement sélectionnée.


Flux



Plusieurs fonctions vous permettent d’organiser comme vous le souhaitez le flux d’information de votre app. Attention, il ne s'agit pas du Flux de l'arborescence, mais bien du mur qui vous permet de scroller à travers les affichages du template Chatbot.


En modifiant les fonctions ci-dessous, le flux d’information (personnages, bulles de discussion, textes
) s’affichera de façon diffĂ©rente. 


Largeur (en %)


Vous permet d’ajuster la largeur du flux d’information. Par exemple si vous mettez 100%, le flux information s’étendra sur toute la largeur de votre Ă©cran.


Hauteur (en %)


Vous permet d’ajuster la hauteur du flux d’information. Par exemple si vous mettez 100%, le flux information s’étendra sur toute la hauteur de votre Ă©cran. A l’inverse si vous mettez 0%, aucun contenu ne s’affichera.


Position


Vous pouvez choisir oĂč s’affiche votre flux d’information: en haut, en bas ou au centre.


Couleur du fond


Un colorpicker est accessible pour sĂ©lectionner une couleur de fond. Uniquement au niveau du flux d’information.


Cacher l'effet de fondu


Cette option permet de cacher l'effet visuel de fondu en haut du flux.


ATH


SĂ©lectionnez l'Affichage TĂȘte Haute (les boutons persistants en haut de l'expĂ©rience de l'app comme le bouton ⏞) Ă  afficher. En effet, vous pouvez vouloir changer l'ATH Ă  afficher selon les modules.


Personnages



Cacher les images des personnages


Cette option cachera l'image des personnages durant les dialogues.


Style d'affichage des personnages


Si l'option est activĂ©e, les personnages apparaĂźtront en grand derriĂšre le feed, sinon ils resteront sous forme d’avatar rond (mĂ©daillon).


Arrondir l'image des personnages


Permet d'afficher le portrait du personnage sous la forme d'un médaillon (option activée) ou d'un cadre (option désactivée).


Taille de l'image


Vous pouvez configurer la taille de l'image des personnages (en pixels)


Afficher la bordure


L'option permet d'afficher ou non la bordure autour de l'image du personnage. Il est aussi possible de changer l'épaisseur et la couleur de la bordure.


Bouton d'attente


Activer le bouton d'attente


Décocher cette option va faire défiler automatiquement le flux d'informations.


Texte


Permet d'afficher le texte par dessous le bouton. Par défaut il est écrit "..." mais vous pouvez indiquer: "Taper pour continuer" par exemple.


Style du texte


La police d'écriture et la couleur du texte à afficher dans le bouton d'attente.


Image de bordure


Permet de configurer l'image qui représente le bouton d'attente.


Délais


Durée de transition du bloc Alerte


Permet de configurer le dĂ©lai de transition avant de passer Ă  un bloc ⬛ Alerte


Durée de transition des boites de dialogues


Permet de configurer le dĂ©lai de transition entre les boites de dialogues Ă  l'intĂ©rieur des blocs đŸŸ© Dialogue


Autre


Désactiver la sélection de texte


Cette option permet ou non Ă  l'utilisateur de pouvoir copier votre texte et le coller ailleurs.


Style des blocs



Alerte


Prendre toute la largeur du flux


Etant activĂ©e, cette option permet Ă  la bulle d'alerte de ne plus plus ĂȘtre limitĂ©e Ă  un contour des caractĂšres du texte du bloc. Leur largeur sera toujours maximale.


Vous pouvez également changer le Style et l'Image de Bordure du bloc.


Choix


Dans le oĂč vous utilisez des blocs “choix” dans votre app, vous pouvez personnaliser la façon dont il s’affiche. Pour cela, plusieurs fonctions sont disponible :


Style du texte


Vous pouvez choisir de faire apparaĂźtre votre texte au centre, Ă  droite ou Ă  gauche.

  • Police : Choisissez une typographie que vous convient.
  • Couleur : Un colorpicker est disponible pour changer la couleur de votre texte.
  • Taille du texte : Vous pouvez changer la taille du texte.


Image de bordure


Un large choix d’images de bordure (bulles de discussion) est disponible dans cette fonction. SĂ©lectionnez en un et lancez votre app pour voir le rĂ©sultat. Vous pouvez aussi crĂ©er le votre dans Menu principal/Style (Ă  partir de fichier image que vous importerez) qui s'ajoutera directement Ă  la liste.


Prendre toute la largeur du flux


Cette option vous permet de privilégier le placement des choix à l'horizontal plutÎt que vertical (ils occupent le maximum d'espace disponible).


Son de choix


Vous pouvez choisir un son qui se jouera quand l'utilisateur valide son choix.


Couleur de la barre du timer


Pour changer la couleur du timer quand le temps pour répondre est limité.


Conteneur des choix


Ici vous pouvez configurer le comportement du placement visuel des choix, c'est Ă  dire :

  • La direction : verticale ou horizontale
  • L' alignement : alignĂ© Ă  gauche, au centre ou Ă  droite
  • L' alignement du texte : alignĂ© Ă  gauche, au centre ou Ă  droite


Marges


Vous pouvez ajuster les marges du conteneur des choix pour que les diffĂ©rents Ă©lĂ©ments s’affichent de façon harmonieuse.


Afficher les choix réalisés


Cocher cette fonction permet d'afficher le choix effectué sur le Flux d'information: on pourra donc le retrouver en remontant ce mur.


Couleur du timer


Vous pouvez modifier la couleur du timer apparaissant lors d'un choix chronométré.


Style du texte désactivé & Image de bordure désactivé


S'adresse uniquement au Choix que vous allez dĂ©sactiver via le bloc đŸŸȘ Modifier choix


Dialogues


Vous pouvez personnaliser le style de vos bulles de discussions pour les mĂȘmes paramĂštres que les blocs Alerte et Dialogues : vous pouvez changer le Style des messages (taille, police, couleur) d ou changer leur Image de Bordure.


Note : Vous pouvez Ă©galement dĂ©cider de changer le Style et l'Image de Bordure par personnage. Pour cela, allez dans l'onglet Personnage de la mĂȘme fenĂȘtre de RĂ©glages de module.


Narrateur


Ce menu vous permet de modifier le design textuel du bloc đŸŸ© Narrateur qui a la spĂ©cificitĂ© d'ĂȘtre animĂ©.


Vous pouvez configurer l'animation lettre par lettre, le texte s'affichera alors comme si il Ă©tait en train d'ĂȘtre Ă©crit.


Image


Vous permet de modifier le style du texte que vous souhaitez afficher sur une image, via le bloc đŸŸ© Image


Champs de saisi


Vous permet de modifier le style des textes et boutons des blocs đŸŸ© Saisi


Swipe


Ce menu vous permet de configurer l'affichage des cartes Swipe si vous en utilisez (blocs đŸŸȘ Swipe).
Vous pouvez choisir d'afficher un ATH qui s'affiche en mĂȘme temps que les cartes dans Menu du haut.


Style des choix vous permet de changer la typographie des choix.


Dans En tĂȘte, vous pouvez configurer l'affichage de l'en tĂȘte des cartes de la mĂȘme maniĂšre que Pied de page vous permet de configurer leur pied de page.


Fond vous permet de changer la taille et la couleur du fond qui s'affiche derriĂšre les cartes.


Enfin, Carte vous permet de configurer la taille de vos cartes ainsi que l'image du dos (en fichier de projet ou lien direct).


Notification


Ce menu vous permet de changer l'affichage des blocs đŸŸ© Notification.


Fond


Il est possible de modifier le style textuel du message s'affichant en bas à droite lors d'un changement de fond (qui a lieu lorsque vous utilisez un bloc 🟧 Fond) : vous pouvez modifier la police, sa taille et la couleur du texte.

Mis Ă  jour le : 14/04/2025

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !