← all demos · chapter 06 · the stagecraft cheatsheet
Every gallery before this one dressed a thing: a button, a cube, a phrase, a moving mote, a baked sheet, a lit ball. This one dresses the scene — one small stage (a sky, a hill line, a ground, a lamp, a crate, a tree, and a code-drawn hero sprite with a run cycle) and 104 things that happen to it. Eight families: the screen bent after the fact (wipes, CRT curves, dither, palettes that cycle, RGB splits, distortion, radial blur, god rays, grades, grain, tape damage); the sprite's own skin (frozen and petrified, poisoned, jelly, swaying, X-rayed, reflected, sheared into a shadow, pixel-perfect, nine-sliced, toon-lined, under water, holographic); light and what it cannot reach (visibility polygons, fog of war, torches, night, lightning, stealth meters, shafts, dusk windows, blob shadows, bloom, room lights, zones); weapons, impacts & decals; water, weather & nature; the particle machinery under every effect; the HUD as an effect; and the sound half, drawn. Each card is a living loop plus a press reaction (click a running card to fire, poke, aim, or scrub it — a small badge says click or drag until you have). Press ▶ Run all, or wake one card at a time. Two cards flash the whole frame (lightning, muzzle fire) and are opt-in: they show a notice until you click them. The tempo buttons run everything at ×2 or ×4 for skimming.
Every effect also hides a rhyme. Click ⇄ its rhyme on any card to swap it for the same effect with two or three dials turned — a palette, a mode, a count — and nothing else (104 more effects folded into the same cards); then open code to read the pair: every card keeps its numbers in a D = { … } block at the top, and the rhyme's source is that block with the moved dials named. Where this page comes from: the screen and skin families are the shader lessons of chapter 03 spelled out per pixel in canvas (a shader is a tiny program answering "what colour is this pixel?" — here that program is a plain loop over an ImageData you can read); the light family grows out of chapter 16's candles and lanterns; impacts, weather and particles out of chapter 06's sparks and waterdrops; the HUD out of chapter 12 and 13; and the sound family out of chapter 07's three blips — it makes no sound until you click a card, and every one of its cards is worth watching with the sound off.
Every effect is one function, make(u), returning { frame(dt, t), press(x, y) } — and drag: true when its press is a continuous control. Its dials sit at the top in a D = { … } object, so the first thing to edit is always in the first three lines. The kit u: ctx, W, H, GY, a palette (HERO, SUN, FIRE, SPARK, HOT, GOOD, MAGIC, WATER, BONE), the scene (stage({night}), ground(), hero(x, y, {pose, face, frame, tint}), heroSprite() for the sprite's pixels, tree / lamp / crate / wall / house), the drawing pocket tools (dot, ring, line, rect, poly, arrow, ellipse, glow, label, text), the shader half spelled in canvas (layer(name) for an offscreen canvas, pix(scale, fn) for a whole-frame pixel pass, pixelsOf(cv), cutLight() for holes in darkness, visPoly() for the visibility polygon), the numbers (rand, rng(seed), noise, noise2, lerp, clamp, ease, smooth), colour helpers (mix, shade, rgba, hsl), and the sound half (tone(), noiseBurst(), beep(), spectrum(), voices() — silent where the browser has no audio). Everything else — every threshold, radius, and palette — lives in plain sight in D.
The preview is bigger than the cards, and every effect is written relative to W, H, and GY — the same code scales up without edits. Click (or drag, on the drag cards) the preview to trigger the press reaction.
D. In Crt, set curve to 0 and the barrel goes flat; in Ordered, set levels to 2 for pure one-bit; in Visibility, add a wall segment and watch the polygon grow a notch; in Healthbar, set the ghost's delay to 0 and the lesson disappears — the white bar is the information; in Lookahead, shrink the window until the scheduled metronome starts to stumble like the frame-timed one. The universal anatomy of this page: draw the scene, then decide which pixels, which layer, which event, or which voice gets changed — and by how much, on what clock.In Godot: all 104 (+104 rhymes) are ported — eight family files in scenes/stage/, paged by family in stagecraft.gd (grab the Godot project and press its menu's L; right-click any card for its rhyme, double-click to enlarge, 1/2/4 for tempo). The screen family is the one place the spelling honestly changes: what this page does with a pixel loop, Godot does with a canvas_item shader reading screen_texture — thirteen small .gdshader files in shaders/stage/, each one the same arithmetic as its card. In Unity and Unreal the same effects land on URP Renderer Features / full-screen materials, sprite shaders, 2D lights with shadow casters, decal projectors, Niagara sub-emitters, UI Toolkit / UMG, and the audio mixers — the stagecraft cheatsheet has every engine's spelling per family, and the chapters it links carry the long form.