{"slug": "turn-any-novel-into-a-playable-browser-game-in-30-minutes-meet-novel-game-skill", "title": "Turn any novel into a playable browser game in 30 minutes — meet novel-game skill", "summary": "ModelStudioAI released a new Skill that transforms any novel or short story into a fully playable browser game in about 30 minutes. The novel-game Skill scaffolds a React single-page application with branching scenes, AI-generated portraits, cinematic cutscenes, optional text-to-speech narration, procedural Web Audio music, and save slots. It is the first Skill to combine video, image, speech, procedural audio, and frontend engineering into a single pipeline that outputs a runnable web app.", "body_md": "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\n\n`localhost`\n\nand play.Repo:\n\n[github.com/modelstudioai/skills]\n\nSkill path:`skills/novel-game/`\n\nBy[ModelStudioAI]\n\nIn one sentence: **hand your Agent a novel, get back a playable browser game you can share with a friend.**\n\nThis is not \"generate a plot synopsis and call it interactive\". It is not \"here is a prompt, go paste it into some web UI\". The `novel-game`\n\nskill literally:\n\n`bl`\n\nCLI — character portraits as 5-second looping videos or \"breathing\" still images, cutscenes as 1080p video or Ken-Burns-style stills, narration via TTS, BGM and SFX procedurally synthesized through Web Audio (no external audio files);`public/assets/`\n\nso the running game makes A typical run produces 8–10 scenes, 3–5 branching endings, 6–8 AI portraits, 5–8 AI cutscenes, a procedural soundtrack, and three manual save slots plus autosave.\n\n**It is the first true end-to-end demo of the bl multimodal stack.** Earlier first-party skills lean on a single modality — docs lookup, prompt studio, financial agent, single-shot short-form video.\n\n`novel-game`\n\nis the first that wires video + image + speech + procedural audio + frontend engineering into a single pipeline whose output you can click on.**It pushes \"Agent Skill\" from tool-call to product delivery.** Most skills today expose an API. This one delegates a creative pipeline and hands back a runnable web app. That is a different abstraction altogether.\n\n**It is the cleanest \"show, don't tell\" demo we have.** Walking a stakeholder through a live run beats ten slides — *the Agent literally turned a novel into a game while we watched*.\n\nThe full version lives in [ SKILL.md](https://github.com/modelstudioai/skills/blob/main/skills/novel-game/SKILL.md). Condensed:\n\n**1 · Requirements**. The Agent fires a single `AskUserQuestion`\n\nwith 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).\n\n**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.\n\n**3 · Project scaffold**. `npx create-react-app`\n\nwith the canonical layout: `components/`\n\n, `data/`\n\n, `hooks/`\n\n, `styles/`\n\n, `scripts/`\n\n, `public/assets/`\n\n.\n\n**4 · Data model**. A single `story.js`\n\ndescribes the full scene graph — branching choices, flag mutations, cutscene triggers, codex unlocks, ending conditions. A sibling `generated-assets.json`\n\nindexes every AI-generated asset with its local path and type (`video`\n\n/ `image`\n\n/ `mp3`\n\n).\n\n**5 · Implementation patterns**. Typewriter text via timed `setInterval`\n\n(40–50ms per char), choice panel with hover affordances, hash routing so any chapter is a deep link, `localStorage`\n\n-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`\n\n, lazy video loading with explicit memory release on unmount.\n\n**6 · Asset generation**. `scripts/generate-assets.sh`\n\ndrives the `bl`\n\nCLI:\n\n```\nbl video generate --download   # portrait or cutscene as 5s 720p video\nbl image generate              # portrait or background, 768x1024 / 1920x1080\nbl speech synthesize --voice longxiaochun   # TTS narration\nbl video ref                   # multi-reference video for character consistency\n```\n\nVideo jobs take 2–5 minutes each, so the script submits in `--async`\n\nmode with 3–5 concurrent jobs, then batch-downloads. Roughly a 4× wall-time speedup vs sequential.\n\nAssuming a 30-minute / 15–18 scene mid-tier run in hybrid asset mode:\n\n| Item | Count | Unit | Subtotal |\n|---|---|---|---|\n| Character portraits (image) | 8 × 768×1024 | `bl image generate` |\ncents range |\n| Key cutscenes (720p video) | 5 × 5s | ¥0.9/s × 5s × 5 | ≈ ¥22.5 |\n| Scene backgrounds (image) | 8 × 1920×1080 | `bl image generate` |\ncents range |\n| TTS narration (optional) | 15 × ~30s | `bl speech synthesize` |\nsingle-digit ¥ |\n\nAuthoritative pricing is on the ModelStudio console. New accounts get free credits — plenty to walk the demo end-to-end.\n\nThe headline: roughly a cup of coffee, and you have your own playable visual novel.\n\n**1.** Install the skill:\n\n```\nnpx skills add modelstudioai/skills\n```\n\nPick `novel-game`\n\nfrom the prompt (or `--all`\n\nto grab the whole bundle).\n\n**2.** Wire up `bl`\n\nand an API key:\n\n```\nnpm i -g bailian-cli\nbl auth login\n```\n\nGrab a key at [bailian.console.aliyun.com](https://bailian.console.aliyun.com/cn-beijing/?source_channel=key_github&tab=app#/api-key) — new accounts get free credits.\n\n**3.** Ask your favorite Agent (Claude Code / Qoder / Cursor / Cline / …) in natural language:\n\n```\nAdapt the Ye Wenjie arc from \"The Three-Body Problem\" into a visual novel,\nink-wash style, 30-minute playtime, hybrid assets.\n```\n\nThe Agent owns the rest: ask the seven decisions, design the branches, scaffold the React project, write the code, generate every asset, and `npm start`\n\n.\n\n**Prompt safety**. Video prompts containing weapons, smoking, or explicit violence get rejected. The skill ships a built-in rewrite table — content lessons distilled from dozens of real runs.\n\n**Procedural BGM**. Music is synthesized live via Web Audio, not pre-baked MP3s. Fixed MIDI pitch arrays, multi-voice layering, convolution reverb, ADSR envelopes, detuned pad sustains. Sounds composed; ships at zero file size.\n\n**Mobile gotchas**. iOS Safari auto-zooms inputs under 16px. `touch-action: manipulation`\n\nto kill the 300ms click delay. `env(safe-area-inset-bottom)`\n\nfor the home indicator. Dual-bind `click`\n\n+ `touchend`\n\nto recover responsiveness on edge browsers. All wired in by default.\n\n**Video memory release**. When leaving a scene, `video.pause(); video.removeAttribute('src'); video.load();`\n\nis required — without it the WebView leaks frame buffers and a 30-minute play session ends in jank.\n\nOur bar for first-party skills is one line: **someone shipped real output with it, and the design is worth copying.**\n\n`novel-game`\n\nclears both bars. Author [@lishengzxc](https://github.com/lishengzxc) 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`\n\nis paid-for-in-real-time wisdom.\n\nIf you build content, games, or interactive narratives, this is a low-cost weekend to spend.\n\nShare what you build over at [Issues](https://github.com/modelstudioai/skills/issues), or open a PR if you spot a missing tip in the SKILL.\n\n**Repo** · [github.com/modelstudioai/skills](https://github.com/modelstudioai/skills)\n\n**Skill** · `skills/novel-game/`\n\n**Try the model** · [ModelStudio HappyHorse 1.1 playground](https://bailian.console.aliyun.com/cn-beijing?tab=demohouse&source_channel=hh_github#/experience/t2v)\n\n— [ModelStudioAI](https://github.com/modelstudioai) on GitHub", "url": "https://wpnews.pro/news/turn-any-novel-into-a-playable-browser-game-in-30-minutes-meet-novel-game-skill", "canonical_source": "https://dev.to/treelin/turn-any-novel-into-a-playable-browser-game-in-30-minutes-meet-novel-game-skill-57f1", "published_at": "2026-06-25 06:05:50+00:00", "updated_at": "2026-06-25 06:42:58.889049+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "developer-tools", "artificial-intelligence", "large-language-models"], "entities": ["ModelStudioAI", "React", "Web Audio", "GitHub", "novel-game Skill"], "alternates": {"html": "https://wpnews.pro/news/turn-any-novel-into-a-playable-browser-game-in-30-minutes-meet-novel-game-skill", "markdown": "https://wpnews.pro/news/turn-any-novel-into-a-playable-browser-game-in-30-minutes-meet-novel-game-skill.md", "text": "https://wpnews.pro/news/turn-any-novel-into-a-playable-browser-game-in-30-minutes-meet-novel-game-skill.txt", "jsonld": "https://wpnews.pro/news/turn-any-novel-into-a-playable-browser-game-in-30-minutes-meet-novel-game-skill.jsonld"}}