66 lines
2.8 KiB
HTML
66 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<base href="../" />
|
|
<title>Dev probe — Phaser container transform semantics</title>
|
|
<style>html,body{margin:0;height:100%;background:#04060d;overflow:hidden}#g{width:100%;height:100%}</style>
|
|
<script src="lib/phaser.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="g"></div>
|
|
<script type="module">
|
|
/* Dev probe: WHAT DOES A CONTAINER'S (x, y) MEAN in this build?
|
|
*
|
|
* A container at (200,150) holds a 100x80 "plate" drawn at LOCAL (0,0)
|
|
* and a 10x10 marker at local (50,40). The red plate lands with its
|
|
* top-left at (200,150) — i.e. a container's position is a pure
|
|
* TRANSLATION of its local space (local (0,0) == the container's
|
|
* x,y). The container's origin (0.5,0.5) does NOT shift the children.
|
|
*
|
|
* Consequence the shop layout depends on: a TradeGrid's (x,y) IS the
|
|
* panel's top-left corner — setting it to topY + h/2 (centered-origin
|
|
* math) drops the panel half a grid lower and clips its bottom rows.
|
|
*
|
|
* View in a browser (node dev/server.mjs 8126 → /dev/cbox-test.html) —
|
|
* the red rectangle's top-left sits exactly at (200,150) of the 800x600
|
|
* canvas; window.__CBOX__ carries the numeric readings. */
|
|
import Phaser from '../js/vendor/phaser.js';
|
|
window.__ERRS__ = window.__ERRS__ ?? [];
|
|
window.addEventListener('error', (e) => window.__ERRS__.push(String(e.message)));
|
|
|
|
class T extends Phaser.Scene {
|
|
create() {
|
|
const cx = 200, cy = 150;
|
|
const c = this.add.container(cx, cy);
|
|
// Red "plate" 100x80 at LOCAL (0,0) — like TradeGrid's plate.
|
|
const plate = this.add.rectangle(50, 40, 100, 80, 0xff0000);
|
|
c.add(plate);
|
|
// Green 10x10 at local (50, 40) — the content center.
|
|
const g = this.add.rectangle(50, 40, 10, 10, 0x00ff00);
|
|
c.add(g);
|
|
const tl = (o) => {
|
|
if (o?.getTopLeft) { try { const v = o.getTopLeft(undefined, true); return { x: Math.round(v.x), y: Math.round(v.y) }; } catch { /* fall through */ } }
|
|
if (o?.getBounds) { const b = o.getBounds(); return { x: Math.round(b.x), y: Math.round(b.y), w: Math.round(b.width), h: Math.round(b.height) }; }
|
|
return null;
|
|
};
|
|
window.__CBOX__ = {
|
|
container: { x: c.x, y: c.y, originX: c.originX, originY: c.originY,
|
|
displayWidth: c.displayWidth, displayHeight: c.displayHeight },
|
|
plate_world: tl(plate),
|
|
green_world: tl(g),
|
|
};
|
|
}
|
|
}
|
|
T.key = 'T';
|
|
|
|
const game = new Phaser.Game({
|
|
type: Phaser.AUTO, parent: 'g', width: 800, height: 600, backgroundColor: '#111', banner: false,
|
|
scale: { mode: Phaser.Scale.NONE },
|
|
scene: [T],
|
|
});
|
|
window.game = game;
|
|
</script>
|
|
</body>
|
|
</html>
|