Camera view frame, viewport clipping, overlay layer for editor symbols
- Camera assets get width/height properties; play mode renders only the camera frame (letterboxed, masked, culled) and nothing without a camera - Remove demo arrow-key/camera-follow systems from play mode - Clip world and gizmos to the viewport (selection frame no longer leaks over the left panel) - Blur focused widget on pointerdown outside it so inspector edits commit before selection changes - Separate objects/overlay layers so camera symbols always render on top - Add tools/seed-demo.mjs for reproducible E2E runs Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
1 parent
5a46124454
commit
aaa8154adf
11 files changed
+307
-142
No files matched your search
@@ -16,8 +16,17 @@ Live: <https://nockal.com/game-maker/> · Widget playground: <https://nockal.com
|
||||
| **Edit mode** | The viewport draws the project model; panels, grid, gizmos and drag-to-move are active. |
|
||||
| **Play mode** | A `World` is instantiated from the active scene (one entity per scene object, resolved properties as mutable state). Systems tick it; nothing writes back. **Stop discards the world.** |
|
||||
|
||||
Phase-1 demo behaviour in Play: the arrow keys move the sprite that was selected when Play was
|
||||
pressed (or the first sprite); the first camera in the scene follows it.
|
||||
**The camera defines what is rendered.** A camera asset has a view size (`width` × `height`,
|
||||
default 640×360) and a `zoom`; the frame it covers in world units is `size / zoom`. In edit
|
||||
mode that frame is drawn as an outline. In play mode only that frame is rendered – fitted into
|
||||
the viewport with black letterboxing – and objects outside it are culled. A scene without a
|
||||
camera renders nothing in play mode. Play has no built-in behaviour (no input, no movement):
|
||||
behaviour will come with scripting in a later phase.
|
||||
|
||||
**Editor symbols are always on top.** The viewport draws scene content (sprites) in an
|
||||
`objects` layer and editor symbols (camera icon, labels) in an `overlay` layer above it, so a
|
||||
sprite can never hide a symbol regardless of hierarchy order. Z-order between sprites is not
|
||||
configurable yet.
|
||||
|
||||
## Stack
|
||||
|
||||
@@ -34,12 +43,12 @@ pressed (or the first sprite); the first camera in the scene follows it.
|
||||
```
|
||||
web/index.html Vite source page (dev) index.html built page (generated, served)
|
||||
src/core/ model, property schema, resolve, commands, store – no Pixi imports
|
||||
src/runtime/ World, Entity, systems (Input, PlayerControl, CameraFollow)
|
||||
src/runtime/ World, Entity, System interface, Input tracker (no systems yet)
|
||||
src/ui/ widget toolkit (generic, knows nothing about assets)
|
||||
src/viewport/ scene renderer: model in edit mode, world in play mode
|
||||
src/editor/ App composition, state, panels, inspector field factory
|
||||
api/ PHP backend data/projects/ persisted projects
|
||||
tests/ Vitest unit tests tools/e2e.mjs headless CDP smoke test
|
||||
tests/ Vitest unit tests tools/ e2e.mjs (CDP smoke test), seed-demo.mjs
|
||||
```
|
||||
|
||||
Rules that keep it organised: `core/` imports nothing from other layers; `ui/` never sees
|
||||
@@ -57,7 +66,8 @@ npm run dev # http://localhost:5175/game-maker/dist/ – API calls are
|
||||
npm test # unit tests (core)
|
||||
npm run typecheck
|
||||
npm run build # writes dist/ and regenerates index.html
|
||||
node tools/e2e.mjs <projectId> # headless end-to-end run with screenshots in /tmp/gm-e2e-*.png
|
||||
node tools/seed-demo.mjs <projectId> # reset the demo project to the state the e2e run expects
|
||||
node tools/e2e.mjs <projectId> # headless end-to-end run with screenshots in /tmp/gm-e2e-*.png
|
||||
```
|
||||
|
||||
The workspace folder itself is what nginx serves, so `npm run build` is the deployment.
|
||||
|
||||
Reference in new issue
Block a user