Turn any novel into a playable browser game in 30 minutes — meet novel-game skill

A new ModelStudio Skill ships today — feed it any novel or short story and it scaffolds a full React SPA with branching scenes, AI-generated portraits, cinematic cutscenes, optional TTS narration, procedural Web Audio music, and save slots. Then you open localhost and play.

Repo:

By . Condensed:

1 · Requirements. The Agent fires a single AskUserQuestion with seven decisions: source material (EPUB / TXT / freeform prompt), game type (visual novel / text adventure / text RPG), UI style (pixel / cyberpunk / ink-wash / minimal), narrative POV, asset mode (video / image / hybrid — hybrid recommended), audio mode (BGM only / +SFX / +TTS narration), target duration (15 / 30 / 60+ minutes).

2 · Story design. Extract 1–3 main lines, 3–5 branching choice points, 3–5 endings, 6–8 characters, 5–8 cutscene moments, plus unlockable codex entries.

3 · Project scaffold. npx create-react-app with the canonical layout: components/, data/, hooks/, styles/, scripts/, public/assets/.

4 · Data model. A single story.js describes the full scene graph — branching choices, flag mutations, cutscene triggers, codex unlocks, ending conditions. A sibling generated-assets.json indexes every AI-generated asset with its local path and type (video / image / mp3).

5 · Implementation patterns. Typewriter text via timed setInterval (40–50ms per char), choice panel with hover affordances, hash routing so any chapter is a deep link, localStorage-backed autosave plus three manual slots, portrait component that auto-detects video vs image, cutscene component with Ken Burns for stills, mobile-aware touch targets (≥44px) and touch-action: manipulation, lazy video loading with explicit memory release on unmount.

6 · Asset generation. scripts/generate-assets.sh drives the bl CLI:

CODE Kopieren

bl video generate --download   # portrait or cutscene as 5s 720p video

bl image generate              # portrait or background, 768x1024 / 1920x1080

bl speech synthesize --voice longxiaochun   # TTS narration

bl video ref                   # multi-reference video for character consistency

Video jobs take 2–5 minutes each, so the script submits in --async mode with 3–5 concurrent jobs, then batch-downloads. Roughly a 4× wall-time speedup vs sequential.

What does one run cost

Assuming a 30-minute / 15–18 scene mid-tier run in hybrid asset mode:

Item	Count	Unit	Subtotal
Character portraits (image)	8 × 768×1024	bl image generate	cents range
Key cutscenes (720p video)	5 × 5s	¥0.9/s × 5s × 5	≈ ¥22.5
Scene backgrounds (image)	8 × 1920×1080	bl image generate	cents range
TTS narration (optional)	15 × ~30s	bl speech synthesize	single-digit ¥

Authoritative pricing is on the ModelStudio console. New accounts get free credits — plenty to walk the demo end-to-end.

The headline: roughly a cup of coffee, and you have your own playable visual novel.

Try it in three commands

1. Install the skill:

CODE Kopieren

npx skills add modelstudioai/skills

Pick novel-game from the prompt (or --all to grab the whole bundle).

2. Wire up bl and an API key:

CODE Kopieren

npm i -g bailian-cli

bl auth login

Grab a key at used it to produce a complete novel-to-game adaptation — not a screenshot demo, an actual React project people have played. The pitfall guide in SKILL.md is paid-for-in-real-time wisdom.

If you build content, games, or interactive narratives, this is a low-cost weekend to spend.

Share what you build over at

Skill ·

— ModelStudioAI on GitHub

Vollständiger Original-Bericht

Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

↗ Original-Artikel auf dev.to lesen