@unboxy/phaser-sdk 0.2.30 → 0.2.31

package/dist/scene/HudRuntime.js

@@ -251,13 +251,19 @@ function createProgressBar(ctx, entity, pos) {
         const f = Math.max(0, Math.min(1, frac));
         g.clear();
         const radius = v.borderRadius ?? 0;
+        // Centered draw: the container is positioned by applyContainerOriginShift
+        // so child visuals at (0,0) sit at the resolved anchor; drawing the rect
+        // from (-w/2, -h/2) keeps the visual aligned with the editor's
+        // editorHit{Width,Height} bounds (which are computed center-based).
+        const x0 = -w / 2;
+        const y0 = -h / 2;
         // Background.
         if (v.backgroundColor) {
             g.fillStyle(parseColor(v.backgroundColor), 1);
             if (radius > 0)
-                g.fillRoundedRect(0, 0, w, h, radius);
+                g.fillRoundedRect(x0, y0, w, h, radius);
             else
-                g.fillRect(0, 0, w, h);
+                g.fillRect(x0, y0, w, h);
         }
         // Fill.
         const fillColor = v.fillColor ?? '#22c55e';
@@ -265,17 +271,17 @@ function createProgressBar(ctx, entity, pos) {
         const fillW = w * f;
         if (fillW > 0) {
             if (radius > 0)
-                g.fillRoundedRect(0, 0, fillW, h, Math.min(radius, fillW / 2));
+                g.fillRoundedRect(x0, y0, fillW, h, Math.min(radius, fillW / 2));
             else
-                g.fillRect(0, 0, fillW, h);
+                g.fillRect(x0, y0, fillW, h);
         }
         // Border.
         if (v.borderColor && (v.borderWidth ?? 0) > 0) {
             g.lineStyle(v.borderWidth ?? 1, parseColor(v.borderColor), 1);
             if (radius > 0)
-                g.strokeRoundedRect(0, 0, w, h, radius);
+                g.strokeRoundedRect(x0, y0, w, h, radius);
             else
-                g.strokeRect(0, 0, w, h);
+                g.strokeRect(x0, y0, w, h);
         }
     };
     const computeFrac = () => {
@@ -330,19 +336,22 @@ function createPanel(ctx, entity, pos) {
     const draw = () => {
         g.clear();
         const radius = v.borderRadius ?? 0;
+        // Centered draw — see createProgressBar for the rationale.
+        const x0 = -w / 2;
+        const y0 = -h / 2;
         if (v.backgroundColor) {
             g.fillStyle(parseColor(v.backgroundColor), v.backgroundAlpha ?? 1);
             if (radius > 0)
-                g.fillRoundedRect(0, 0, w, h, radius);
+                g.fillRoundedRect(x0, y0, w, h, radius);
             else
-                g.fillRect(0, 0, w, h);
+                g.fillRect(x0, y0, w, h);
         }
         if (v.borderColor && (v.borderWidth ?? 0) > 0) {
             g.lineStyle(v.borderWidth ?? 1, parseColor(v.borderColor), 1);
             if (radius > 0)
-                g.strokeRoundedRect(0, 0, w, h, radius);
+                g.strokeRoundedRect(x0, y0, w, h, radius);
             else
-                g.strokeRect(0, 0, w, h);
+                g.strokeRect(x0, y0, w, h);
         }
     };
     draw();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unboxy/phaser-sdk",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "description": "Unboxy Phaser 3 SDK — game infrastructure for the Unboxy platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",