📑 Créer un menu et ses pages
Lien de l'exemple: https://creator.celestory.io/project/wAsAqEoND
Vous pouvez créer vos menus grâce à de nombreux éléments:
Allez dans Menu principal (bouton bleu portant le titre de votre projet en haut à gauche de l'interface de création), puis cliquez sur Menus.
Si votre projet n'en possède pas, il vous sera proposé de créer votre menu.
Cliquez sur "Ajouter votre premier menu"
La fenêtre de création de menus apparaît.
Un menu est un écran fixe dans votre application qui affiche différent éléments que vous pouvez disposer dans l'ordre et la position que vous le souhaitez. A droite vous pouvez voir une prévisualisation en direct du menu et choisir en haut à droite le ratio de prévisualisation.
Il existe 3 types de menus:
Le menu personnalisé
Le plus courant des menus. Il s'active dès que l'application se lance, et vous permet de rajouter autant de pages que vous le souhaitez, tout en vous permettant de lancer des modules de parcours personnalisés (qui créeront de la data) sous forme d'arborescence.
L'ATH
L'Affichage Tête Haute permet lors d'un parcours personnalisé d'afficher une interface d'éléments en haut de l'écran, notamment les boutons, icones et variables (comme les scores ou le taux de complétion) afin de donner constament des feedbacks à l'utilisateur.
Le menu overlay
Le menu overlay sera placé en surimpression d'un parcours personnalisé. Particulièrement utile pour mettre l'expérience en pause, régler des paramètres ou encore revenir au menu principal ou afficher une aide par exemple.
Commençons par constituer notre menu d'accueil.
Pour le nom du menu, vous pouvez en changer par défaut qui se nomme menu principal.
Pour le fond du menu, il peut y avoir soit une image de fond (et sans image une coleur unie par défaut).
Il peut y avoir également en fond un Style de bordure (qui correspond à un style que vous pouvez créer en allant dans Menu principal/Styles, utilisable également dans les bulles de dialogues ou des bulles d'alerte).
Pour le son du menu, en cliquant sur Ajouter une ressource, vous pouvez choisir un son en arrière plan qui sera joué automatiquement en arrivant sur le menu en question.
Le son (mp3) devra être préalablement uploadé dans les Fichiers du projet.
Pour mettre en forme votre menu, cliquez sur Ajouter un élément.
Les éléments que vous pouvez mettre en page sont:
Texte: dont vous pouvez changer la police, la couleur et l'agencement
Image: affiche une image issue des fichiers du projet
Son: joue un son issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Video: joue une vidéo issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Layout: un sous-menu contenant lui-même des éléments que vous pouvez ajuster verticalement ou horizontalement (pratique pour créer des "grilles d'éléments")
Espacement: crée un espace pour écarter les éléments de façon harmonieuse et responsive (adaptable à toute résolution).
Page web: intègre une webpage (web site, web app...) dans l'app, plus besoin de quitter l'app pour avoir accès à de nombreuses fonctionnalités web.
Variable: affiche la valeur d'une variable de façon persistante (fiches de scores...) et peut, pour une condition vrai/faux, n'afficher qu'une image ou pas.
Lien internet: un bouton vous permettant de diriger l'utilisateur vers une adresse web.
Bouton pour ouvrir un menu: un bouton qui dirige l'utilisateur vers un autre menu (pour actionner un changement de variable, il faudra repasser par un graphe)
Réglage musique: une jauge pour régler le volume du fond sonore du menu et du bloc Play music
Réglage son: une jauge pour régler le volume du son des boutons
Jauge simple: une barre animée qui montrera la progression d'une variable numérique. En combiner plusieurs permet de faire des graphiques statistiques.
Bouton commencer: pour lancer le bloc Start d'un module
Bouton continuer: pour lancer le Fil de l'Histoire à partir de la dernière sauvegarde (des variables et de l'emplacement dans le graphe) grâce au bloc Checkpoint.
Réseaux sociaux: un lien vers différents réseaux sociaux
Bouton ouvrir un menu overlay: ouvre un menu en surimpression du menu ou du player jouant le graphe. Ce bouton se situe souvent sur l'ATH, soit donc en haut du player.
Bouton fermer un menu overlay: ferme le menu en surimpression pour revenir au player jouant le graphe ou le menu sur lequel est l'utilisateur.
Bouton pour changer la langue: change la langue de l'application (s'il s'agit de la langue traduite, autre que celle du graphe, il faudra au préalable importer le texte dans la langue cible par le système de traduction).
Les éléments partagent fonctionnalités lorsqu'on ouvre leur fenêtre d'éditions:
Ouvrez une fenêtre d'édition en cliquant sur le stylo, symbole d'édition de l'élément
L'alignement de l'élément n'est utile que si votre élément est présent dans un layout, soit un sous-menu: il représente la capacité à aligner votre élément au départ de votre sens de lecture (à gauche dans la plupart des langues) à la fin de celui-ci (et donc alignement à droite généralement, de façon inversée si votre langue se lit de droite à gauche), à le centrer ou l'étirer.
Plus d'information sur l'alignement CSS pour les curieux via ce lien
L'alignement du texte par exemple se fait directement dans la partie où l'on écrit le texte.
L'apparence de l'élément vous permet de rajouter un fond sur ce dernier, surtout s'il s'agit d'un bouton, duquel vous pouvez personnaliser la bordure (via un style prédéfini ou créé par vous depuis le menu Styles) ou encore le sélectionner via une image dans vos fichiers du projet.
Modifiez très précisément l'apparence de votre élément en activant l'option de CSS personnalisé dans la catégorie Configuration avancée.
Quelques détails spécifiques aux fenêtres d'édition des différents éléments:
Texte:
La fenêtre d'édition de celui-ci s'ouuvre, vous permettant de changer le contenu du texte...
Son apparence comme sa police (vous pouvez rajouter la vôtre dans le menu Styles), sa couleur ou encore sa taille.
Image
Cliquez sur l'icone d'image...
... pour en choisir parmi les fichiers de votre projet. Puis cliquez sur OK.
L'image est prévisualisée dans la fenêtre d'édition de l'élément ainsi que dans la zone de visualisation du menu complet.
Vous pouvez dès lors fermer la fenêtre d'édition de l'image.
Son: joue un son issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Video: joue une vidéo issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Layout:
En cliquant sur l'icone d'édition d'un élément Layout, c'est-à-dire un sous-menu, la fenêtre d'édition de l'élément Layout apparaît et vous permet de créer les éléments de ce sous-menu, qui sont les mêmes que ceux d'un menu personnalisé.
Créons 3 éléments de Texte par exemple, chacun contenant un émoji.
Espacement:
La fenêtre d'édition de l'élément de l'Espacement vous propose une option pour Prendre toute la place disponible.
Les Espacements vous permettent de créer un espace pour répartir au mieux les autres éléments en place. Un Espacement va prendre toute la place disponible dans les limites de l'écran du menu, si cette option est restée cochée.
Ainsi, en rajoutant plusieurs éléments,...
... tous les éléments sont repoussés au maximum.
_Note: Vous pouvez également décocher l'option Prendre toute la place disponible et changer la taille de l'espacement manuellement, avec une échelle de pixels ou encore de pourcentage (apprenez en plus sur les échelles de CSS via ce lien
Page web:
Dans la fenêtre d'édition de l'élément variable, vous pouvez saisir une URL à intégrer dans votre application.
N'oubliez pas de créer un bouton menant à votre menu précédent, sinon votre utilisateur sera bloqué sur ce menu.
Variable:
Dans la fenête d'édition de l'élément variable, vous pouvez sélectionner une des variables du projet.
Dans la section Apparence, vous pouvez personnaliser le fond de l'élément de la variable.
Choisissez une variable...
...sa valeur affichée changera en temps réelle avec les interactions de l'utilisateur dans le graphe.
Ici la valeur initiale étant de 0 et aucune session n'ayant été lancée, 0 est affiché.
Vous pouvez également utliser l'élément Layout, contenant une variable pour en afficher la valeur, ainsi qu'un texte pour indiquer l'échelle de score à laquelle elle est comparée.
La direction des éléments du Layout peut être horizontale ou vericale.
Si vous choisissez une variable booléenne, vous pouvez personnalisé son apparence sous forme d'image ou de texte en fonction de sa valeur, Vrai ou Faux.
Plus d'information sur
les variables booléennes (vrai/faux) dans ☑️ Mettre en place des conditions
les variables numériques dans 🧮 Mettre en place des conditions (avancé)
les variables textuelles dans 🔑 Entrer un mot-clé ou un code (avancé)
Lien internet:
La fenêtre d'édition de l'élément Lien internet vous permet de changer le texte du lien du bouton, ainsi que le lien de l'URL vers lequel vous voulez que celui-ci renvoie.
Bouton pour ouvrir un menu:
Vous pourrez créer un bouton vous permettant de passer d'un menu personnalisé à l'autre.
Veuillez à bien créer votre menu cible d'abord en cliquant sur le bouton Ajouter à droite du menu déroulant de sélection des menus.
Choisissez Menu personnalisé puis faites OK.
Vous êtes redirigé vers l'éditeur de votre nouveau menu.
N'hésitez pas à le renommer pour le retrouver plus facilement.
Par exemple, nommons-le Détails de l'app.
En revenant dans le menu principal via le menu de sélection de menus, et en ouvrant de nouveau la fenêtre d'édition de l'élément Bouton pour ouvrir un menu, vous pouvez définir le Menu à ouvrir en appuyant sur le bouton "Plus d'informations".
Sélectionnons par exemple Détails de l'app.
Réglage musique:
Vous pouvez ici changer l'icone du volume des sons joués en fond du menu, ou en fond de l'expérience s'il la jauge est actionnée à ce moment là.
Vous pouvez aussi changer le design du curseur, le fond de l'élément et l'apparence du Slider parmi les styles par défaut ou les vôtres.
Réglage son:
Comme Réglage musique, vous permet de configurer l'icone du volume des sons joués lors de appuie sur un bouton du menu, ou d'un menu lors de l'expérience s'il la jauge est actionnée à ce moment là.
Vous pouvez aussi changer le design du curseur, le fond de l'élément et l'apparence du Slider parmi les styles par défaut ou les vôtres.
Jauge simple:
La jauge vous permet de visualiser dynamiquement le changement de valeur d'une variable numérique.
Vous pouvez en changer la couleur, définir un minimum et un maximum, ainsi qu'afficher la valeur en cours.
Bouton commencer:
Vous permet de rediriger l'utilisateur vers l'un de vos modules contenant vos graphes.
N'oubliez pas de créer vos modules d'abord en cliquant sur Ajouter en bas à gauche du menu latéral.
Dans la fenêtre d'édition de l'élément Bouton commencer, vous pouvez ensuite sélectionner le Module cible, qui renverra d'abord vers son Graphe de départ (et de là, vous pourrez faire atteindre l'ensemble des sous-graphes du module à votre utilisateur).
L'option de Réinitialiser les variables est utile lorsque vous ne voulez pas que l'historique des actions de l'utilisateur soit pris en compte dans ce nouveau passage.
Bouton continuer:
Dans cette fenêtre vous pouvez changer le texte du bouton Continuer ainsi que son apparence. Il renverra vers le dernier Checkpoint par lequel est passé l'utilisateur et ses valeurs de variables seront chargées.
Plus d'information sur l'article du bloc 🟦 Checkpoint
Réseaux sociaux:
Vous pouvez ici définir les liens de vos réseaux sociaux, leur icones et leur taille qui seront centrées pour rentrer dans un espace horizontal.
Bouton ouvrir un menu overlay:
Avant de créer un Bouton ouvrir un menu overlay, vous devez créer un menu ATH (Affichage Tête Haute) en cliquant sur Ajouter à droite de la sélection déroulante de menus.
Vous passez automatiquement à l'édition du Menu ATH, qui est un menu en hauteur de l'expérience utilisateur lorsqu'il joue le graphe de l'app.
Ensuite, créons l'élément Bouton ouvrir un menu overlay.
Dans la fenêtre d'édition de celui-ci, vous pouvez changer le texte du bouton, son apparence (via une bordure ou une image).
Ainsi pendant lorsque le joueur joue le graphe, il voit un Bouton sur lequel il peut appuyer pour avoir accès à un menu overlay.
Note: Vous pouvez aller même beaucoup plus loin en créant une interface plus poussée de l'ATH, par exemple ici avec une composition horonzontale d'une variable (connectée à la variable numérique Score), d'un Texte ("points"), d'un espacement et d'un Bouton ouvrir menu overlay.
Il faut ensuite créer un Menu overlay en cliquant sur Ajouter à droite de la sélection déroulante de menus.
Vous passez automatiquement à l'édition du Menu overlay, qui est un menu en surimpression.
Dans cet exemple, nous le nommons Statistiques.
Vous pouvez changer le style de bordure du menu overlay, dont la bordure englobe tous les éléments.
Ici, nous avons créé un élément Layout (un sous-menu) avec 2 éléments: variable (que nous avons connecté à la variable numérique Complétion) ainsi qu'un texte indiquant à l'utilisateur l'échelle de complétion ("/5pages")
Vous pouvez également activer l'option pour Mettre l'histoire en pause, ce qui, si le menu overlay est ouvert pendant que l'utilisateur joue un graphe, mettra l'expérience en pause.
Bouton fermer un menu overlay:
Enfin n'oubliez pas de créer un élément Fermer le menu overlay pour permettre à l'utilisateur de quitter ce menu en surimpression.
Concrètement, lorsque le joueur jouera le graphe et cliquera sur le Bouton ouvrir menu overlay, il verra le menu overlay Statistiques, qu'il pourra refermer à tout instant.
Bouton pour changer la langue:
Vous pouvez créer un Bouton pour changer de langue si vous avez importé préalablement la traduction des textes de votre app dans la langue cible, via un fichier au format po et le menu Traduire (disponible dans le Menu Principal).
Plus d'informations dans la section: 🔡 Traduire son application
Une fois fait, la fenêtre d'édition de l'élément Bouton pour changer la langue vous permet de choisi la langue vers lequel sera traduit l'app, ainsi que le texte du bouton.
Pour tester le Bouton, vous devez Jouer en Testant l'application.
Lancez si possible le test en Ouvrant le Menu prinicipal via le menu déroulant en haut du projet, sous Jouer le module courant.
Le Test se lance. Cliquez sur English.
L'application passe alors en anglais.
Pour revenir à la langue d'origine, ou choisir une autre langue, n'oubliez pas de créer autant de Boutons pour changer la langue qu'il y a de langue.
Vous pouvez créer vos menus grâce à de nombreux éléments:
1. Créer son menu
Allez dans Menu principal (bouton bleu portant le titre de votre projet en haut à gauche de l'interface de création), puis cliquez sur Menus.
Si votre projet n'en possède pas, il vous sera proposé de créer votre menu.
Cliquez sur "Ajouter votre premier menu"
La fenêtre de création de menus apparaît.
Un menu est un écran fixe dans votre application qui affiche différent éléments que vous pouvez disposer dans l'ordre et la position que vous le souhaitez. A droite vous pouvez voir une prévisualisation en direct du menu et choisir en haut à droite le ratio de prévisualisation.
2. Les types de menus
Il existe 3 types de menus:
Le menu personnalisé
Le plus courant des menus. Il s'active dès que l'application se lance, et vous permet de rajouter autant de pages que vous le souhaitez, tout en vous permettant de lancer des modules de parcours personnalisés (qui créeront de la data) sous forme d'arborescence.
L'ATH
L'Affichage Tête Haute permet lors d'un parcours personnalisé d'afficher une interface d'éléments en haut de l'écran, notamment les boutons, icones et variables (comme les scores ou le taux de complétion) afin de donner constament des feedbacks à l'utilisateur.
Le menu overlay
Le menu overlay sera placé en surimpression d'un parcours personnalisé. Particulièrement utile pour mettre l'expérience en pause, régler des paramètres ou encore revenir au menu principal ou afficher une aide par exemple.
Commençons par constituer notre menu d'accueil.
Pour le nom du menu, vous pouvez en changer par défaut qui se nomme menu principal.
Pour le fond du menu, il peut y avoir soit une image de fond (et sans image une coleur unie par défaut).
Il peut y avoir également en fond un Style de bordure (qui correspond à un style que vous pouvez créer en allant dans Menu principal/Styles, utilisable également dans les bulles de dialogues ou des bulles d'alerte).
Pour le son du menu, en cliquant sur Ajouter une ressource, vous pouvez choisir un son en arrière plan qui sera joué automatiquement en arrivant sur le menu en question.
Le son (mp3) devra être préalablement uploadé dans les Fichiers du projet.
Pour mettre en forme votre menu, cliquez sur Ajouter un élément.
3. Les éléments des menus
Les éléments que vous pouvez mettre en page sont:
Texte: dont vous pouvez changer la police, la couleur et l'agencement
Image: affiche une image issue des fichiers du projet
Son: joue un son issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Video: joue une vidéo issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Layout: un sous-menu contenant lui-même des éléments que vous pouvez ajuster verticalement ou horizontalement (pratique pour créer des "grilles d'éléments")
Espacement: crée un espace pour écarter les éléments de façon harmonieuse et responsive (adaptable à toute résolution).
Page web: intègre une webpage (web site, web app...) dans l'app, plus besoin de quitter l'app pour avoir accès à de nombreuses fonctionnalités web.
Variable: affiche la valeur d'une variable de façon persistante (fiches de scores...) et peut, pour une condition vrai/faux, n'afficher qu'une image ou pas.
Lien internet: un bouton vous permettant de diriger l'utilisateur vers une adresse web.
Bouton pour ouvrir un menu: un bouton qui dirige l'utilisateur vers un autre menu (pour actionner un changement de variable, il faudra repasser par un graphe)
Réglage musique: une jauge pour régler le volume du fond sonore du menu et du bloc Play music
Réglage son: une jauge pour régler le volume du son des boutons
Jauge simple: une barre animée qui montrera la progression d'une variable numérique. En combiner plusieurs permet de faire des graphiques statistiques.
Bouton commencer: pour lancer le bloc Start d'un module
Bouton continuer: pour lancer le Fil de l'Histoire à partir de la dernière sauvegarde (des variables et de l'emplacement dans le graphe) grâce au bloc Checkpoint.
Réseaux sociaux: un lien vers différents réseaux sociaux
Bouton ouvrir un menu overlay: ouvre un menu en surimpression du menu ou du player jouant le graphe. Ce bouton se situe souvent sur l'ATH, soit donc en haut du player.
Bouton fermer un menu overlay: ferme le menu en surimpression pour revenir au player jouant le graphe ou le menu sur lequel est l'utilisateur.
Bouton pour changer la langue: change la langue de l'application (s'il s'agit de la langue traduite, autre que celle du graphe, il faudra au préalable importer le texte dans la langue cible par le système de traduction).
4. Les fonctionnalités communes aux éléments
Les éléments partagent fonctionnalités lorsqu'on ouvre leur fenêtre d'éditions:
Ouvrez une fenêtre d'édition en cliquant sur le stylo, symbole d'édition de l'élément
L'alignement de l'élément n'est utile que si votre élément est présent dans un layout, soit un sous-menu: il représente la capacité à aligner votre élément au départ de votre sens de lecture (à gauche dans la plupart des langues) à la fin de celui-ci (et donc alignement à droite généralement, de façon inversée si votre langue se lit de droite à gauche), à le centrer ou l'étirer.
Plus d'information sur l'alignement CSS pour les curieux via ce lien
L'alignement du texte par exemple se fait directement dans la partie où l'on écrit le texte.
L'apparence de l'élément vous permet de rajouter un fond sur ce dernier, surtout s'il s'agit d'un bouton, duquel vous pouvez personnaliser la bordure (via un style prédéfini ou créé par vous depuis le menu Styles) ou encore le sélectionner via une image dans vos fichiers du projet.
Modifiez très précisément l'apparence de votre élément en activant l'option de CSS personnalisé dans la catégorie Configuration avancée.
5. Les fonctionalités d'éléments spécifiques
Quelques détails spécifiques aux fenêtres d'édition des différents éléments:
Texte:
La fenêtre d'édition de celui-ci s'ouuvre, vous permettant de changer le contenu du texte...
Son apparence comme sa police (vous pouvez rajouter la vôtre dans le menu Styles), sa couleur ou encore sa taille.
Image
Cliquez sur l'icone d'image...
... pour en choisir parmi les fichiers de votre projet. Puis cliquez sur OK.
L'image est prévisualisée dans la fenêtre d'édition de l'élément ainsi que dans la zone de visualisation du menu complet.
Vous pouvez dès lors fermer la fenêtre d'édition de l'image.
Son: joue un son issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Video: joue une vidéo issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Layout:
En cliquant sur l'icone d'édition d'un élément Layout, c'est-à-dire un sous-menu, la fenêtre d'édition de l'élément Layout apparaît et vous permet de créer les éléments de ce sous-menu, qui sont les mêmes que ceux d'un menu personnalisé.
Créons 3 éléments de Texte par exemple, chacun contenant un émoji.
Espacement:
La fenêtre d'édition de l'élément de l'Espacement vous propose une option pour Prendre toute la place disponible.
Les Espacements vous permettent de créer un espace pour répartir au mieux les autres éléments en place. Un Espacement va prendre toute la place disponible dans les limites de l'écran du menu, si cette option est restée cochée.
Ainsi, en rajoutant plusieurs éléments,...
... tous les éléments sont repoussés au maximum.
_Note: Vous pouvez également décocher l'option Prendre toute la place disponible et changer la taille de l'espacement manuellement, avec une échelle de pixels ou encore de pourcentage (apprenez en plus sur les échelles de CSS via ce lien
Page web:
Dans la fenêtre d'édition de l'élément variable, vous pouvez saisir une URL à intégrer dans votre application.
N'oubliez pas de créer un bouton menant à votre menu précédent, sinon votre utilisateur sera bloqué sur ce menu.
Variable:
Dans la fenête d'édition de l'élément variable, vous pouvez sélectionner une des variables du projet.
Dans la section Apparence, vous pouvez personnaliser le fond de l'élément de la variable.
Choisissez une variable...
...sa valeur affichée changera en temps réelle avec les interactions de l'utilisateur dans le graphe.
Ici la valeur initiale étant de 0 et aucune session n'ayant été lancée, 0 est affiché.
Vous pouvez également utliser l'élément Layout, contenant une variable pour en afficher la valeur, ainsi qu'un texte pour indiquer l'échelle de score à laquelle elle est comparée.
La direction des éléments du Layout peut être horizontale ou vericale.
Si vous choisissez une variable booléenne, vous pouvez personnalisé son apparence sous forme d'image ou de texte en fonction de sa valeur, Vrai ou Faux.
Plus d'information sur
les variables booléennes (vrai/faux) dans ☑️ Mettre en place des conditions
les variables numériques dans 🧮 Mettre en place des conditions (avancé)
les variables textuelles dans 🔑 Entrer un mot-clé ou un code (avancé)
Lien internet:
La fenêtre d'édition de l'élément Lien internet vous permet de changer le texte du lien du bouton, ainsi que le lien de l'URL vers lequel vous voulez que celui-ci renvoie.
Bouton pour ouvrir un menu:
Vous pourrez créer un bouton vous permettant de passer d'un menu personnalisé à l'autre.
Veuillez à bien créer votre menu cible d'abord en cliquant sur le bouton Ajouter à droite du menu déroulant de sélection des menus.
Choisissez Menu personnalisé puis faites OK.
Vous êtes redirigé vers l'éditeur de votre nouveau menu.
N'hésitez pas à le renommer pour le retrouver plus facilement.
Par exemple, nommons-le Détails de l'app.
En revenant dans le menu principal via le menu de sélection de menus, et en ouvrant de nouveau la fenêtre d'édition de l'élément Bouton pour ouvrir un menu, vous pouvez définir le Menu à ouvrir en appuyant sur le bouton "Plus d'informations".
Sélectionnons par exemple Détails de l'app.
Réglage musique:
Vous pouvez ici changer l'icone du volume des sons joués en fond du menu, ou en fond de l'expérience s'il la jauge est actionnée à ce moment là.
Vous pouvez aussi changer le design du curseur, le fond de l'élément et l'apparence du Slider parmi les styles par défaut ou les vôtres.
Réglage son:
Comme Réglage musique, vous permet de configurer l'icone du volume des sons joués lors de appuie sur un bouton du menu, ou d'un menu lors de l'expérience s'il la jauge est actionnée à ce moment là.
Vous pouvez aussi changer le design du curseur, le fond de l'élément et l'apparence du Slider parmi les styles par défaut ou les vôtres.
Jauge simple:
La jauge vous permet de visualiser dynamiquement le changement de valeur d'une variable numérique.
Vous pouvez en changer la couleur, définir un minimum et un maximum, ainsi qu'afficher la valeur en cours.
Bouton commencer:
Vous permet de rediriger l'utilisateur vers l'un de vos modules contenant vos graphes.
N'oubliez pas de créer vos modules d'abord en cliquant sur Ajouter en bas à gauche du menu latéral.
Dans la fenêtre d'édition de l'élément Bouton commencer, vous pouvez ensuite sélectionner le Module cible, qui renverra d'abord vers son Graphe de départ (et de là, vous pourrez faire atteindre l'ensemble des sous-graphes du module à votre utilisateur).
L'option de Réinitialiser les variables est utile lorsque vous ne voulez pas que l'historique des actions de l'utilisateur soit pris en compte dans ce nouveau passage.
Bouton continuer:
Dans cette fenêtre vous pouvez changer le texte du bouton Continuer ainsi que son apparence. Il renverra vers le dernier Checkpoint par lequel est passé l'utilisateur et ses valeurs de variables seront chargées.
Plus d'information sur l'article du bloc 🟦 Checkpoint
Réseaux sociaux:
Vous pouvez ici définir les liens de vos réseaux sociaux, leur icones et leur taille qui seront centrées pour rentrer dans un espace horizontal.
Bouton ouvrir un menu overlay:
Avant de créer un Bouton ouvrir un menu overlay, vous devez créer un menu ATH (Affichage Tête Haute) en cliquant sur Ajouter à droite de la sélection déroulante de menus.
Vous passez automatiquement à l'édition du Menu ATH, qui est un menu en hauteur de l'expérience utilisateur lorsqu'il joue le graphe de l'app.
Ensuite, créons l'élément Bouton ouvrir un menu overlay.
Dans la fenêtre d'édition de celui-ci, vous pouvez changer le texte du bouton, son apparence (via une bordure ou une image).
Ainsi pendant lorsque le joueur joue le graphe, il voit un Bouton sur lequel il peut appuyer pour avoir accès à un menu overlay.
Note: Vous pouvez aller même beaucoup plus loin en créant une interface plus poussée de l'ATH, par exemple ici avec une composition horonzontale d'une variable (connectée à la variable numérique Score), d'un Texte ("points"), d'un espacement et d'un Bouton ouvrir menu overlay.
Il faut ensuite créer un Menu overlay en cliquant sur Ajouter à droite de la sélection déroulante de menus.
Vous passez automatiquement à l'édition du Menu overlay, qui est un menu en surimpression.
Dans cet exemple, nous le nommons Statistiques.
Vous pouvez changer le style de bordure du menu overlay, dont la bordure englobe tous les éléments.
Ici, nous avons créé un élément Layout (un sous-menu) avec 2 éléments: variable (que nous avons connecté à la variable numérique Complétion) ainsi qu'un texte indiquant à l'utilisateur l'échelle de complétion ("/5pages")
Vous pouvez également activer l'option pour Mettre l'histoire en pause, ce qui, si le menu overlay est ouvert pendant que l'utilisateur joue un graphe, mettra l'expérience en pause.
Bouton fermer un menu overlay:
Enfin n'oubliez pas de créer un élément Fermer le menu overlay pour permettre à l'utilisateur de quitter ce menu en surimpression.
Concrètement, lorsque le joueur jouera le graphe et cliquera sur le Bouton ouvrir menu overlay, il verra le menu overlay Statistiques, qu'il pourra refermer à tout instant.
Bouton pour changer la langue:
Vous pouvez créer un Bouton pour changer de langue si vous avez importé préalablement la traduction des textes de votre app dans la langue cible, via un fichier au format po et le menu Traduire (disponible dans le Menu Principal).
Plus d'informations dans la section: 🔡 Traduire son application
Une fois fait, la fenêtre d'édition de l'élément Bouton pour changer la langue vous permet de choisi la langue vers lequel sera traduit l'app, ainsi que le texte du bouton.
Pour tester le Bouton, vous devez Jouer en Testant l'application.
Lancez si possible le test en Ouvrant le Menu prinicipal via le menu déroulant en haut du projet, sous Jouer le module courant.
Le Test se lance. Cliquez sur English.
L'application passe alors en anglais.
Pour revenir à la langue d'origine, ou choisir une autre langue, n'oubliez pas de créer autant de Boutons pour changer la langue qu'il y a de langue.
Mis à jour le : 28/05/2021
Merci !