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.

Inserer une image map

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.

Declarer les zones

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.

Options de zone

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.

Evenements associes

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 / once: zone-salle

Quand une même couleur du masque contient plusieurs zones séparées, chaque composante peut être déclenchée individuellement :

once: zone : chaque composante ne se déclenche qu'une seule fois par partie ;
once: zone-salle : les composantes se réarment à chaque retour dans la salle.

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

apres-clic: - marquer les zones consommées

Sur une zone dont l'événement de clic porte once: zone ou once: zone-salle, la clé apres-clic: choisit le rendu de la zone une fois cliquée :

Valeur	Effet
`masquer`	Plus de highlight au survol, zone inerte.
`fixe`	Highlight affiché en permanence (déjà cliqué).
`“#RRGGBB”`	Highlight permanent de cette couleur.

La clé optionnelle apres-mode: (plein ou contour) change le type de highlight de la marque - par exemple contour au survol, mais remplissage plein une fois l'élément trouvé. Idéal pour un cherche-et-trouve :

zones:
  scene:
    couleurs:
      - couleur: "#00FFF3"
        clic: toucher_bouteille
        highlight: true
        contour-seul: true
        apres-clic: "#000000"
        apres-mode: plein

Avec once: zone, les marques persistent au retour dans la salle ; avec once: zone-salle, tout se réarme à chaque visite.

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"

Dans un HUD

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.

Conseils

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 ou once: zone-salle si une couleur représente plusieurs éléments identiques.
Prevoir un choix classique de secours si la navigation depend entierement du point & clic.

Voir aussi : Tooltips interactifs, Elements cliquables, HUD.