Pixi.js 2D Game Scaffolding

A complete scaffolding for building 2D games with Pixi.js, TypeScript, and Webpack.

• Pixi.js 7.4: Latest version with modern rendering
• TypeScript: Full type safety and better development experience
• Webpack: Modern bundling with hot reload
• Game Architecture: Clean separation of concerns with managers and entities
• Input System: Keyboard and mouse input handling
• Audio System: Sound effects and music management
• Scene Management: Menu, game, pause, and game over scenes
• Entity System: Player, enemies, and projectiles
• Collision Detection: Basic AABB collision system
• Performance Monitoring: FPS and object count display

├── src/
│   ├── main.ts                 # Application entry point
│   ├── index.html              # Main HTML file
│   ├── game/
│   │   └── Game.ts            # Main game logic
│   ├── managers/
│   │   ├── InputManager.ts    # Input handling
│   │   ├── AudioManager.ts    # Audio system
│   │   └── SceneManager.ts    # Scene management
│   ├── entities/
│   │   ├── Player.ts          # Player entity
│   │   ├── Enemy.ts           # Enemy entity
│   │   └── Projectile.ts      # Projectile entity
│   └── assets/                # Game assets
├── dist/                      # Build output
├── package.json               # Dependencies and scripts
├── webpack.config.js          # Webpack configuration
└── tsconfig.json             # TypeScript configuration

• Node.js (version 14 or higher)
• npm or yarn

1. Install dependencies:

npm install

2. Start development server:

npm run dev

3. Open your browser and navigate to http://localhost:8080

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm start - Start development server and open browser

• WASD - Move player
• SPACE - Shoot
• ESC - Pause game
• R - Restart (when game over)

• Player Movement: Smooth WASD controls with boundary checking
• Enemy Spawning: Enemies spawn from the top and move downward
• Shooting System: Press space to shoot projectiles
• Collision Detection: Player-enemy and projectile-enemy collisions
• Scoring System: Score increases when hitting enemies
• Game Over: Collision with enemy ends the game
• Restart: Press R to restart after game over

• Manager Pattern: Separate managers for input, audio, and scenes
• Entity System: Clean separation of game objects
• Scene Management: Easy switching between different game states
• Performance Monitoring: Real-time FPS and object count
• Responsive Design: Game adapts to different screen sizes

1. Create a new entity class in src/entities/
2. Extend the base entity pattern
3. Add to the game logic in src/game/Game.ts

1. Add scene type to SceneType enum in SceneManager.ts
2. Create scene container in SceneManager.ts
3. Add scene switching logic

1. Place assets in src/assets/
2. Use Assets.load() to load them in your code
3. Assets are automatically copied to dist/assets/ during build

• Game Loop: Modify Game.update() method
• Input: Add new keys to InputManager
• Audio: Use AudioManager for sound effects
• Scenes: Use SceneManager for UI transitions

• All game objects are fully typed
• Use interfaces for complex data structures
• Leverage TypeScript's strict mode for better code quality

• Monitor FPS display in the top-left corner
• Keep object count reasonable
• Use object pooling for frequently created/destroyed objects

• Check browser console for errors
• Use browser dev tools for performance profiling
• Monitor the FPS and object count displays

npm run build

This creates an optimized build in the dist/ directory ready for deployment.

• Modern browsers with ES2020 support
• WebGL-enabled browsers for Pixi.js rendering
• Audio API support for sound effects

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

MIT License - feel free to use this scaffolding for your own projects!

Consider adding:

• Particle Systems: For explosions and effects
• Power-ups: Collectible items for the player
• Multiple Enemy Types: Different behaviors and appearances
• Level System: Progressive difficulty
• Save System: Local storage for high scores
• Mobile Support: Touch controls and responsive design
• Multiplayer: WebSocket-based multiplayer
• Advanced Graphics: Shaders, filters, and effects