kaplay 3001.0.19 runs in the canvas below. The four lab cast characters, a desk and a vault are drawn by the kit and Rough.js into detached SVGs at load, rasterised through a canvas and handed to the engine as sprites. You are Ines: walk about, bump into the others for a line, and press E by the vault. The status line says which sprite path was used.
loading…
The baked sprites
What this taught us
- An engine gives, for nothing, the three things a storyboard page has to fake: input (keys, touch and a gamepad through one API, with the canvas owning the keyboard so a page's fields are left alone), a camera (one call a frame and the room is wider than the screen), and collisions (bumping into Vex is one handler on a tag). The room took fewer lines than the walk cycle's rig. Status: exploring.
- It costs the DOM. Everything is pixels on a canvas: no text to select or search, no
<svg>to inspect or export, and the kit's drawings only get in by being baked into bitmaps first (SVG serialised, loaded as an image, drawn to a canvas, handed over as a data URL). The bake is done once at load and is cheap, but a sprite is one pose at one size: a new mood or pose is another bake, and zooming the camera shows the pixels where the SVG would stay crisp. - Rasterising through a canvas was needed, not a fallback: the engine's loader takes a URL and the page must not fetch anything from a third party, so the sprite is a
data:URL made by the page, and that needs the canvas step. The SVG is written with explicit width and height attributes, so the image has a size to draw at; the page avoids the blank-image failure rather than testing it. The kit's fonts do not reach the engine either; the lines are drawn in the engine's own font. - For a storyboard to play inside an engine it would need three things the data does not have yet: a room (where the floor is, where people stand, what blocks them), verbs on the props (the vault's "open" is a sprite swap here, written by hand) and the lines as reactions rather than a sequence (a line is said when you bump into someone, not when the panel comes up). The storyboard's kinds of scene, with cast, props and says, map onto all three; what is missing is the geometry and the triggers, which is a new scene kind, not a change to the kit.