A trailer needs its music and effects on the same timeline as its pictures. Until now a composition could only place objects, so sound had to be started by hand from a behavior and drifted against the picture. - Audio items: a sound, a clip of a sound, a pattern or a song dragged from the asset panel onto a track becomes an item as long as one pass of it. It may share a track with object and video items and overlap them. - Editing works as for other items: move, resize, trim on the left (moves the offset), fit to media, delete, copy and paste, box selection. Sounds draw their waveform, the colour tells the kind. - The inspector shows what it plays, start, length, offset, volume (-60 to +12 dB) and bus. The bus is "From asset", the master or one of the buses, as asked for in the issue. - An item longer than its material plays in rounds. Sounds and patterns start over, a song runs on in its loop. Loop marks on the item follow the same rule, a song's first mark sits at its loop end. - compositionAudio.ts turns the items into sequences, each with its own tempo. CompositionSound plays them, in the tab and in a game. - In the tab the items are heard from the playhead on, straight into the master like every tab. A scrub is silent. Playing a song or pattern in its own tab stops the composition, and the other way round. - In a game they are planned on the audio clock for the moment the composition clock reaches them, with the scheduler's LEAD made up. While the clock stands (waiting for a video, paused, placement off) they are silent and resume at the right spot. Found along the way: - The asset panel never let a song out of its list, so a song could not be dragged anywhere. Song and scene tab reject it as they reject a pattern. - The asset panel scrolled to the selected asset on every rebuild of its list, so folding a group far below the selection jumped back up. Only a new selection scrolls now. - At the end of the list, folding a group pulled every row down by the rows that went away. ScrollContainer has a new opt-in holdOffset, set only in the asset panel, that keeps the offset until the user scrolls up. Limits: a time scale other than 1 or a frame longer than 0.1 s moves the picture and not the sound. A baked song plays its notes here, not the bake. Tests: - tsc, eslint, Prettier clean. Gate on melektaus-atx green, 309 files, 4788 tests (4772 plus 16 new). - Unit: composition-audio.test.ts 13 new, scroll-container 3 new. Counter-checks: without catching up on load time or without the silence on pause the unit tests go red. - e2e 68h: the sound is planned 1.2 ms after the composition reaches 0.5 s. Without the LEAD make-up it is 54 ms late and red. - e2e 04 and 69 ALL PASSED, 86 checks. 69o-ii drags a pattern and a song onto a track, 20 frames each. - e2e 04: folding Sound at the end of the list keeps its header at y 234. With the old panel it jumps to 984 and the check is red. - Not run in a browser: the loop marks of a song item, copy and paste of audio items, the bus choice. - README and wiki count 2072 checks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
100 lines
7.5 KiB
Markdown
100 lines
7.5 KiB
Markdown
# Feuerwerk
|
||
|
||
[](https://git.nockal.com/meleki/feuerwerk/actions?workflow=ci.yml)
|
||
|
||
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/feuerwerk/> · Widget playground: <https://nockal.com/feuerwerk/?playground>
|
||
|
||
**The documentation is the wiki:** <https://git.nockal.com/meleki/feuerwerk/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, variables, struct,
|
||
collider, rigidbody, joint, container, clip area, texture, vector art, pixel art, palette,
|
||
animation, curve, tile, tilemap, state machine, shader, shader function, font, sound, sound FX,
|
||
instrument, pattern, song, bus, particles) 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. **Release…** shares a link that plays the saved game on its own, without
|
||
the editor and without signing in.
|
||
|
||
## Quick start
|
||
|
||
Node 22 is required.
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev # http://localhost:5175/feuerwerk/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:
|
||
|
||
```bash
|
||
node tools/seed-e2e.mjs && node tools/e2e.mjs # the editor, 2072 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 runners – 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](https://git.nockal.com/meleki/feuerwerk/wiki/Development).
|
||
|
||
## Documentation
|
||
|
||
| Page | What it covers |
|
||
|---|---|
|
||
| [Concepts](https://git.nockal.com/meleki/feuerwerk/wiki/Concepts) | Assets, scene objects, overrides, play mode, the camera, the console |
|
||
| [Accounts](https://git.nockal.com/meleki/feuerwerk/wiki/Accounts) | Signing in and out, the accounts, who a project belongs to, what the check tools need |
|
||
| [Scenes](https://git.nockal.com/meleki/feuerwerk/wiki/Scenes) | The edited scene, the start scene, and switching scenes from a graph |
|
||
| [Scene editing](https://git.nockal.com/meleki/feuerwerk/wiki/Scene-editing) | Placing, z-order, hierarchy, the editor offset |
|
||
| [Behaviors](https://git.nockal.com/meleki/feuerwerk/wiki/Behaviors) | Node graphs: variables, the node set, structs and lists, loops, nesting, editing |
|
||
| [Structs](https://git.nockal.com/meleki/feuerwerk/wiki/Structs) | Struct assets: a named shape that struct variables, fields and `Pack`/`Expand` follow |
|
||
| [Colliders](https://git.nockal.com/meleki/feuerwerk/wiki/Colliders) | Shapes (box, circle, capsule, polygon), collision events, blocking movement, one-way colliders and raycasts |
|
||
| [Physics](https://git.nockal.com/meleki/feuerwerk/wiki/Physics) | Rigidbodies, the collider material, gravity, the fixed step, joints |
|
||
| [Textures](https://git.nockal.com/meleki/feuerwerk/wiki/Textures) | Images, frames, nine-slice, the filter, upload limits |
|
||
| [Vector art](https://git.nockal.com/meleki/feuerwerk/wiki/Vector-Art) | Pictures drawn from shapes: the pen, curves, gradients and texture fills, combining shapes |
|
||
| [Pixel art](https://git.nockal.com/meleki/feuerwerk/wiki/Pixel-Art) | Pictures painted pixel by pixel: the palette, the tools, layers and frames |
|
||
| [Fonts](https://git.nockal.com/meleki/feuerwerk/wiki/Fonts) | Font assets, the picker, what a text falls back to |
|
||
| [Sounds](https://git.nockal.com/meleki/feuerwerk/wiki/Sounds) | Sound assets and clips, `Play sound`, buses and the Master routing, sound FX |
|
||
| [Instruments](https://git.nockal.com/meleki/feuerwerk/wiki/Instruments) | Instruments as node graphs, Chips and presets, the keys of the Instrument tab, `Play note` |
|
||
| [Patterns](https://git.nockal.com/meleki/feuerwerk/wiki/Patterns) | Patterns and the piano roll, playing one in a loop or from a game |
|
||
| [Songs](https://git.nockal.com/meleki/feuerwerk/wiki/Songs) | Songs, their tracks and items, routing, recording, playing one from a game |
|
||
| [Animations](https://git.nockal.com/meleki/feuerwerk/wiki/Animations) | Animation assets and the Animation tab |
|
||
| [Curves](https://git.nockal.com/meleki/feuerwerk/wiki/Curves) | Easings drawn by hand, the Curve tab, using one on a key or a `Lerp` |
|
||
| [Shaders](https://git.nockal.com/meleki/feuerwerk/wiki/Shaders) | Shader graphs that sprites, texts, particle fields and cameras wear, their node set, passes, shader functions |
|
||
| [Particles](https://git.nockal.com/meleki/feuerwerk/wiki/Particles) | Particle graphs: a particle as a function of its age |
|
||
| [State machines](https://git.nockal.com/meleki/feuerwerk/wiki/State-machines) | The asset, named transitions, `State branch`, `Set state` and `State transition` |
|
||
| [Containers](https://git.nockal.com/meleki/feuerwerk/wiki/Containers) | Templates, instances, screens |
|
||
| [Tiles](https://git.nockal.com/meleki/feuerwerk/wiki/Tiles) | The tile asset, plain tiles and the two autotile kinds, the pictures as animation steps, the Tile tab |
|
||
| [Tilemaps](https://git.nockal.com/meleki/feuerwerk/wiki/Tilemaps) | The tilemap asset, painting in the scene view, layers, what it looks like in the game |
|
||
| [Plugins](https://git.nockal.com/meleki/feuerwerk/wiki/Plugins) | Extending the editor: the plugin file, how it is loaded, switching one on and off, API v1 |
|
||
| [Keyboard](https://git.nockal.com/meleki/feuerwerk/wiki/Keyboard) | Every shortcut |
|
||
| [Architecture](https://git.nockal.com/meleki/feuerwerk/wiki/Architecture) | Stack, source layout, the rules that keep it organised |
|
||
| [Development](https://git.nockal.com/meleki/feuerwerk/wiki/Development) | Commands, the e2e suite, the example games, CI |
|
||
| [API](https://git.nockal.com/meleki/feuerwerk/wiki/API) | The PHP JSON API and the project document |
|
||
|
||
## Ideas, gaps and bugs
|
||
|
||
They live in the issue tracker: <https://git.nockal.com/meleki/feuerwerk/issues>. What is not
|
||
there yet is listed on the wiki's [Home](https://git.nockal.com/meleki/feuerwerk/wiki) page.
|