Techniques / baked-texel
Baked texel (the bakekit house style)
The pre-rendered look of 1995–2002 games, made the way they were made: model, light once, render to sprites, and only place images at runtime. Both Kingdom Atlas and Abacus Overflow (Kernel Abacus) are built on it. The source of truth is the bakekit repo's ART.md; this is the short version for prototypes.
Rules
- 2px texel. Render at half resolution, scale up 2× nearest. Everything that shares a screen shares the grid. Never scale by a fraction: whole texels only, and scroll by whole even pixels so the dither never swims.
- A small adaptive palette per sprite strip, Floyd–Steinberg dithered. Not one global crushed palette (rejected as too crunchy). Big flat areas (plaster, skies) diffuse only ~70% so stray dots don't trail across them.
- Hard 1-bit alpha. No soft edges, no antialiased cutouts.
- One light, baked. A warm key from the top left, a cool sky fill, a warm ground bounce, soft AO. Shadows never move.
- Shadows are dithered (a checker or sparse stipple on a shadow-catcher layer drawn first), never blurred.
- Flat tone lit by relief. A surface is one colour shaded by its shape and texture noise, never a painted gradient.
- Value bands. Each layer (background, fixtures, gameplay, text) keeps to its own lightness range (CIELAB L*), so the things you play with always separate from the room or board. Test it in greyscale.
- Nothing is drawn at runtime. Icons, rings, shadows, lines, effects and canvas text are all baked strips; the view only stamps, crops and composites. Live HTML text is the one exception.
- No blur, glow, bloom, soft drop shadows, rounded "app" UI, candy gloss or emoji.
JS
- Canvas with
imageSmoothingEnabled = false; CSSimage-rendering: pixelatedon the canvas. - A fixed page plate (e.g. 1280×720) scaled to the window by whole multiples where possible.
- Sprites as strips plus a
manifest.jsonwith each strip's frames, fps and anchor (meta.footfor the ground point). - In bakekit projects:
npx bakekit bake <pattern>for SDF sprites,relieffor frames and backdrops,canvasfor marks.
Unity
- Sprites: Filter Mode Point, Compression None, PPU chosen so 1 texel = 2 screen pixels at the reference size.
- Pixel Perfect Camera (URP 2D) with the reference resolution and Upscale Render Texture on; integer zoom only.
- Pivot every sprite at its baked ground point (
meta.foot); sort by that point's screen y. - No post-processing volume: the look is in the bake. Turn off bloom, tonemapping and anti-aliasing.
- Shadows: a separate shadow-catcher sprite one sorting layer below the object, not a Unity light.