@umicat/phaser-sdk 1.0.19 → 1.0.21

package/dist/editor/EditorOverlayScene.js

@@ -38,6 +38,15 @@ const WORLD_BOUNDS_ALPHA = 0.7;
 const CAMERA_VIEWPORT_COLOR = 0x4488ee;
 const CAMERA_VIEWPORT_ALPHA = 0.9;
 const CAMERA_VIEWPORT_LINE_WIDTH = 2;
+// HUD edit mode — the PLAYER'S SCREEN frame (full game-intrinsic resolution).
+// Brighter/distinct from the world-camera rect: it's the fixed boundary HUD
+// widgets anchor to (Godot's UI viewport rect), not the movable camera view.
+const HUD_SCREEN_COLOR = 0x5bc0ff;
+// World-origin axes (Godot convention): red = X axis (world y=0), green = Y
+// axis (world x=0). Semi-transparent so they read as reference, not content.
+const AXIS_X_COLOR = 0xff5566;
+const AXIS_Y_COLOR = 0x55dd66;
+const AXIS_ALPHA = 0.5;
 // FB.10 polish — CSS cursor name per tilemap resize handle. Corner handles
 // get the diagonal arrows (`nwse-resize` ↖↘ for NW/SE, `nesw-resize` ↗↙ for
 // NE/SW). Edge handles get the axis arrows (ns / ew). Same conventions as
@@ -345,6 +354,14 @@ export class EditorOverlayScene extends Phaser.Scene {
         // a tilemap resize handle. Done first so cursor reflects the immediate
         // visual state regardless of which branch we hit below.
         this.updateResizeCursor(pointer);
+        // Coordinate readout — post the cursor's WORLD position so the host can
+        // show it in the ruler corner. Cheap; pointermove is frame-throttled.
+        {
+            const wc = this.pointerCoords(pointer);
+            if (typeof window !== 'undefined' && window.parent) {
+                window.parent.postMessage({ type: 'umicat:editor:cursorWorld', x: Math.round(wc.x), y: Math.round(wc.y) }, '*');
+            }
+        }
         // P1 infinite canvas — pan in progress: translate screen delta into
         // world delta via the current zoom, set scroll absolute (relative-mode
         // would accumulate floating-point drift over many move events).
@@ -1741,6 +1758,20 @@ export class EditorOverlayScene extends Phaser.Scene {
         // layers (or the resize-rebuilt layers don't track post-resize
         // container.x/y changes).
         this.syncTilemapLayersFromContainers();
+        // World coordinate-system axes (Godot-style): red X line through world
+        // y=0, green Y line through world x=0 — so the user can see where the
+        // origin (0,0) is and place entities relative to it. Drawn in world space
+        // (pan/zoom with the view); width counter-scaled by zoom so the lines stay
+        // ~1.5px on screen at any zoom. Drawn first so bounds/selection paint over.
+        {
+            const z = this.cameras.main?.zoom || 1;
+            const w = 1.5 / z;
+            const EXT = 100000;
+            this.graphics.lineStyle(w, AXIS_X_COLOR, AXIS_ALPHA);
+            this.graphics.lineBetween(-EXT, 0, EXT, 0);
+            this.graphics.lineStyle(w, AXIS_Y_COLOR, AXIS_ALPHA);
+            this.graphics.lineBetween(0, -EXT, 0, EXT);
+        }
         if (this.worldBounds) {
             // World bounds outline (the visible game frame). Outside-fill grey
             // strips moved to a separate Graphics in the WORLD scene at very
@@ -1774,10 +1805,28 @@ export class EditorOverlayScene extends Phaser.Scene {
             const snap = this.game['__unboxyEditorScaleSnapshot'];
             const intrinsicW = snap?.gameWidth ?? this.game.scale.width;
             const intrinsicH = snap?.gameHeight ?? this.game.scale.height;
-            const camW = intrinsicW / worldSceneCam.zoom;
-            const camH = intrinsicH / worldSceneCam.zoom;
-            this.graphics.lineStyle(CAMERA_VIEWPORT_LINE_WIDTH, CAMERA_VIEWPORT_COLOR, CAMERA_VIEWPORT_ALPHA);
-            this.graphics.strokeRect(camX, camY, camW, camH);
+            if (getEditorMode(this.game) === 'hud') {
+                // HUD mode → draw the PLAYER'S SCREEN frame at FULL intrinsic size
+                // (1280×720), NOT intrinsic/zoom. HUD widgets are screen-anchored:
+                // `syncHudCameraToEditorCam` maps HUD-intrinsic (0..1280, 0..720) onto
+                // the full-intrinsic span at (gameCam.scroll). The world-camera zoom
+                // shrinks how much WORLD fits, NOT the screen — so drawing the frame at
+                // intrinsic/zoom (the world-camera viewport, as world mode does) made
+                // the frame 3× smaller than the HUD, and widgets sprawled OUTSIDE it
+                // (the "I can't tell where to place HUD" bug). At full intrinsic the
+                // frame is exactly the HUD's bounds → a stable boundary to anchor to.
+                this.graphics.lineStyle(CAMERA_VIEWPORT_LINE_WIDTH + 1, HUD_SCREEN_COLOR, 1);
+                this.graphics.strokeRect(camX, camY, intrinsicW, intrinsicH);
+            }
+            else {
+                // World mode → the camera viewport rect: where the runtime camera
+                // looks + how much it sees (intrinsic/zoom). Small inside a larger
+                // world for farming/RPG; coincides with world bounds for Tetris etc.
+                const camW = intrinsicW / worldSceneCam.zoom;
+                const camH = intrinsicH / worldSceneCam.zoom;
+                this.graphics.lineStyle(CAMERA_VIEWPORT_LINE_WIDTH, CAMERA_VIEWPORT_COLOR, CAMERA_VIEWPORT_ALPHA);
+                this.graphics.strokeRect(camX, camY, camW, camH);
+            }
         }
         const selectedId = getSelection(this.game);
         if (selectedId) {

package/dist/protocol.d.ts

@@ -867,7 +867,18 @@ export interface EditorTilemapTilePickedMessage {
     layerId: string;
     tileIndex: number | null;
 }
-export type EditorSdkToHostMessage = EditorSceneLoadedMessage | EditorSelectionPickedMessage | EditorDragEndMessage | EditorEntityResizedMessage | EditorShortcutMessage | EditorSelectionRectMessage | EditorRulesLoadedMessage | EditorCameraStateMessage | EditorTilemapEditedMessage | EditorTilemapTilePickedMessage;
+/**
+ * Cursor world position (editor coordinate readout). Posted on pointer-move
+ * while editing so the host can show the cursor's WORLD (x, y) — e.g. in the
+ * corner of the rulers. Integers (rounded). Cheap; pointermove is
+ * frame-throttled by the browser.
+ */
+export interface EditorCursorWorldMessage {
+    type: 'umicat:editor:cursorWorld';
+    x: number;
+    y: number;
+}
+export type EditorSdkToHostMessage = EditorSceneLoadedMessage | EditorSelectionPickedMessage | EditorDragEndMessage | EditorEntityResizedMessage | EditorShortcutMessage | EditorSelectionRectMessage | EditorRulesLoadedMessage | EditorCameraStateMessage | EditorCursorWorldMessage | EditorTilemapEditedMessage | EditorTilemapTilePickedMessage;
 export type RpcMethod = 'saves.get' | 'saves.set' | 'saves.delete' | 'saves.list' | 'gameData.get' | 'gameData.set' | 'gameData.delete' | 'gameData.list' | 'realtime.getToken' | 'ai.act';
 export interface SavesGetParams {
     key: string;

package/package.json

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