Différences

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

--- en:yaml:hud [2026/08/30 21:20] – maj 4.14 : dialogues, videos hebergees, mise en page, doc EN completee cyrilfiesta
+++ en:yaml:hud [2026/11/04 22:41] (Version actuelle) – Documentation 4.17 : objets, evenements et mise en page verifies cyrilfiesta
@@ Ligne 1: / Ligne 1: @@
 **Language / Langue :** [[fr:yaml:hud|FR]] | **EN**
-====== HUD - Persistent Panels (YAML) ======
+====== HUD - Panels (YAML) ======
 HUD panels (''hud:'') display persistent information on the player screen: HP, score, mini-map, countdown, and so on.
@@ Ligne 34: / Ligne 34: @@
 ===== Size =====
-''size:'' sets the height as a percentage of the game area. ''width:'' and ''height:'' give explicit percentages when you need full control.
+^ Key ^ Effect ^
+| ''size: 30'' | 30% of the game area along the main axis: height for top/bottom, width for left/right and corners. |
+| ''width: 25'' | Explicit width as a percentage. |
+| ''height: 15'' | Explicit height as a percentage. |
+''width:'' and ''height:'' are independent; either can be used alone. Defaults depend on the position.
+On mobile, side panels become top/bottom panels, so their size controls the height.
 ===== Style =====
@@ Ligne 50: / Ligne 57: @@
 <code yaml>
+vars: {hp: 10, hpmax: 10}
 hud:
   position: top-right
@@ Ligne 62: / Ligne 70: @@
 ===== Split =====
-''[[split]]'' divides the panel into two zones.
+''%%[[split]]%%'' divides the panel into two zones.
 <code yaml>
@@ Ligne 79: / Ligne 87: @@
 <code yaml>
-encadre:
+hud:
   - position: top-left
-    texte: "❤️ v_hp_v HP"
+    text: "❤️ v_hp_v HP"
   - position: top-right
-    texte: "⭐ v_score_v pts"
+    text: "⭐ v_score_v pts"
   - position: bottom-right
-    texte: "📍 Area: v_area_v"
+    text: "📍 Area: v_area_v"
 </code>
@@ Ligne 92: / Ligne 100: @@
 <code yaml>
+# On a room, choice or event:
 clear-hud:
   - all
+</code>
+To clear only one corner:
+<code yaml>
+clear-hud:
   - top-right
 </code>
@@ Ligne 102: / Ligne 117: @@
 <code yaml>
-encadre:
+hud:
   position: top
-  texte:
+  text:
     - "((loop;muted:https://example.com/video.mp4))"
 </code>
@@ Ligne 110: / Ligne 125: @@
 A hosted video works here too. See [[en:yaml:medias|Sounds, images and videos]].
-**Find us on the [[https://discord.gg/Z63DtVV|Make&Play Discord]]**
+===== Room scope (4.17) =====
+**Panels remain persistent by default**, until explicitly replaced or cleared. Add ''scope: room'' to clear a panel when leaving the room where it was placed:
+<code yaml>
+hud:
+  position: top-left
+  scope: room
+  text: The map of this room.
+</code>
+This works on rooms, actions, choices and events, including global interactions: ownership is assigned to the room where the panel is actually placed. An action without movement, a refresh or navigation to the same room does not clear it. Moving, using the phone's Back button or ending the game removes it. Other persistent panels remain visible.
+A panel declared on the room is placed again on each entry. An interaction-created panel waits for that interaction to run again. Replaced panels are not automatically restored. Saves preserve scope and room ownership; older panels without scope retain their persistent behaviour.
+In the editor, tick **Clear when leaving the room** on the panel. The box is unchecked by default. Scope is optional in [[en:yaml:modeles|inline models]] too; ''grille_2d'' requests it explicitly. French syntax: ''portee: salle''.
+===== Percentage and alignment in a panel =====
+Alongside ''%%[[split]]%%'', ''%%[[split:40]]%%'' gives 40% to the previous zone. The split follows the panel axis. Blocks such as ''%%[[align:center]]text[[/align]]%%'' also accept ''left'' / ''right'', ''gauche'' / ''centre'' / ''droite'', or a text variable ''t_cote_t''.
+<code yaml>
+title: 'Wiki 4.17: HUD'
+vars:
+  pv: 10
+rooms:
+- id: atelier
+  text: A chest.
+  hud:
+    position: top
+    text: |
+      [[align:center]]Map.[[/align]]
+      [[split:40]]
+      HP: v_pv_v
+  choices:
+  - command: rester
+    button: Stay
+    to: atelier
+</code>