A comprehensive development toolkit for creating a 2D pixel art adventure game inspired by 2001: A Space Odyssey. Features automated asset processing, scene management, and interactive demo creation.
This project provides a complete workflow for creating pixel art adventure games using:
- Pixellab AI for automated movie still processing
- Aseprite for pixel art refinement and export
- Phaser.js for interactive game development
- Cursor for live coding and iteration
# Install dependencies
npm install
# Start development server
npm run dev# Place movie stills in assets/source/movie_stills/
# Process and optimize images
# Place final assets in assets/final/scenes/# Start development server
npm run dev2001-phaser-html5/
โโโ assets/
โ โโโ source/ # Original movie stills
โ โ โโโ movie_stills/ # High-res movie images
โ โ โโโ reference/ # Reference materials
โ โโโ final/ # Phaser-ready assets
โ โโโ scenes/ # Optimized PNG files
โ โโโ ui/ # UI elements
โ โโโ audio/ # Sound effects
โโโ scripts/ # Automation scripts
โ โโโ process_assets.js # Pixellab AI integration
โ โโโ export_aseprite.js # Aseprite CLI automation
โ โโโ generate_scenes.js # Scene data generation
โโโ src/ # Game source code
โ โโโ scenes/ # Phaser scenes
โ โโโ data/ # Scene data and configuration
โ โโโ utils/ # Utility functions
โโโ docs/ # Documentation
โ โโโ asset_workflow.md # Complete workflow guide
โ โโโ scene_design.md # Design principles
โ โโโ demo_walkthrough.md # Demo documentation
- Collect movie stills โ
assets/source/movie_stills/ - Process and optimize โ
assets/final/scenes/
- Generate scene data โ
src/data/scenes.js - Create interactions โ
src/scenes/GameScene.js - Test and iterate โ Hot reload development
- Assemble key scenes โ Coherent narrative flow
- Add interactions โ Player choices and responses
- Polish and test โ Final demo version
- Still Shots: High-quality pixel art scenes from 2001
- Readable Text: Clear narrative and interaction text
- Hotspot Buttons: Interactive text options for player choices
- Scene Transitions: Smooth movement between locations
- Narrative Flow: Story-driven gameplay experience
- Pixel Art: Consistent 8-bit aesthetic
- Color Palette: Black, white, grays with accent colors
- Atmospheric Lighting: Dramatic and mood-setting
- Cinematic Composition: Movie-inspired framing
- Examine: "Look closely at the monolith"
- Interact: "Touch the mysterious object"
- Navigate: "Return to the spaceship"
- Ask: "Ask HAL about the mission"
- Use: "Check the ship's systems"
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build# Manual asset processing and optimization
# Place final assets in assets/final/scenes/- Collect high-quality stills from 2001: A Space Odyssey
- Save as PNG/JPG in
assets/source/movie_stills/ - Use descriptive names:
monolith_discovery.jpg
- Process and optimize images for web
- Maintain consistent visual style
- Optimize file sizes for performance
- Save final assets in
assets/final/scenes/
- Direct integration with game scenes
- Hot reload for instant testing
- Interactive text system
- Scene transition management
- Asset Workflow: Complete processing pipeline
- Scene Design: Design principles and guidelines
- API Reference: Script documentation and usage
- Walkthrough: Step-by-step demo guide
- Scene Descriptions: Detailed scene information
- Interaction Guide: Player choice explanations
# No special environment variables requiredEdit src/data/scenes.js to modify:
- Scene descriptions and narrative
- Player interaction options
- Scene transitions and flow
- Visual and audio settings
- Monolith Discovery - First encounter with the mysterious monolith
- Monolith Response - Touching the monolith triggers a reaction
- Spaceship Interior - Inside the Discovery One spaceship
- HAL Interface - Interacting with HAL 9000 computer
- Jupiter Approach - Journey to the gas giant
- Narrative Text: Story context and atmosphere
- Interactive Options: Meaningful player choices
- Visual Consistency: Unified pixel art style
- Smooth Transitions: Seamless scene changes
- Process 5-7 key scenes
- Create basic interactions
- Test visual consistency
- Document workflow
- Add complex interactions
- Implement scene transitions
- Add sound effects
- Polish presentation
- Expand scene library
- Add character animations
- Implement game mechanics
- Create full narrative
- Fork the repository
- Create feature branch
- Follow coding standards
- Test thoroughly
- Submit pull request
- Use consistent naming conventions
- Follow color palette guidelines
- Maintain visual consistency
- Document processing steps
This project is licensed under the MIT License - see the LICENSE file for details.
- Phaser.js - Game development framework
- Aseprite - Pixel art creation tool
- Pixellab AI - Automated pixel art processing
- 2001: A Space Odyssey - Source material and inspiration
Perfect for prototyping visual styles and game functionality before building the full game!