Pixel art can be drawn in its own tab with layers and frames (#130)
game-maker / gate (push) Successful in 2m24s
game-maker / suite (push) Failing after 7m40s

Textures are uploaded files named by their content, so they cannot
be edited in place. Pixel art is therefore its own asset type, like
vector art. Its pixels live in the project and the tab rasters them
into a texture that sprites, tiles and animations can use.

- New asset types Pixel art and Palette. The first pixel art of a
  project gets a palette with the 16 PICO-8 colours in the same undo
  step. Every pixel is a palette index, 0 is transparent.
- Each layer on each frame is its own file data/pixels/<sha256>.px.
  The project only holds the names, so undo swaps names. The browser
  computes the hash and uploads new cels before the project is saved.
- New route POST ?r=pixels in api/lib/PixelStore.php. It answers 201
  and 422 for broken data. data/pixels/ is git-ignored.
- Tools: pencil, eraser, fill (contiguous or all pixels of a colour),
  eyedropper, line, rectangle and ellipse (outline or filled), brush
  size 1 to 8.
- Layers can be added, deleted, renamed, reordered, hidden, faded and
  merged down. Frames can be added, duplicated, deleted and reordered,
  with onion skin and a small playing preview.
- Zoom 1x to 32x in whole steps, grid from 8x, a 3x3 tile preview and
  Resize... with a 3x3 anchor.
- All frames sit side by side in one image. Each frame is a region
  like a cut texture frame, so texture rows offer "Asset / Frame 2"
  and the context menu has Create animation from frames.

Decisions:
- Merging down drops the opacity of the upper layer. Indexed colours
  know no blends.
- Only the last palette colour can be removed. Otherwise the indices
  of every image using the palette would shift.
- Undo stores the whole layer per stroke instead of pixel diffs.
- Alt+click picks a colour. It is a mouse gesture, not a shortcut.

Follow-up issues: #197 import from texture, #198 selection and
flipping, #199 PNG export, #200 more tools.

Tests:
- ./check.sh: 136 files, 2049 tests (before 135 / 2011). 34 new in
  tests/core/pixel-art.test.ts, 4 from the icon tables.
- e2e module 48 fresh: ALL PASSED, 29 checks, console empty.
- Counter-probes bite: five on the unit tests, upload order (2 tests
  fail) and cels not uploaded in the browser (1 check fails).
- Check total 1259 in README is computed (1232 measured in CI + 27).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5 committed 2026-09-21 17:33:44 +02:00
1 parent 1c8a20fcac
commit 66d6aafbb4
43 files changed
+4018 -24

No files matched your search

+44
View File
@@ -0,0 +1,44 @@
/**
* The view rules of the pixel art tab (#130) that need no Pixi: whole zoom steps, where the grid
* starts, and which pixel a pointer is over – so they can be checked without a browser.
*/
import type { SheetView } from '../texture/sheetView';
/** The zoom steps (answer 9: whole steps from 1x to 32x). Doubling alone jumps too far in the middle. */
export const ZOOM_STEPS = [1, 2, 3, 4, 6, 8, 12, 16, 24, 32] as const;
/** From this zoom on the pixel grid is drawn; below it the lines would be denser than the pixels. */
export const GRID_FROM_ZOOM = 8;
/** The largest step at which the canvas still fits the area, never below 1x. */
export function fitZoom(canvasW: number, canvasH: number, areaW: number, areaH: number): number {
let zoom: number = ZOOM_STEPS[0];
for (const step of ZOOM_STEPS)
if (canvasW * step <= areaW * 0.9 && canvasH * step <= areaH * 0.9) zoom = step;
return zoom;
}
/** The next step up (`direction` 1) or down (-1) from `zoom`; stays at the ends. */
export function stepZoom(zoom: number, direction: 1 | -1): number {
if (direction > 0) return ZOOM_STEPS.find((step) => step > zoom) ?? ZOOM_STEPS[ZOOM_STEPS.length - 1]!;
return [...ZOOM_STEPS].reverse().find((step) => step < zoom) ?? ZOOM_STEPS[0];
}
/** The canvas centred in the area at a zoom, on whole screen pixels so the pixel edges stay sharp. */
export function centredView(
canvasW: number,
canvasH: number,
areaW: number,
areaH: number,
zoom: number,
): SheetView {
return {
panX: Math.round((areaW - canvasW * zoom) / 2),
panY: Math.round((areaH - canvasH * zoom) / 2),
zoom,
};
}
/** The pixel under a widget-local point – anywhere, inside the canvas or not. */
export function pixelUnder(view: SheetView, localX: number, localY: number): { x: number; y: number } {
return { x: Math.floor((localX - view.panX) / view.zoom), y: Math.floor((localY - view.panY) / view.zoom) };
}