Image maps / Point & clic (YAML)

Les image maps transforment une image en zone interactive. L'auteur fournit deux fichiers :

• une image visible, affichee au joueur ;
• un masque PNG, ou chaque couleur plate correspond a une zone.

La fonctionnalite est interactive sur web, desktop et export HTML5 standalone. Sur Discord et terminal, l'image reste affichee comme media/fallback lisible, sans interaction point & clic.

Dans un texte de salle ou dans un encadre HUD :

texte: "[[#map:scene:https://cyril-fiesta.fr/jdr-bot/scenarios/images/showcase/taverne.png|https://cyril-fiesta.fr/jdr-bot/scenarios/images/showcase/taverne-masque.png]]"

Format general :

[[#map:id:image.png|masque.png]]

• id identifie la map dans la salle.
• image.png est l'image visible.
• masque.png est l'image de masque : chaque couleur pleine represente une zone.

Les zones se declarent dans la salle avec la cle zones: puis l'id de la map.

zones:
  scene:
    couleurs:
      - couleur: "#FF0000"
        clic: parler_barman
        highlight: true

      - couleur: "#0000FF"
        clic: examiner_salle
        survol-tooltip: "Regardez attentivement la salle..."
        highlight: true

      - couleur: "#00FF00"
        survol-tooltip: "Une sortie vers la rue."
        survol-event: observer_sortie

Chaque entree de couleurs: associe une couleur du masque a une interaction.

• couleur: : couleur HTML du masque, au format #RRGGBB.
• clic: : id d'un evenement local declenche au clic.
• survol-tooltip: : texte affiche dans une bulle au survol.
• survol-event: : id d'un evenement local declenche au survol.
• highlight: true : affiche la zone en surbrillance au survol.

Les ids references par clic: ou survol-event: doivent correspondre a des evenements de la salle.

evenements:
  - id: parler_barman
    texte: |
      Le barman grommelle :+n+
      **? On commande ou on degage. ?**
    faire: "parle_barman.=.1"

  - id: examiner_salle
    texte: "La salle est basse de plafond et sent la biere eventee."

  - id: observer_sortie
    once: true
    texte: "L'air frais de la rue passe sous la porte."

Les champs habituels restent disponibles : si:, visible-si:, grise-si:, faire:, vers:, texte:, texte-ko: et once:. Les zones respectent les conditions portees par l'evenement reference.

once: zone est utile quand une meme couleur du masque contient plusieurs zones separees. Chaque composante peut alors etre declenchee une fois par visite de salle.

evenements:
  - id: toucher_bouteille
    once: zone
    texte: "Vous inspectez une bouteille vide."
    faire: "bouteilles.+.1"

Une image map peut rester affichee en permanence dans un encadre :

encadre:
  - position: haut
    hauteur: 42
    texte: "[[#map:scene:/scenarios/images/taverne.png|/scenarios/images/taverne-masque.png]]"

Les textes d'evenements apparaissent alors dans le flux principal pendant que la scene reste cliquable.

• Utiliser un masque PNG sans compression destructrice, avec des aplats nets.
• Eviter les couleurs trop proches dans le masque.
• Garder une zone par couleur quand c'est possible ; utiliser once: zone si une couleur represente plusieurs elements identiques.
• Prevoir un choix classique de secours si la navigation depend entierement du point & clic.

Voir aussi : Tooltips interactifs, Elements cliquables, HUD.