Guide · Playable HTML · v6.7+

Playable HTML mini-games

Describe the gameplay in one sentence inside the AI chat panel and the agent writes a whole pure Node (esbuild) project: geometry, textures, materials, sound effects and level layouts are all generated by code. The host cooks it into a single file locally, and the Play button on the card opens it in your browser. Great for gameplay drafts and asset sketches — not a replacement for Unity / Godot.

1. What it is

Since v6.7 this path is driven by the chat panel (there is no longer a "Playable HTML generation" / "Playable HTML" node in the graph):

Step	Who does it	Output
Brief	You describe the gameplay in one sentence	The one-sentence brief
Scaffold	Tool `gameplay_prepare_project`	`Cache/GamePlayJobs/…/project` (package.json / build.mjs / src/core / src/assets skeleton)
Code	The agent edits `src/**` with its own file tools	Procedural assets + gameplay (geometry / canvas textures / audio / levels)
Build	Tool `gameplay_build` (the host runs npm)	Single-file `dist/single.html`
Play	Play button on the chat artifact card	Opens in the system default app (browser); a gamePlay asset is registered too

You need a configured text model (DeepSeek recommended; other compatible providers work) plus Node / npm on the machine (used for the cook). Generation runs through the dsh agent in the chat panel, and only the host runs npm — never race it from the project directory.

2. Doing it in the AI chat

Open the AI chat panel on the right (mode Craft) and just describe the game, for example:

Low-poly space station corridor: collect energy cells, WASD to move, mouse to steer, win at 10; use Three.js

The agent calls three tools in turn:

gameplay_prepare_project: writes the scaffold (optionally with mode: 2d | 3d | auto and a game title).
It writes src/assets/** (procedural assets) and src/game/** (gameplay) itself.
gameplay_build: the host runs npm install + node build.mjs and returns a jobId; poll it with gameplay_job_status until done.

When the build finishes, a game card appears in the conversation with a single Play button that opens the game in the system default app.

2D or 3D follows what you ask for; say "use Three.js" when you want 3D for sure. The asset-layer conventions (directory layout, the defineAsset contract, texture and audio recipes) live in the built-in skill gameplay-proc-assets, which the agent loads on demand.

3. All assets generated by code

This is the heart of the approach: no asset downloads and no paid generation APIs — everything is synthesized inside the generated project, so it costs nothing, produces assets instantly, is reproducible from a seed, and stays visually consistent.

src/core/rng.js: seeded randomness (change one character to swap the whole asset set).
src/core/palette.js: one coherent palette shared by textures, materials and lights.
src/core/registry.js: the defineAsset({ id, kind, build }) registry.
src/assets/geometry/: BufferGeometry shapes (extrude / lathe / merge / instancing).
src/assets/texture/: textures painted with Canvas 2D (stripes / noise / gradients), returned as a canvas ready for CanvasTexture.
src/assets/audio/: WebAudio synthesized SFX (oscillators + filters + envelopes).
src/assets/level/: level layouts derived from the seed.

4. Generate → build → play

Generate: describe the game in the chat; the log shows the agent editing src/**. In 3D mode the scaffold ships the three dependency and a 3D sample entry.
Build: gameplay_build starts, a running tool card appears, and the log shows npm install, node build.mjs and the single-file size when it succeeds. After a successful build the host also runs a playtest gate — the game really runs for a few seconds in a hidden window, catching uncaught exceptions, load failures, black screens and static frames, with the verdict in the smoke field of gameplay_job_status; when smoke.ok === false the agent fixes it from that report and rebuilds.
Play: the Play button opens the self-contained single file in your browser — fullscreen and DevTools included. If the build is not self-contained (ES modules or relative references), it falls back to the in-app play window and tells you why.
Also playable from the library: a successful build registers a gamePlay asset; double-click it (or right-click → Play) to use the in-app sandbox window.

5. Iterating and project layout

Keep talking: "make it darker / add a jump sound / change the seed" — the agent edits only src/assets/** and src/game/** and rebuilds once.
Rebuilding the same project reuses the same job and the same asset, updating the card in place, so neither the conversation nor the asset library fills up with duplicates.
On disk: Cache/GamePlayJobs/<jobId>/project/ under the project root, with the single file at dist/single.html.

6. FAQ

The build fails with an npm / build error?

Make sure Node.js / npm are on PATH, then read the log tail and error from gameplay_job_status. You can also run npm run build manually inside Cache/GamePlayJobs/…/project to compare.

Play opened an editor instead of a browser?

Play uses the system default app; if .html is associated with an editor, that is what opens. Use the in-app play window from the asset library in that case.

Blank page in the browser but fine in the app?

The build is not self-contained: from file:// browsers refuse to execute type="module" scripts and cannot read sibling files. Ask the agent to keep index.template.html on inline classic scripts (no type="module", no relative references).

Black screen or shader errors?

Start with the smoke field of gameplay_job_status: after a successful build the host runs the game once in a hidden window, and uncaught exceptions / load failures / an all-black screen / not a single rendered frame land in smoke.errors, while a frame that never changes lands in smoke.warnings. Hand that report to the agent for one more pass.

If the gate passes and only the visuals disappoint: complex custom WebGL (such as dFdx) is sensitive to WebGL1/2 extensions, so ask for standard Three materials instead. This is a prototyping path — the gate only guarantees that it runs and that pixels move, not that any shader looks good.

What happened to the old "Playable HTML generation" / "Playable HTML" nodes?

They are retired: game generation now happens in the chat. Legacy generation nodes are migrated into note nodes (keeping your brief text) that point you to the chat; legacy "Playable HTML" asset nodes still work (they render and can be double-clicked to play) but no longer appear in the right-click menu.

How does this relate to finished videos?

Loosely. Playable HTML is a lightweight gameplay prototype; short drama and ad deliverables still go through the node graph plus the timeline / director stage. See §8 Node graph and the short-drama guide.