@unboxy/phaser-sdk 0.2.38 → 0.2.40

package/dist/scene/HudRuntime.js

@@ -101,30 +101,8 @@ const LAYER_DEPTH = {
 function createImageOrNinePatch(scene, x, y, width, height, asset, frame) {
     if (asset.ninePatch) {
         const np = asset.ninePatch;
-        const isPerFrame = isPerFrameNinePatch(np);
-        const cuts = isPerFrame ? np.perFrame : np;
-        const factory = scene.add.rexNinePatch;
-        if (factory) {
-            const columns = [cuts.leftWidth, undefined, cuts.rightWidth];
-            const rows = [cuts.topHeight, undefined, cuts.bottomHeight];
-            // Per-frame uses rex's 9-arg `(scene, x, y, w, h, key, baseFrame, cols, rows)`
-            // form — baseFrame scopes the slicing to that one cell of the spritesheet.
-            // rex types baseFrame as string; Phaser accepts either string or number
-            // for spritesheet frame access, but passing String() satisfies the typed
-            // overload on rex's side.
-            if (isPerFrame) {
-                return factory.call(scene.add, x, y, width, height, asset.textureKey, String(frame ?? 0), columns, rows);
-            }
-            // Middle column/row left undefined → that segment stretches to fill
-            // the remaining space between the two fixed-width edges.
-            return factory.call(scene.add, x, y, width, height, asset.textureKey, columns, rows);
-        }
-        // Plugin not registered — degrade to a stretched Image rather than crash
-        // an entire HUD render. Symptom is "corners distort on resize", not a
-        // missing widget. Likely cause: a host that bypassed createUnboxyGame's
-        // auto-registration (e.g. an external Phaser.Game instance).
-        // eslint-disable-next-line no-console
-        console.warn(`[unboxy/hud] rexNinePatch plugin not registered; falling back to stretched Image for asset '${asset.id}'`);
+        const cuts = isPerFrameNinePatch(np) ? np.perFrame : np;
+        return createCustomNinePatch(scene, x, y, width, height, asset, cuts, frame);
     }
     // Fallback: plain Image. Frame index threaded through for spritesheet
     // assets so per-cell rendering still works without 9-slice.
@@ -134,6 +112,105 @@ function createImageOrNinePatch(scene, x, y, width, height, asset, frame) {
     image.setDisplaySize(width, height);
     return image;
 }
+/**
+ * 9-slice renderer built directly on Phaser primitives. We tried
+ * `phaser3-rex-plugins`' NinePatch first (slice 7.5/7.6) but ran into a
+ * RenderTexture sizing bug in Phaser 3.60+ that's hard to work around
+ * without monkey-patching: rex's constructor calls `super(scene)` with no
+ * dims (defaulting the DynamicTexture to 32×32), then `setSize(w, h)` —
+ * which in Phaser 3.60+ only sets display dimensions, not the underlying
+ * texture. The 9-slice gets drawn into the small default canvas and
+ * displayed stretched. Reproducing this without rex is faster than the
+ * monkey-patch dance.
+ *
+ * <p>Algorithm: split the source texture into 9 sub-frames via
+ * `texture.add()` (idempotent — Phaser ignores re-adds), spawn one Phaser
+ * Image per sub-frame, position + stretch them inside a Container. Corners
+ * keep their native dimensions; edges stretch in one axis; the middle
+ * stretches in both. Returns the container, sized to the target dims with
+ * an explicit hit area so `setInteractive` works as expected on the
+ * icon-button widget.
+ *
+ * <p>Source layout: `(sx, sy)` is the source-image origin within the
+ * texture; for plain Images it's (0,0). For per-frame on a uniform-grid
+ * sheet, `frame` selects which cell — the corresponding frame's `cutX/Y`
+ * gives the origin.
+ */
+function createCustomNinePatch(scene, x, y, width, height, asset, cuts, frame) {
+    const texKey = asset.textureKey;
+    const texture = scene.textures.get(texKey);
+    // Per-frame variant: look up the specified cell's source rect. Single
+    // image: the texture's `__BASE` frame covers the entire image.
+    const baseFrame = frame !== undefined
+        ? texture.get(frame)
+        : texture.get('__BASE');
+    const sx = baseFrame.cutX;
+    const sy = baseFrame.cutY;
+    const sw = baseFrame.width;
+    const sh = baseFrame.height;
+    const L = cuts.leftWidth;
+    const R = cuts.rightWidth;
+    const T = cuts.topHeight;
+    const B = cuts.bottomHeight;
+    // Source middle widths/heights (the part that stretches).
+    const midSrcW = Math.max(0, sw - L - R);
+    const midSrcH = Math.max(0, sh - T - B);
+    // Target middle widths/heights — what remains after the four corners are
+    // placed at their fixed sizes. When the widget is sized smaller than
+    // L+R / T+B, the corners overlap; rare but handled by clamping to 0
+    // rather than producing negative-size sprites.
+    const midDstW = Math.max(0, width - L - R);
+    const midDstH = Math.max(0, height - T - B);
+    const container = scene.add.container(x, y);
+    // Register a sub-frame on the source texture (idempotent) and add a
+    // Phaser Image rendering that frame at the target position + size.
+    // Position is relative to container's origin; Image origin (0, 0) makes
+    // (dx, dy) the top-left of the sub-region.
+    const frameSuffix = frame !== undefined ? `__f${frame}` : '';
+    const addSubFrame = (suffix, fx, fy, fw, fh, dx, dy, dw, dh) => {
+        if (fw <= 0 || fh <= 0 || dw <= 0 || dh <= 0)
+            return;
+        const subKey = `${texKey}${frameSuffix}_${suffix}`;
+        if (!texture.has(subKey)) {
+            texture.add(subKey, 0, sx + fx, sy + fy, fw, fh);
+        }
+        const img = scene.add.image(dx, dy, texKey, subKey);
+        img.setOrigin(0, 0);
+        img.setDisplaySize(dw, dh);
+        container.add(img);
+    };
+    // Layout offsets — container's local origin is at its center, so the
+    // 9-slice patch spans (-width/2, -height/2) to (width/2, height/2).
+    const x0 = -width / 2;
+    const y0 = -height / 2;
+    const xL = x0 + L;
+    const xR = x0 + width - R;
+    const yT = y0 + T;
+    const yB = y0 + height - B;
+    // Source frame offsets within the base frame.
+    const fxL = 0;
+    const fxM = L;
+    const fxR = sw - R;
+    const fyT = 0;
+    const fyM = T;
+    const fyB = sh - B;
+    // Top row
+    addSubFrame('tl', fxL, fyT, L, T, x0, y0, L, T);
+    addSubFrame('tm', fxM, fyT, midSrcW, T, xL, y0, midDstW, T);
+    addSubFrame('tr', fxR, fyT, R, T, xR, y0, R, T);
+    // Middle row
+    addSubFrame('ml', fxL, fyM, L, midSrcH, x0, yT, L, midDstH);
+    addSubFrame('mm', fxM, fyM, midSrcW, midSrcH, xL, yT, midDstW, midDstH);
+    addSubFrame('mr', fxR, fyM, R, midSrcH, xR, yT, R, midDstH);
+    // Bottom row
+    addSubFrame('bl', fxL, fyB, L, B, x0, yB, L, B);
+    addSubFrame('bm', fxM, fyB, midSrcW, B, xL, yB, midDstW, B);
+    addSubFrame('br', fxR, fyB, R, B, xR, yB, R, B);
+    // Explicit hit area so setInteractive works (Phaser containers have no
+    // intrinsic bounds; the icon-button widget calls setInteractive on this).
+    container.setSize(width, height);
+    return container;
+}
 /**
  * Spawn a HUD widget into the scene. The returned GameObject is recorded in
  * the entity registry so the editor + behavior code can find it by id.
@@ -216,21 +293,29 @@ function createImage(ctx, entity, pos) {
         container.setSize(w, h);
         return container;
     }
-    // 9-slice path. When the asset has `ninePatch` metadata the SDK renders via
-    // rex-plugins NinePatch (corners fixed; edges + center stretch). NinePatch
-    // requires explicit dims, so missing width/height falls back to the texture's
-    // native source dims — keeps existing data shapes (image-without-dims) working.
+    // 9-slice path. When the asset has `ninePatch` metadata, the SDK renders
+    // via our custom Container-based NinePatch (corners fixed; edges + center
+    // stretch). Missing width/height falls back to the texture's native source
+    // dims so existing image-without-dims data still works.
     if (asset.ninePatch) {
         const tex = ctx.scene.textures.get(asset.textureKey);
         const src = tex?.getSourceImage();
         const w = entity.visual.width ?? src?.width ?? 64;
         const h = entity.visual.height ?? src?.height ?? 64;
         const np = createImageOrNinePatch(ctx.scene, pos.x, pos.y, w, h, asset);
-        if (entity.visual.tint)
-            np.setTint?.(parseColor(entity.visual.tint));
-        if (typeof entity.visual.alpha === 'number')
-            np.setAlpha(entity.visual.alpha);
-        applyOriginFromAnchor(np, entity.anchor.side);
+        if (typeof entity.visual.alpha === 'number') {
+            np.setAlpha?.(entity.visual.alpha);
+        }
+        // The custom NinePatch is a Container with children centered around
+        // (0, 0). Use the same origin-shift trick the container widgets use so
+        // the anchor side resolves correctly. Tint isn't supported on
+        // Container; image widgets needing tint should bypass ninePatch.
+        if (np instanceof Phaser.GameObjects.Container) {
+            applyContainerOriginShift(np, entity.anchor.side, w, h);
+        }
+        else {
+            applyOriginFromAnchor(np, entity.anchor.side);
+        }
         return np;
     }
     const image = entity.visual.frame !== undefined

package/package.json

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