Différences

Ci-dessous, les différences entre deux révisions de la page.

--- fr:yaml:imagemaps [2026/05/18 21:59] – Ajout documentation image maps v4.11 cyrilfiesta
+++ fr:yaml:imagemaps [2026/07/15 01:42] (Version actuelle) – maj 4.13 : modes d'interface + corrections cyrilfiesta
@@ Ligne 5: / Ligne 5: @@
 Les image maps transforment une image en zone interactive. L'auteur fournit deux fichiers :
-  * une image visible, affichee au joueur ;
+  * une image visible, affichée au joueur ;
-  * un masque PNG, ou chaque couleur plate correspond a une zone.
+  * un masque PNG, où chaque couleur plate correspond à 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.
+La fonctionnalité est interactive sur web, desktop et export HTML5 standalone. Sur Discord et terminal, l'image reste affichée comme média lisible, sans interaction point & clic.
-===== Inserer une image map =====
+===== Insérer une image map =====
-Dans un texte de salle ou dans un encadre HUD :
+Dans un texte de salle ou dans un encadré HUD :
 <code yaml>
@@ Ligne 18: / Ligne 18: @@
 </code>
-Format general :
+Format général :
 <code>
@@ Ligne 26: / Ligne 26: @@
   * ''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.
+  * ''masque.png'' est l'image de masque : chaque couleur pleine représente une zone.
-===== Declarer les zones =====
+===== Déclarer les zones =====
-Les zones se declarent dans la salle avec la cle ''zones:'' puis l'id de la map.
+Les zones se déclarent dans la salle avec la clé ''zones:'' puis l'id de la map.
 <code yaml>
@@ Ligne 50: / Ligne 50: @@
 </code>
-Chaque entree de ''couleurs:'' associe une couleur du masque a une interaction.
+Chaque entrée de ''couleurs:'' associe une couleur du masque à une interaction.
 ===== Options de zone =====
   * ''couleur:'' : couleur HTML du masque, au format ''#RRGGBB''.
-  * ''clic:'' : id d'un evenement local declenche au clic.
+  * ''clic:'' : id d'un événement local déclenché au clic.
-  * ''survol-tooltip:'' : texte affiche dans une bulle au survol.
+  * ''survol-tooltip:'' : texte affiché dans une bulle au survol.
-  * ''survol-event:'' : id d'un evenement local declenche au survol.
+  * ''survol-event:'' : id d'un événement local déclenché au survol.
   * ''highlight: true'' : affiche la zone en surbrillance au survol.
+  * ''couleur-affichage:'' : couleur utilisée pour la surbrillance ou la peinture permanente.
+  * ''mode-affichage:'' : ''plein'' ou ''contour''.
+  * ''etat:'' : ''visible'', ''desactive'' ou ''invisible''.
-===== Evenements associes =====
+===== Événements associés =====
-Les ids references par ''clic:'' ou ''survol-event:'' doivent correspondre a des evenements de la salle.
+Les ids référencés par ''clic:'' ou ''survol-event:'' doivent correspondre à des événements de la salle.
 <code yaml>
@@ Ligne 69: / Ligne 72: @@
     texte: |
       Le barman grommelle :+n+
-      **? On commande ou on degage. ?**
+      **« On commande ou on dégage. »**
     faire: "parle_barman.=.1"
   - id: examiner_salle
-    texte: "La salle est basse de plafond et sent la biere eventee."
+    texte: "La salle est basse de plafond et sent la bière éventée."
   - id: observer_sortie
@@ Ligne 80: / Ligne 83: @@
 </code>
-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.
+Les événements associés gardent leurs champs habituels : ''si:'', ''faire:'', ''vers:'', ''texte:'', ''texte-ko:'' et ''once:''. Les clés ''visible-si:'' et ''grise-si:'' s'appliquent à la map entière. Pour conditionner une zone précise, utilisez ''etat:'' et ses couches ''si:''.
-===== once: zone =====
+===== État d'une zone =====
-''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.
+L'état est vérifié à l'affichage et au moment du clic.
+^ Valeur ^ Effet ^
+| ''visible'' | État par défaut. Le clic, le survol et le tooltip fonctionnent. |
+| ''desactive'' | Le clic et la surbrillance de survol sont coupés. Le tooltip reste disponible. Si ''couleur-affichage:'' est définie, la zone reste peinte. |
+| ''invisible'' | Le clic, le survol et le tooltip sont coupés. |
+Une zone peut porter plusieurs couches ''si:''. Elles sont évaluées dans l'ordre et ne remplacent que les clés qu'elles déclarent.
+<code yaml>
+zones:
+  scene:
+    couleurs:
+      - couleur: "#F21010"
+        clic: trouver_cle
+        highlight: true
+        si:
+          - si: "v_cletrouvee_v.=.1"
+            etat: desactive
+            couleur-affichage: "#777777"
+            mode-affichage: plein
+</code>
+Une zone décorative peut utiliser ''etat:'' et ''couleur-affichage:'' sans avoir de ''clic:''. Une zone ''desactive'' ou ''invisible'' ne peut pas être déclenchée par un clic forcé envoyé au serveur.
+===== 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.
 <code yaml>
 evenements:
   - id: toucher_bouteille
-    once: zone
+    once: zone-salle
     texte: "Vous inspectez une bouteille vide."
     faire: "bouteilles.+.1"
 </code>
+===== once: couleur / once: couleur-salle =====
+Ces deux valeurs regroupent toutes les taches qui utilisent la même couleur du masque :
+  * ''once: couleur'' : le premier clic consomme toute la couleur pour le reste de la partie ;
+  * ''once: couleur-salle'' : le premier clic consomme toute la couleur jusqu'à la prochaine visite de la salle.
+<code yaml>
+evenements:
+  - id: toucher_bouteilles
+    once: couleur
+    texte: "Toutes les bouteilles portent le même symbole."
+</code>
+Utilisez ''once: zone'' pour traiter séparément plusieurs objets d'une même couleur. Utilisez ''once: couleur'' quand un seul clic doit les désactiver ensemble.
+===== apres-clic: - marquer les zones consommées =====
+Sur une zone dont l'événement de clic utilise l'un des modes ''zone'' ou ''couleur'', la clé ''apres-clic:'' choisit le rendu une fois l'interaction consommé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 :
+<code yaml>
+zones:
+  scene:
+    couleurs:
+      - couleur: "#00FFF3"
+        clic: toucher_bouteille
+        highlight: true
+        contour-seul: true
+        apres-clic: "#000000"
+        apres-mode: plein
+</code>
+Avec les variantes ''zone'' et ''couleur'', les marques persistent au retour dans la salle. Les variantes ''zone-salle'' et ''couleur-salle'' se réarment à chaque visite.
 ===== Dans un HUD =====
-Une image map peut rester affichee en permanence dans un encadre :
+Une image map peut rester affichée en permanence dans un encadré :
 <code yaml>
@@ Ligne 105: / Ligne 179: @@
 </code>
-Les textes d'evenements apparaissent alors dans le flux principal pendant que la scene reste cliquable.
+Les textes d'événements apparaissent alors dans le flux principal pendant que la scène reste cliquable.
 ===== Conseils =====
   * Utiliser un masque PNG sans compression destructrice, avec des aplats nets.
-  * Eviter les couleurs trop proches dans le masque.
+  * Éviter 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.
+  * 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.
+  * Prévoir un choix classique de secours si la navigation dépend entièrement du point & clic hors du mode ''ui: plein-ecran''.
-Voir aussi : [[fr:yaml:tooltips|Tooltips interactifs]], [[fr:yaml:elements-cliquables|Elements cliquables]], [[fr:yaml:hud|HUD]].
+Voir aussi : [[fr:yaml:tooltips|Tooltips interactifs]], [[fr:yaml:elements-cliquables|Éléments cliquables]], [[fr:yaml:hud|HUD]].