🎮 PixelForge

AI-Powered Retro Game Creator - Describe your game idea, watch it come to life.

✨ What is PixelForge?

PixelForge is a web platform where you can talk to an AI agent and create retro pixel-based games through natural conversation. Think "Lovable for Gaming" - describe your game idea, and the AI generates playable code instantly.

Features

• 🤖 AI-Powered Generation - Describe your game in plain English
• 🕹️ Instant Preview - Play your game immediately in the browser
• 📝 Code Export - Download the generated JavaScript code
• 🎨 Retro Aesthetic - Beautiful cyberpunk UI with CRT effects
• ⚡ KAPLAY Engine - Modern successor to Kaboom.js

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Google Gemini API key

Installation

# Clone the repo
git clone https://github.com/yourusername/pixelforge.git
cd pixelforge

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local and add your GEMINI_API_KEY

# Run the development server
npm run dev

Environment Variables

Create a .env.local file:

GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here

Get your API key at: https://aistudio.google.com/app/apikey

🎮 How to Use

1. Open the app at http://localhost:3000
2. Describe your game in the chat (e.g., "Create a platformer where a cat collects fish")
3. Watch it generate - The AI creates the game code
4. Play instantly - Your game appears in the preview panel
5. Iterate - Ask the AI to modify or improve the game

Example Prompts

• "Make a space shooter where you dodge asteroids"
• "Create a snake game with neon colors"
• "Build a platformer with double jump"
• "Make a breakout clone with power-ups"

🏗️ Project Structure

pixelforge/
├── src/
│   ├── app/
│   │   ├── api/generate/    # AI generation endpoint
│   │   ├── layout.tsx       # Root layout
│   │   ├── page.tsx         # Main page
│   │   └── globals.css      # Global styles
│   ├── components/
│   │   ├── Header.tsx       # Navigation header
│   │   ├── ChatPanel.tsx    # AI chat interface
│   │   ├── GamePreview.tsx  # Game canvas
│   │   └── CodeEditor.tsx   # Code viewer
│   ├── store/
│   │   └── useStore.ts      # Zustand state management
│   ├── types/
│   │   └── index.ts         # TypeScript types
│   └── lib/                 # Utilities
├── public/
│   ├── sprites/             # Pixel art assets
│   └── sounds/              # Game sounds
└── ...

🎨 Asset Pipeline (Coming Soon)

PixelForge will integrate with Nano Banana for AI-generated pixel art assets:

• Character sprites
• Environment tilesets
• Animation frames
• Consistent art style across all assets

🛠️ Tech Stack

Technology	Purpose
Next.js 15	React framework with App Router
TypeScript	Type safety
Tailwind CSS	Styling
KAPLAY	2D game engine (Kaboom.js successor)
Zustand	State management
Google Gemini	AI game generation
Vercel AI SDK	AI integration

📝 Roadmap

• Basic chat interface
• AI game generation
• Live game preview
• Code export
• Nano Banana asset integration
• Game templates
• Save & share games
• Multiplayer support
• Custom sprite upload
• Sound effects generation

🤝 Contributing

Contributions welcome! Please read our contributing guidelines first.

📄 License

MIT License - see LICENSE for details.

---

Made with 💜 by the PixelForge team
_{Forge your dreams into pixels}