vfx

Real-time VFX

Effects spell out the mechanics first: before pretty, decide what the player must learn (hit confirmed? danger radius?). Then the timing model: anticipation → overload → processing — brief windup, violent fast core, slow lingering decay. Fast in, slow out: peak size in the first ~20% of an effect's life, the rest is decay.

Three more laws: scale of importance — a basic attack must never outshine an ultimate; if it feels long, it's way too long: effects live in a busy scene, default shorter than feels right alone; and replace, don't layer — a weak effect gets removed or replaced, never a new one stacked beside it. Stacking compounds draw calls, noise and maintenance, and reads muddier, not richer.

Before adding an effect

• Audit the fx dir first and ask "what does this replace?" — the answer is rarely "nothing".
• Style every surface, not just the headline one: if streets get a treatment, grass, sand and water get theirs.
• Generated spell/ability boards: pixel-art Recipe 6 — 12-frame 4×3 board → 128px strip; energy on black, matter on chroma.
• 3D weapon trails/ribbons: threejs/references/game-patterns.md, "Weapon trails".

Anatomy of an explosion (layered)

Build as independent layers — flash → blast → fire → smoke — each with its own timing. Medium explosion ≈ 600–900ms total:

1. Contrast dip (~1 frame, optional): a dark flicker right before the flash multiplies perceived brightness.
2. White flash (50–80ms): near-white core at almost-max radius immediately. Hit-stop and screen shake land here (see game-feel).
3. Sharp blast (100–200ms): hot angular core — sharp shapes for energy, no noise. Debris and sparks launch at max speed now.
4. Fire fade (~25% of total): shrink and cool white→yellow→orange→red.
5. Smoke + afterglow (~40%): smoke rises and fades slowly — it must outlive the fire ~2×. Leave a scorch mark (permanence — Vlambeer).

Minimum 4 frames for a readable sprite explosion. For barrages, chain small explosions offset in time/position, never one long one.