Outils pour utilisateurs

Outils du site


fr:yaml:imagemaps

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
fr:yaml:imagemaps [2026/07/06 00:46] – maj 4.13 : modes d'interface + corrections cyrilfiestafr: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 : 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 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> <code yaml>
Ligne 18: Ligne 18:
 </code> </code>
  
-Format general :+Format général :
  
 <code> <code>
Ligne 26: Ligne 26:
   * ''id'' identifie la map dans la salle.   * ''id'' identifie la map dans la salle.
   * ''image.png'' est l'image visible.   * ''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> <code yaml>
Ligne 50: Ligne 50:
 </code> </code>
  
-Chaque entree de ''couleurs:'' associe une couleur du masque une interaction.+Chaque entrée de ''couleurs:'' associe une couleur du masque à une interaction.
  
 ===== Options de zone ===== ===== Options de zone =====
  
   * ''couleur:'' : couleur HTML du masque, au format ''#RRGGBB''.   * ''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.   * ''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 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> <code yaml>
Ligne 69: Ligne 72:
     texte: |     texte: |
       Le barman grommelle :+n+       Le barman grommelle :+n+
-      **On commande ou on degage?**+      **« On commande ou on dégage»**
     faire: "parle_barman.=.1"     faire: "parle_barman.=.1"
  
   - id: examiner_salle   - 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   - id: observer_sortie
Ligne 80: Ligne 83:
 </code> </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éciseutilisez ''etat:'' et ses couches ''si:''
 + 
 +===== État d'une zone ===== 
 + 
 +L'état est vérifié à l'affichage et au moment du clic. 
 + 
 +^ Valeur ^ Effet ^ 
 +| ''visible'' | État par défaut. Le clicle 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éfiniela 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 ===== ===== once: zone / once: zone-salle =====
Ligne 96: Ligne 126:
     faire: "bouteilles.+.1"     faire: "bouteilles.+.1"
 </code> </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 ===== ===== 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 :+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 ^ ^ Valeur ^ Effet ^
Ligne 120: Ligne 166:
 </code> </code>
  
-Avec ''once: zone'', les marques persistent au retour dans la salle ; avec ''once: zone-salle'', tout se réarme à chaque visite. +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.
- +
-===== +
- +
-''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. +
- +
-<code yaml> +
-evenements: +
-  - id: toucher_bouteille +
-    once: zone +
-    texte: "Vous inspectez une bouteille vide." +
-    faire: "bouteilles.+.1" +
-</code>+
  
 ===== Dans un HUD ===== ===== 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> <code yaml>
Ligne 145: Ligne 179:
 </code> </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 ===== ===== Conseils =====
  
   * Utiliser un masque PNG sans compression destructrice, avec des aplats nets.   * 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'' ou ''once: zone-salle'' si une couleur représente plusieurs éléments 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]].
  
fr/yaml/imagemaps.txt · Dernière modification : de cyrilfiesta