Le bloc Zone cliquable transforme une image en plusieurs boutons invisibles : vous délimitez des zones sur une image (par exemple des boutons "Jouer", "Options", "Quitter" dessinés sur un décor) et chaque zone devient cliquable par le joueur. C'est idéal pour créer un menu illustré ou un jeu où l'on doit trouver et cliquer sur des objets cachés dans une scène ("Point and Click").
Vous n'avez rien à coder : dès que vous ajoutez une zone dans l'image, le bloc crée automatiquement, dans le graphe, la sortie correspondant à cette zone.
📥 Entrées
- in (Flux) : Point d'entrée déclenchant l'affichage de l'image cliquable.
- image (Image Cliquable) : Ressource contenant les zones interactives (calques ou sous-zones) définies au préalable.
- chrono (
timer, Nombre) : (Optionnel) Temps alloué au joueur, en secondes. Avec 0, il n'y a pas de limite. Quand il est écoulé, le scénario continue par la sortie « temps écoulé ». Le temps restant s'affiche sous la forme d'une barre (voir plus bas). - Zones dynamiques (Paramètres) : Entrées supplémentaires générées automatiquement pour chaque zone interactive, permettant de modifier son comportement ou son style avant affichage.
- [Nom du calque] (image) : (Optionnel) Entrée supplémentaire créée pour chaque calque de type Image ou Texte et image. Elle remplace l'image de ce calque (voir plus bas).
📤 Sorties
- [Nom de la zone 1], [Nom de la zone 2], ... (Flux) : Sorties dynamiques créées pour chaque zone interactive de l'image. Un clic sur une zone active la sortie correspondante.
- temps écoulé (
timeout, Flux) : Sortie qui apparaît dès que vous donnez au chrono une valeur supérieure à 0. Elle est suivie quand le temps est écoulé sans qu'une zone ait été cliquée.
🖼️ Changer l'image d'un calque avec une variable
Chaque calque Image ou Texte et image de votre image cliquable reçoit, dans le bloc, une entrée facultative nommée « [nom du calque] (image) ». Reliez-y une variable de type Image (ou une valeur) pour remplacer l'image du calque au moment de l'affichage, sans modifier la ressource image cliquable. Le texte et la bordure du calque sont conservés ; seule l'image change. Les calques de type Forme n'ont pas cette entrée.
Si l'entrée est vide, ou si le fichier est inconnu du projet, le joueur voit l'image d'origine du calque : vous pouvez donc ne renseigner l'entrée que dans certains cas.
Exemple : une même scène de forêt, avec un calque Image « Décor ». Selon une variable Image mise à jour plus tôt dans le scénario (bloc Assigner), le décor affiche la forêt de jour ou de nuit, tandis que les zones à cliquer restent les mêmes.
L'image est choisie au moment où le bloc s'affiche : elle ne change pas pendant que l'image cliquable est à l'écran.
⏱️ La barre du minuteur
Quand un chrono est défini, une fine ligne de 2 pixels de haut se vide à mesure que le temps passe, dans les modèles Chatbot et Visual Novel. Elle est centrée en bas de la fenêtre du lecteur, à hauteur fixe : elle ne suit pas la taille de l'image. Elle rétrécit des deux côtés vers le centre, a la même couleur que le minuteur des blocs de choix du module et laisse passer les clics vers les zones.
Si le joueur a demandé à son appareil de réduire les animations, la barre baisse par paliers d'une seconde au lieu de se vider en continu. Pour les lecteurs d'écran, la barre est annoncée comme une progression « Temps restant », mise à jour à la seconde.
💡 Exemple d'utilisation
Scénario : Menu d'accueil personnalisé avec boutons visuels
- Vous avez préparé une ressource Image Cliquable représentant un écran d'accueil avec trois boutons : "Jouer", "Options" et "Quitter".
- Dans le graphe, ajoutez un bloc Zone cliquable et connectez-le à un déclencheur (ex: chargement du module).
- Assignez votre image à l'entrée image du bloc.
- Le bloc affiche maintenant trois sorties : "Jouer", "Options" et "Quitter".
- Connectez la sortie "Jouer" à un bloc de lancement de partie, "Options" à un menu de configuration, et "Quitter" à une confirmation de sortie.
⚙️ Détails Techniques
- Identifiant interne :
clickableZoneChoice - Gestion dynamique des sorties : Le bloc analyse l'image pour générer automatiquement les sorties correspondantes aux zones interactives.
- Compatibilité : Prend en charge les calques de type TextWithImage pour l'extraction de texte (utile pour la traduction).
- Optimisation : Les entrées dynamiques permettent des ajustements en temps réel sans modifier la ressource image.
- Blocs déjà présents dans un module créé avant la version 6.1 : les entrées « (image) » apparaissent quand vous modifiez l'image cliquable utilisée par le bloc.
Disponible à partir de la version 6.1 du Creator (entrée image par calque, barre du minuteur en ligne fine).
Version documentée : v3