Project Canvas

GameVizr - Visual Game Design Platform

🎮 About the Project

GameVizr is a visual game design platform that helps game developers turn rough ideas into structured game designs using an intuitive block-based interface powered by AI.

Instead of writing lengthy design documents, users build their game by connecting visual blocks like Character Design, Level Design, Story Block, and Text Prompt. Each block can be configured with simple parameters, and the system uses AI to generate coherent game design elements.

💡 What Inspired Us

The inspiration came from observing how game designers struggle with:

Documentation Overhead: Writing and maintaining long design documents that quickly become outdated
Fragmented Workflow: Juggling spreadsheets, documents, and sketches across different tools
Difficulty Visualizing Connections: Understanding how different game elements (characters, levels, story) relate to each other

We wanted to create a visual-first approach where designers can see and manipulate their entire game structure on a canvas.

🛠️ How We Built It

Technology Stack

Frontend: Next.js 14 with App Router
Styling: Tailwind CSS for responsive design
Canvas: React Flow for the node-based visual editor
AI: Gemini-3 API for content generation
State Management: React Flow's built-in hooks (useNodesState, useEdgesState) and local component state

Key Features

Visual Canvas: Drag-and-drop interface where users create and connect design blocks
Block Types: Character Design (purple), Level Design (blue), Story Block (green), and Text Prompt (orange)
AI Generation: Each block uses Gemini-3 API to generate contextually relevant content
Connection Flow: Visual connections show relationships between different design elements

📚 What We Learned

Technical Learnings

React Flow Mastery: Working with custom nodes, connection validation, and maintaining canvas state taught us advanced React patterns. We learned how to effectively use useNodesState and useEdgesState for managing complex graph structures.
AI Integration: We learned how to structure prompts for Gemini-3 to get consistent, game-design-focused outputs rather than generic responses
State Synchronization: Managing the state of multiple interconnected nodes with real-time updates required careful planning of data flow between parent and child components

Design Learnings

Visual Clarity: Color-coding blocks by type (character=purple, level=blue, story=green) significantly improved user understanding
Immediate Feedback: Users needed instant visual confirmation when connecting or configuring blocks

🚧 Challenges We Faced

Challenge 1: Node Connection Logic

Problem: Determining which blocks could connect to which other blocks without creating circular dependencies.

Solution: Implemented connection validation rules where each block type has defined input/output ports, preventing invalid connections.

Challenge 2: Canvas Performance

Problem: The canvas became laggy with many nodes and connections.

Solution:

Used React.memo for custom node components
Implemented debouncing for auto-save features
Optimized re-render triggers

Challenge 3: Prompt Engineering for Gemini

Problem: Generic prompts to Gemini-3 produced inconsistent results that didn't fit game design contexts.

Solution: Developed specialized prompt templates for each block type:

Character Design → "As a game designer, create a character with [parameters]..."
Level Design → "Design a game level that considers [character abilities, difficulty]..."

Challenge 4: User Experience

Problem: First-time users didn't understand how to start or connect blocks.

Solution:

Added prominent action buttons at the top
Implemented visual cues for connection points
Created intuitive modal dialogs for block configuration

🎯 Current Status

This demo showcases the core visual design interface and AI-powered block system. Users can:

✅ Create and arrange design blocks on a canvas
✅ Configure block parameters through modals
✅ Connect blocks to show design relationships
✅ Generate AI-powered content using Gemini-3

🚀 Future Vision

While this demo focuses on the visual interface, the full vision for GameVizr includes:

Multi-Agent System: Where specialized AI agents collaborate (Character Agent considers Level Agent's output, etc.)
Export Capabilities: Generate actual game assets and code
Real-time Collaboration: Multiple designers working simultaneously
Template Library: Pre-built block configurations for common game genres

Built with ❤️ by developers who believe game design should be visual, intuitive, and fun.