Spawned

An AI-assisted visual storyboarding tool that turns a game idea into an editable canvas and a playable top-down 2D adventure.

Spawned was built for the July 2026 AI Builders Challenge with IBM Bob. Screenshots and the product demo are provided on the challenge submission page.

Selected challenge theme

Reimagine Creative Industries with AI

Game creation combines writing, systems design, visual composition, asset selection, and programming. Spawned applies AI where creators face the most ambiguity—turning an early idea into a coherent game plan—while keeping the resulting work visible, editable, and under human control.

Problem statement

Creating even a small narrative game usually requires several different skills. A creator must define characters and locations, plan scenes, connect story events, design quests and combat, choose assets, express conditions and state changes, and then implement everything in code.

Existing game engines are powerful, but their timelines, scripting systems, and state machines can be intimidating to people who think naturally in stories rather than code. Pure text-to-game generators have the opposite problem: they are easy to start, but their output is opaque, inconsistent, and difficult to correct. Important details can be omitted or reinterpreted, and regenerating the whole game is slow and unpredictable.

Creators need a middle ground: an approachable way to begin with AI, a visual representation they can understand and change, and a reliable path from that representation to a playable result.

Solution description

Spawned guides a creator from an idea to a game in three stages:

1. Describe the game. The creator provides a premise and a few high-level choices such as genre, tone, gameplay focus, difficulty, length, scene count, and ending style.
2. Review an AI-produced blueprint. IBM Granite proposes the story structure, cast, locations, objects, scenes, dialogue, quests, transitions, and supported behaviors. The creator reviews names, descriptions, and recommended visual assets before continuing.
3. Edit and play. Spawned materializes the blueprint as a visual storyboard. The creator can move scenes and notes on an interactive whiteboard, edit scene contents, connect scenes, adjust story logic, compile a deterministic GameSpec, and launch the result as a Phaser game.

The dashboard also supports two faster paths:

• Upload a valid GameSpec JSON file and launch it directly.
• Choose a curated premade template and immediately generate a playable game, while retaining an editable project.

The visual editor includes:

• Project dashboard and guided new-game flow
• AI-generated story outline and asset recommendations
• Resizable cast, location, prop, and quest panel
• Pan-and-zoom storyboard canvas
• Scene, note, win, and lose nodes
• Typed transitions and conditions
• Scene-level character roles, notes, placement, and dialogue
• Natural-language Story Logic assistance
• Deterministic GameSpec compilation and validation
• Optional Granite audit of scene-character notes
• Playable Phaser runtime with movement, interaction, quests, inventory, combat, health, and endings

AI approach and architecture

Spawned uses a hybrid architecture: AI for creative planning and semantic assistance; deterministic software for compilation, validation, and gameplay.

AI-first creation

Original game creation uses IBM Granite in three focused passes rather than one oversized prompt:

1. Story structure creates the premise, cast, locations, and scene sequence.
2. Gameplay details adds objects, quests, dialogue, roles, transitions, win conditions, and supported behaviors.
3. Consistency review checks references, playability, entity placement, and narrative alignment.

Each pass has a strict JSON contract. The backend normalizes common model-output variations, validates required collections, and performs a focused repair pass when an outline is structurally incomplete. The preferred Granite provider is attempted first, with the other provider used as a fallback:

• IBM Granite through watsonx.ai
• IBM Granite through local Ollama

If neither provider is available, Spawned offers curated templates so the creator is never left with an empty canvas.

Human control and deterministic generation

The editable CanvasSpec v2 document is the source of truth. It stores scenes, characters, objects, quests, dialogue, transitions, terminal states, and typed advanced rules.

Clicking GameSpec runs a pure deterministic compiler:

Creator idea
    │
    ▼
Granite: outline → mechanics → consistency review
    │
    ▼
Editable CanvasSpec v2 storyboard
    │
    ▼
Deterministic validation and compilation
    │
    ▼
Read-only GameSpec v2
    │
    ▼
Deterministic code generation
    │
    ▼
Playable Phaser game

The compiler does not call an LLM. This makes repeated generation fast and ensures that the same canvas produces the same GameSpec. It validates IDs, references, transitions, conditions, actions, asset selections, scene reachability, player placement, and attainable endings before gameplay code is generated.

Granite remains available for tasks that benefit from semantic interpretation:

• Translating a focused natural-language Story Logic instruction into typed rules
• Auditing whether scene-specific character notes are represented by supported mechanics
• Proposing reviewable fixes for missing behavior

AI cannot silently rewrite the GameSpec or invent runtime capabilities. Proposed rules must pass validation and require explicit acceptance before they become part of the canvas.

System architecture

Layer	Technology	Responsibility
Creator interface	React 19, Vite	Dashboard, guided creation, asset review, storyboard editor, GameSpec inspection
Application API	Django, Django REST Framework	Projects, autosave, AI orchestration, validation, compilation, snapshots, play endpoint
AI	IBM Granite via watsonx.ai or Ollama	Story planning, mechanics, consistency review, semantic rule assistance
Data model	CanvasSpec v2, SQLite	Versioned editable project state with revision-safe autosave
Compiler	Python	Pure CanvasSpec-to-GameSpec transformation and diagnostics
Game runtime	Phaser 3	Rendering, movement, interactions, dialogue, inventory, combat, quests, and endings

How IBM Bob was used

IBM Bob was the primary development tool and engineering assistant used to build Spawned. It supported the project across the software-development lifecycle rather than being used only for isolated code completion.

Bob was used to:

• Inspect and understand the existing React, Django, and Phaser codebase
• Turn product requirements into an incremental development plan
• Design the CanvasSpec v2 and deterministic GameSpec pipeline
• Implement the guided Granite workflow and provider fallback behavior
• Build and refine frontend components, editor interactions, and the Spawned visual system
• Integrate Pixelarticons and improve accessibility, focus states, responsive behavior, and keyboard controls
• Implement canvas pan, zoom, coordinate-correct dragging, and resizable editor panels
• Diagnose CORS, React lifecycle, AI response parsing, timeout, and Gunicorn worker failures
• Improve Granite prompting, staged generation, validation, repair, and error reporting
• Implement deterministic Phaser runtime features such as enemy health bars and image-based inventory slots
• Add tests, run linting and builds, inspect regressions, and keep documentation aligned with the implementation

Development was collaborative: the human creator supplied the product direction, evaluated behavior, and made design decisions; IBM Bob inspected the repository, proposed technically grounded approaches, implemented approved changes, and validated the results. This made it possible to iterate across the full stack quickly while preserving a coherent architecture.

Repository structure

backend/   Django REST API, Granite orchestration, compiler, persistence, codegen
frontend/  React/Vite dashboard, wizard, and visual storyboard editor
game/      Phaser runtime and generated scene modules
scripts/   Asset import and manifest tooling
docs/      Asset and implementation notes

Quick start

Prerequisites

• Python 3.12+
• Node.js 20.19+
• npm

Install dependencies and start all three applications:

make install
make dev

Service	URL
Spawned editor	http://localhost:5173
Django API	http://127.0.0.1:8000
Phaser game	http://localhost:5174

The game page opens after a GameSpec is generated and the creator clicks Play.

Make targets

Command	Purpose
make install	Create the backend virtual environment, install dependencies, and run migrations
make dev	Start the backend, frontend, and game development servers
make build	Create the frontend production build
make lint	Run frontend linting
make test	Run backend compiler/API tests and Phaser runtime tests

Granite configuration

Local Granite with Ollama

ollama pull granite4.1:3b
ollama serve
make dev

Optional environment variables:

export AI_PRIMARY_BACKEND=ollama
export OLLAMA_MODEL=granite4.1:3b
export OLLAMA_URL=http://localhost:11434
export OLLAMA_TIMEOUT_SECONDS=600

The Ollama stage timeout defaults to 600 seconds, below the development Gunicorn worker timeout, so a slow model produces a controlled retryable error rather than terminating the worker.

Granite with watsonx.ai

export AI_PRIMARY_BACKEND=watsonx
export WATSONX_API_KEY=your-api-key
export WATSONX_PROJECT_ID=your-project-id
export WATSONX_URL=https://us-south.ml.cloud.ibm.com
make dev

The other configured Granite backend is automatically attempted when the primary provider fails.

Optional AI diagnostics

AI provider names and stage timers are hidden by default. To display them, create .env in the repository root with:

VITE_SHOW_AI_DIAGNOSTICS=true

Restart the frontend after changing this flag.

Deterministic example

canvas-example-five-scenes-v2.json is the primary authoring fixture. It compiles into the five-scene Clockwork Tide GameSpec without a model call. Files ending in -v1.json are retained only as legacy format references.

CanvasSpec and GameSpec v1 files are intentionally incompatible with v2.

Primary API endpoints

Base URL: http://localhost:8000/api

Method	Endpoint	Purpose
GET / POST	/api/projects/	List projects or create a project from a blueprint or CanvasSpec
GET / PUT / PATCH / DELETE	/api/projects/:id/	Load, autosave, rename, or delete a project
POST	/api/game-blueprints/outline/	Generate or repair story structure
POST	/api/game-blueprints/mechanics/	Add gameplay details to an approved outline
POST	/api/game-blueprints/finalize/	Perform the final Granite consistency review
GET	/api/game-blueprints/templates/	Return curated templates and recommended assets
POST	/api/projects/:id/story-logic/translate/	Translate natural language into validated typed rules
POST	/api/gamespec/compile/	Deterministically compile a CanvasSpec v2 document
POST	/api/gamespec/validate/	Return typed structural and playability diagnostics
POST	/api/gamespec/audit/	Audit scene-character notes with Granite
POST	/api/play/	Validate a GameSpec, generate the game, and return its URL
GET	/api/play/	Return the active GameSpec used by the Phaser runtime

Validation

# Frontend
npm --prefix frontend run lint
npm --prefix frontend run test
npm --prefix frontend run build

# Backend
backend/.venv/bin/python backend/manage.py test api

# Phaser runtime
npm --prefix game test
npm --prefix game run build

Projects are stored in SQLite as atomic CanvasSpec documents with revision-safe autosave. The frontend API base URL currently assumes the backend runs on port 8000.