A middle-mouse pan used to run the full redraw on every frame. It collected every object from the project, cleared and redrew every shape, re-sorted all children and made Pixi re-upload every buffer, although only the camera had moved. The user saw the frame rate drop while panning. - WorldViewport gets moveCamera(). When zoom and view size are unchanged it only moves the world and redraws the overlays drawn in screen pixels. collectFrame, the shape redraw and the re-sort drop out of a pan frame. - Every full redraw remembers the box each object is culled by. A pan that moves an object across the edge of the view still takes the full redraw, so objects appear and vanish as before. - Grid, selection outlines, rays and the container origin mark move into a shared drawOnScreen hook. It runs after every full redraw and after every pan. The parent links stay in afterItems because they are drawn in world units. - Wheel zoom keeps the full redraw, because line widths follow the zoom. A cache for collectFrame was left out: it would save about 1 ms and risk stale data. - debugInfo() reports redraws and cameraMoves, and __gm gets a hook that forces a full redraw, so a check can compare against it. Findings: - Chrome already coalesces mouse moves to one per frame (500 moves gave 183 redraws in 189 frames). A throttle was tried and removed again, because its counter-check did not fail. - A check in module 03 compared the whole gameInfo() object and broke on the new counters. It now compares camera, objects and rendering. - The stall without ?vsync most likely comes from the desynchronized context in src/main.ts. It cannot be reproduced headless. Tests: - Measured on Jump and Run, main-thread time per frame, 3 runs of 240 moves: pan 5.7-7.4 ms before, 3.8-4.8 ms after. Plain mouse moves stay at 2.1-2.4 ms. 208 of 240 moves took the fast path. - ./check.sh: 141 files, 2080 tests, exit 0. - GM_STEPS=1-16,29,42,43: 535 checks, 1 failed (the module 03 test above). After the fix GM_STEPS=1-5: all passed, 130 checks. - 3 new e2e checks in 5d: 12 pan steps give 12 camera moves and 0 full redraws, pixel rows after the pan match a fresh redraw, a box panned out of view and back is drawn again. - Counter-checks: overlays not redrawn on pan gives "3 of 3 rows differ". Edge test disabled keeps the box visible with 0 redraws. - Check total 1285 (1282 confirmed by CI task 229, plus 3). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
6.0 KiB
Game Maker
A browser-based tool "one step before a game engine": create assets (scenes, cameras, sprites), place them into scenes, tweak their properties in an inspector and press Play – all in one program, all drawn inside a single WebGL canvas.
Live: https://nockal.com/game-maker/ · Widget playground: https://nockal.com/game-maker/?playground
The documentation is the wiki: https://git.nockal.com/meleki/game-maker/wiki – every concept, node, tab and shortcut, plus the architecture and the development workflow. This file is the short way in.
In one screen
- An asset is a named, typed thing (scene, camera, sprite, text, behavior, collider, rigidbody, container, texture, font, sound, animation, state machine, shader, particles, variables, tile, tilemap) with properties and no position.
- A scene object places an asset: position, sparse overrides of its properties, an optional parent. Only what differs from the asset is stored; the inspector paints it gold and offers ↺ / ↑.
- A container is a reusable group edited once and placed many times; its content is resolved from the template on every read. A screen is a container switched on and off.
- A behavior is logic as a node graph, placed like anything else and parented to the object it acts on. Play has no built-in behaviour – everything that happens is a graph.
- An account owns projects: the editor asks for a user name and a password first, and each account sees only its own projects. The Account menu at the far right of the toolbar changes the password and signs out.
- Play runs a throwaway copy of the project; every panel stays usable and Stop brings back exactly what was saved.
Quick start
Node 22 is required.
npm install
npm run dev # http://localhost:5175/game-maker/dist/ – API calls are proxied to production
npm run check # typecheck + lint + format:check + unit tests – the gate CI runs too
npm run build # writes dist/ and regenerates index.html; the folder is what nginx serves
The browser suite and the three example games need a machine with a GPU:
node tools/seed-e2e.mjs && node tools/e2e.mjs # the editor, 1285 checks (GM_STEPS=20 for one step)
# every tool signs in first – see the Accounts page
node tools/seed-jumprun.mjs && node tools/smoke-jumprun.mjs
node tools/seed-tetris.mjs && node tools/smoke-tetris.mjs
node tools/seed-actor.mjs && node tools/smoke-actor.mjs
Every push runs all of it on the Gitea runner – the gate as one job, build and suite as another beside it – so locally take the gate plus the step your change touches and leave the full run to CI. Details, the GPU requirement and the detached runner are in Development.
Documentation
| Page | What it covers |
|---|---|
| Concepts | Assets, scene objects, overrides, play mode, the camera, the console |
| Accounts | Signing in and out, the accounts, who a project belongs to, what the check tools need |
| Scenes | The edited scene, the start scene, and switching scenes from a graph |
| Scene editing | Placing, z-order, hierarchy, the editor offset |
| Behaviors | Node graphs: variables, the node set, structs and lists, loops, nesting, editing |
| Colliders | Shapes (box, circle, capsule, polygon), collision events, blocking movement, one-way colliders and raycasts |
| Physics | Rigidbodies, the collider material, gravity, the fixed step |
| Textures | Images, frames, nine-slice, the filter, upload limits |
| Fonts | Font assets, the picker, what a text falls back to |
| Sounds | Sound assets and Play sound |
| Animations | Animation assets and the Animation tab |
| Shaders | Shader graphs a sprite wears, their node set, the properties they declare |
| Particles | Particle graphs: a particle as a function of its age |
| State machines | The asset, named transitions, State branch, Set state and State transition |
| Containers | Templates, instances, screens |
| Tiles | The tile asset, plain tiles and the two autotile kinds, the pictures as animation steps, the Tile tab |
| Tilemaps | The tilemap asset, painting in the scene view, layers, what it looks like in the game |
| Plugins | Extending the editor: the plugin file, how it is loaded, switching one on and off, API v1 |
| Keyboard | Every shortcut |
| Architecture | Stack, source layout, the rules that keep it organised |
| Development | Commands, the e2e suite, the example games, CI |
| API | The PHP JSON API and the project document |
Ideas, gaps and bugs
They live in the issue tracker: https://git.nockal.com/meleki/game-maker/issues. What is not there yet is listed on the wiki's Home page.
