🗂️ 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 : 20/10/2021