Architecture & Performance Benchmark: Inside Literal Storyboard’s AI-Powered Narrative Game Engine

Literal Storyboard stands out in the AI-driven game development space by marrying classic board-game progression with generative AI storytelling. Built for the AWS Game Builder Hackathon, the project showcases a tightly-coupled React/Vite frontend, a multi-model OpenRouter LLM pipeline, and a Docker-based production topology that enables both cloud and offline gameplay.

The Engineering Challenge: Why Literal Storyboard Was Architected

Traditional RPG games either offer static dialogue trees or rely on pure LLM chat interfaces, lacking tactile progression and visual immersion. Literal Storyboard solves this by integrating a snake-and-ladder board map, sentiment-as-mechanic scoring, and dynamic background art generation – all while maintaining a zero-dependency fallback mode.

Core Architecture & Technical Stack Deep-Dive

1. Presentation Layer – React / Vite / Tailwind

The client is a TypeScript-enabled Single Page Application (SPA) built with Vite for rapid hot-module replacement and Tailwind CSS for responsive UI. The game state lives in src/game and is orchestrated via React hooks, enabling real-time updates as players roll dice, make choices, or view AI-painted scenes.

covariation=”2. Game Engine Core (src/game/)

This module manages the fantasy map coordinate matrix (45+ cities), dice-roll logic, token movement, and victory conditions. The board engine renders an SVG map with dynamic token positions and triggers story generation when a player lands on a city.

3. AI Orchestration Layer

Three distinct AI services are exposed via OpenRouter to allow flexible model swapping:

• Sentiment Grader: LLM evaluates dialogue tone and updates faction standing (+3 allies for kind answers, -3 for cruel choices.
• Image Painter: Generates atmospheric background art based on narrative context, painted behind the game canvas.
• Story Generator: Produces procedural story beats and NPC encounters on-the-fly.

All AI calls are wrapped in retry logic and fallback to bundled offline narratives if no API key is present – ensuring 100 % playability.

4. Deployment Topology – AWS Amplify / Docker Compose

The application can be served via AWS Amplify for serverless hosting or via Docker Nginx for self-managed environments. The Docker Compose stack includes the React build, an Nginx reverse proxy for CORS handling, and optional external API gateways for OpenRouter endpoints.

Key Features Breakdown & Practical Benefits

Real-Time Procedural Story Generation

Each city triggers an LLM call to synthesize a unique narrative, NPC dialogue options, and lore-grounded events. This keeps replay value high and eliminates static game content.

Sentiment-as-Game-Mechanic

Built-in moral scoring alters faction relationships instantly. Developers can prototype narrative outcomes without manual script writing, using LLM sentiment analysis for dynamic outcomes.

Dynamic AI Scene Painting

Background art is generated in response to the current story context, creating immersive visual environments without asset pre-loading.

Offline Fallback Engine

Bundled story beats and artwork are shipped with the build. When API keys are missing or network requests fail, the game seamlessly switches to static content, preserving the full user experience.

OpenRouter Multi-Model Integration

Swap text or image generation models at runtime via OpenRouter’s unified API, providing flexibility for cost optimization or model-specific capabilities.

Real-World Deployment & Production Topology

The architecture supports two primary deployment scenarios:

• AWS Amplify: Serverless hosting with automatic scaling, CDN, and SSL. Ideal for hackathon showcases and rapid iteration.
• Docker Compose: Containerized Nginx serving the React build, with optional API gateway containers for OpenRouter integration. Suitable for on-premise testing or CI/CD pipelines.

The diagram below illustrates the flow from player browser to OpenRouter endpoints, highlighting the three core AI services and the board engine.

Data Flow & How It Works: Step-by-Step Workflow

\�่วนใหญ่的玩家选择是基于情绪评分的系统会自动调整派系关系。+3表示获得盟友，-3表示被放逐。系统会实时更新游戏状态。”>
1. Initialize Game State: Load map coordinates, party tokens, and sentiment score from local storage or bundled assets.
2. Roll Dice: Generate random numbers to move tokens across the SVG board, updating coordinates.
3. City Trigger: Upon landing on a city, call the Story Generator via OpenRouter to fetch narrative and dialogue choices.
4. Player Choice: Render choice buttons; each selection is sent to the Sentiment Grader.
5. Sentiment Evaluation: LLM returns a tone score, updating faction standing and win/loss conditions.
6. Scene Painting: Based on story context, the Image Painter generates a background and overlays it behind the game canvas.
7. Victory/Exile Check: If sentiment score reaches +3 or -3, trigger win or exile sequences with celebratory or dramatic animations.

Architectural Comparison: Literal Storyboard vs Traditional Approaches

Aspect	Literal Storyboard	Traditional Game Engines
Story Generation	Real-time LLM procedural generation per city	Hardcoded dialogue trees and static scenarios
Sentiment Mechanics	Dynamic LLM-based moral scoring affecting faction standing	No adaptive emotional feedback
Visual Backgrounds	AI-painted scenery on-the-fly	Pre-rendered static assets
Offline Play	Bundled story beats & artwork	Often requires online DRM
Model Flexibility	OpenRouter multi-model swapping	Engine-specific model constraints

Frequently Asked Questions (FAQ)

Q1: How does the sentiment system affect gameplay outcomes?

A: The AI evaluates each player choice, assigning a positive or negative sentiment score. +3 allies triggers victory; -3 triggers exile, instantly altering faction relationships and ending conditions.

Q2: Can I replace the default AI models with custom ones?

A: Yes. All OpenRouter endpoints are abstracted, allowing you to swap text or image models via configuration. The React frontend dynamically selects the desired provider.

Q3: What happens if I don’t have an API key for OpenRouter?

A: Literal Storyboard includes bundled offline story beats and artwork. The game gracefully falls back to these static assets, ensuring full playability without network dependencies.

Q4: Is the board map editable or expandable?

A: The SVG board engine stores city coordinates in JSON, making it easy to add new locations or modify map geometry without rebuilding the core game logic.