Arrow keys move the cursor, Space or Enter applies the tool (line, rectangle and select take two presses), Alt+arrows move the selected pixels.
Palette
Live preview
Rendered by a running PixelJS engine: 1:1, then tiled 2 × 2.
Arrow keys move the cell cursor, Space or Enter applies the tool (the rectangle takes two presses). The dashed frame is the area the live preview shows.
Tiles
Live preview
A 256 × 144 camera at the view's scroll position, drawn with createTilemap and graphics.tilemap.
Click an empty cell to add a note and drag to lengthen it; drag a note to move it or its right end to resize it. Keys: arrows move the cursor, Space or Enter adds or selects, Alt+arrows move and Shift+Left/Right resize the selected note, Delete removes it.
A single-note sound plays one tone: set its waveform, frequency, envelope and duration on the left, and optionally slide it to another frequency, add vibrato or fade it out. Choose Notes as its type to compose a short jingle of up to 64 notes on a piano roll.
Selected note
Slide glides to the next note of the sound; vibrato wobbles by half a semitone; fade-out fades over the note.
View
Grid lines are only a view: they never change the notes.
Click an empty cell to add a note and drag to lengthen it; drag a note to move it or its right end to resize it. Keys: arrows move the cursor, Space or Enter adds or selects, Alt+arrows move and Shift+Left/Right resize the selected note, Delete removes it. Other tracks show in blue; the playhead position is approximate.
Selected note
Slide glides to the next note of the track; vibrato wobbles by half a semitone; fade-out fades over the note.
View
Grid lines are only a view: they never change the notes.
Export web assets
Download each file and keep this layout next to your game: assets.json and
palette.json at the top, the PNGs in images/ and the map files
in maps/. Games load them with the public PixelJS API
(loadImage, loadTilemap).
| File | Contents | Download |
|---|
Loading them in a game