← ClaudeAtlas

startinglisted

The wiring order for a Lattice game — canvas, surface, camera, palette, light, depth sorter, loop and input — and the shape a first build should take so it does not come out a diorama. Use when starting an isometric game, setting up a Lattice project, writing the boot or main.ts, adding a game loop to a canvas, choosing a map size or an opening camera, when the world looks small or sits in the middle of an empty background, or when the first screen is blank, black, empty, or the game keeps drawing but stops responding to taps.
C-Aniruddh/lattice · ★ 37 · AI & Automation · score 74
Install: claude install-skill C-Aniruddh/lattice
# Starting a Lattice game Nine packages, one boot file, and an order that is not obvious. Get it wrong in two specific places and there is no error, no warning, and a picture that looks plausible — the whole reason this skill exists. The layering, so you never have to guess which package a thing is in: ``` core ─┬─▶ iso ──┬─▶ draw ─┬─▶ ui ├─▶ loop │ │ ├─▶ sim └─────────┤ ├─▶ persist │ ├─▶ input ──────────┘ └─▶ audio ``` `core` imports nothing. Nothing imports `ui`. If you find yourself wanting an upward import you have the design backwards, not a missing export. --- ## The boot, in full This compiles and runs. Copy it, rename it, and change the world it builds — not the order. ```ts import { createScope } from '@latticekit/core'; import { DepthSorter, createCamera, tileBounds } from '@latticekit/iso'; import type { Rect } from '@latticekit/iso'; import { BASE_SLOTS, beginFrame, createCanvas2dSurface, createLightField, createPalette, endFrame, isoTile, renderFrame, } from '@latticekit/draw'; import type { Passes } from '@latticekit/draw'; import { browserFrames, createLoop, createTweens } from '@latticekit/loop'; import { createInput } from '@latticekit/input'; // ── the screen ──────────────────────────────────────────────────────────────────── const host = document.getElementById('app') ?? document.body; const canvas = document.createElement('canvas'); canvas.style.cssText = 'display:block;width:100%;h