Subway Cockroach

The unofficial seventh member of the Straphanger / Stand Clear / nyc-conductor / Subway Rat / Platform Pigeon platform: a glossy reddish-brown shell with visible segment grooves, a dark head cap with a single red eye-glint, and two forward-swept antennae. Two animation loops — an idle (still shell, antennae and eye twitch/blink) and a skitter (four-frame tripod gait: front and rear legs on one phase, the middle leg on the other, same trick real hexapods use).

Reuse

• export/roach-sheet.png — 156×12 strip, six 26×12 frames in order: idle-0, idle-1, skitter-0, skitter-1, skitter-2, skitter-3.
• roach-{idle,skitter}-*.png — the individual frames.
• roach@8x.png — prescaled 8× hero shot for docs/previews.

Render at integer scales with nearest-neighbor filtering or the edges smear. Idle plays at 3 fps, skitter at 10 fps (ANIMATIONS in the module carries both).

Source

No .aseprite — the canonical source is source/subway-cockroach.mjs: a framework-free ES module holding the pixel grids as character maps (one char per pixel, palette at the top). Edit a grid and regenerate everything with:

node source/render.mjs

(needs site/node_modules installed — the script resolves Playwright from there.) That one command rewrites export/, media/, thumb.png, and the demo’s bundled copy of the module, so nothing drifts.

How the frames are built

A frame is three layers composited on the 26×12 canvas, back to front: LEGS (fixed anchor, three leg strokes per side standing in for the hexapod’s six — same simplification subway-rat uses for its four), BODY (the shell, drawn at the frame’s bob offset — the only layer that moves vertically), then ANTENNA (fixed anchor at the head, drawn last so it reads over the shell edge). The skitter gait alternates tripodA/tripodB leg patterns — front+rear legs swing one way while the middle leg swings the other, then reverse — while the antenna pattern (up/twitch) cycles independently of the leg phase, so the four skitter frames don’t feel perfectly mechanical.

Gotchas

• validateGrids() throws if any row isn’t exactly 26 chars, or a frame references a missing leg/antenna pattern or eye color — call it after editing, or just run render.mjs, which calls it first.
• demo/subway-cockroach.js is generated. Edit source/subway-cockroach.mjs and re-render.
• The demo draws the sprite from the character maps at runtime, fine at this size. A game should blit roach-sheet.png instead.

Port notes

paintFrame is ~20 lines of grid walking with no DOM dependency beyond a 2D context — same shape as subway-rat’s and scout-drone’s — so a DragonRuby port translates directly: keep the grids as strings, map cells to args.outputs.solids, or just consume roach-sheet.png as a spritesheet with source_x = frame * 26.