@energy8platform/game-engine 0.14.9 → 0.15.0

package/dist/index.d.ts

@@ -1278,16 +1278,35 @@ interface FlexItemConfig {
     layoutHeight?: number | string;
     /** Override parent's alignItems for this child */
     alignSelf?: AlignSelf;
-    /** Exclude from flex layout (acts like position: absolute) */
+    /**
+     * Exclude from flex layout (acts like position: absolute).
+     *
+     * Positioning props (`top`/`right`/`bottom`/`left`/`centerX`/`centerY`) describe
+     * the **visual bounding rectangle**, so children with a centered internal
+     * origin (Button, Label — `anchor = 0.5`) are positioned intuitively.
+     * `left: 100` places the visible left edge at 100px, regardless of origin.
+     */
     flexExclude?: boolean;
-    /** Absolute positioning for flexExclude children (distance from top edge) */
+    /** Distance from top edge of parent content area to the child's visual top */
     top?: number;
-    /** Absolute positioning for flexExclude children (distance from right edge) */
+    /** Distance from right edge of parent content area to the child's visual right */
     right?: number;
-    /** Absolute positioning for flexExclude children (distance from bottom edge) */
+    /** Distance from bottom edge of parent content area to the child's visual bottom */
     bottom?: number;
-    /** Absolute positioning for flexExclude children (distance from left edge) */
+    /** Distance from left edge of parent content area to the child's visual left */
     left?: number;
+    /**
+     * X coordinate of the child's visual center within parent content area.
+     * Accepts pixels (`200`) or a percentage of parent content width (`'50%'`).
+     * Takes precedence over `left`/`right`.
+     */
+    centerX?: number | string;
+    /**
+     * Y coordinate of the child's visual center within parent content area.
+     * Accepts pixels or a percentage of parent content height (`'50%'`).
+     * Takes precedence over `top`/`bottom`.
+     */
+    centerY?: number | string;
 }
 interface FlexContainerConfig {
     /** Layout direction (default: 'row') */

package/dist/index.esm.js

@@ -768,6 +768,9 @@ class AudioManager {
             this._soundModule = await import('@pixi/sound');
             this._initialized = true;
             this.applyVolumes();
+            if (this._globalMuted) {
+                this._soundModule.sound.muteAll();
+            }
             this.setupMobileUnlock();
         }
         catch {
@@ -1025,7 +1028,9 @@ class AudioManager {
         if (!this._soundModule)
             return;
         const { sound } = this._soundModule;
-        sound.volumeAll = this._globalMuted ? 0 : 1;
+        // Global mute is owned by sound.muteAll()/unmuteAll() (context.muted),
+        // not by volumeAll — mixing both leaves mute un-undoable after reload.
+        sound.volumeAll = 1;
     }
     setupMobileUnlock() {
         if (this._unlocked)
@@ -3444,22 +3449,31 @@ class FlexContainer extends Container {
             this._computedWidth = this._explicitWidth > 0 ? this._explicitWidth : (pl + totalCrossNatural + pr);
             this._computedHeight = this._explicitHeight > 0 ? this._explicitHeight : (pt + naturalMainSize + pb);
         }
-        // Position flexExclude children (absolute positioning)
+        // Position flexExclude children (absolute positioning).
+        // All position props describe the visual (bounds) rectangle, so we subtract
+        // `ox/oy` to compensate for children with a centered origin (Button, Label).
+        // `centerX/centerY` take precedence over `left/right` / `top/bottom` on each axis.
         for (const child of this._layoutChildren) {
             if (!child._flexConfig?.flexExclude)
                 continue;
             const cfg = child._flexConfig;
-            const { w, h } = measureChild(child, pctRefW, pctRefH);
+            const { w, h, ox, oy } = measureChild(child, pctRefW, pctRefH);
             const cw = this._computedWidth;
             const ch = this._computedHeight;
-            if (cfg.left !== undefined)
-                child.x = cfg.left;
+            const centerX = resolveDimension(cfg.centerX, pctRefW);
+            if (centerX !== undefined)
+                child.x = centerX - w / 2 - ox;
+            else if (cfg.left !== undefined)
+                child.x = cfg.left - ox;
             else if (cfg.right !== undefined)
-                child.x = cw - w - cfg.right;
-            if (cfg.top !== undefined)
-                child.y = cfg.top;
+                child.x = cw - w - cfg.right - ox;
+            const centerY = resolveDimension(cfg.centerY, pctRefH);
+            if (centerY !== undefined)
+                child.y = centerY - h / 2 - oy;
+            else if (cfg.top !== undefined)
+                child.y = cfg.top - oy;
             else if (cfg.bottom !== undefined)
-                child.y = ch - h - cfg.bottom;
+                child.y = ch - h - cfg.bottom - oy;
         }
     }
     /** Computed content size (after layout) */