🎮 Kiro 2D Engine

A high-performance 2D game engine built with TypeScript, featuring advanced physics, particle systems, animations, LOD optimization, and object pooling.

✨ Features

🚀 Core Engine

• High-performance rendering with Canvas 2D API
• Entity-Component-System architecture
• Scene management with multiple scene types
• Input handling (keyboard, mouse)
• Camera system with follow, zoom, and shake effects

⚡ Performance Optimization

• Object Pooling - Reuse objects to prevent garbage collection
• LOD (Level of Detail) - Distance-based culling and update frequency
• Batch Processing - Efficient handling of multiple objects
• Smart Culling - Only render visible objects

🎯 Physics System

• Rigid Body Dynamics with mass, friction, and restitution
• Multiple Collision Shapes (Circle, Rectangle, Polygon)
• Advanced Collision Detection with SAT algorithm
• Force and Impulse application
• Gravity and Physics Constraints

🎨 Graphics & Animation

• Sprite System with textures and animations
• Frame-based Animations with configurable timing
• Color Animations for simple effects
• Texture Management with on-demand generation
• Tilemap Support with chunked loading

🎆 Particle System

• Configurable Emitters with position, velocity, acceleration
• Multiple Colors and size variance
• Automatic Lifecycle Management
• Performance Optimized with object pooling

🔊 Audio System

• Tone.js Integration with Web Audio API fallback
• Sound Effects and background music
• Volume Controls (master, music, SFX)
• Synthesized Audio for procedural sounds

🖼️ UI System

• Interactive Elements (buttons, text)
• Event Handling (hover, click, etc.)
• Hierarchical UI with parent-child relationships
• Customizable Styling

📦 Installation

npm install kiro-2d-engine

🚀 Quick Start

Basic Setup

import { Engine, Scene, Sprite, Texture } from 'kiro-2d-engine';

// Create engine
const engine = new Engine('gameCanvas', 800, 600);
const scene = new Scene();

// Create a sprite
const texture = Texture.fromColor(50, 50, '#ff0000');
const player = new Sprite(400, 300);
player.setTexture(texture);
scene.addSprite(player);

// Start the engine
engine.setScene(scene);
engine.start();

Advanced Setup with Optimization

import { Engine, OptimizedScene, Texture, Animation } from 'kiro-2d-engine';

// Create optimized engine
const engine = new Engine('gameCanvas', 800, 600);
const scene = new OptimizedScene(engine.camera);

// Create animated sprite with physics
const colors = ['#ff0000', '#ff4400', '#ff8800'];
const animation = Animation.fromColors(colors, 0.2, true);

const player = scene.createPooledSprite(400, 300);
player.animationController.addAnimation('idle', animation);
player.animationController.play('idle');

// Add physics
const body = scene.createPooledRigidBody({
  mass: 1,
  restitution: 0.5,
  friction: 0.3
});
player.setRigidBody(body);

// Add to LOD system
scene.addOptimizedSprite(player, 800);

engine.setScene(scene);
engine.start();

Particle Effects

import { ParticleEmitter, Vector2 } from 'kiro-2d-engine';

// Create explosion effect
const explosion = new ParticleEmitter({
  position: new Vector2(400, 300),
  rate: 200,
  particleLife: 2,
  velocity: new Vector2(0, -50),
  velocityVariance: new Vector2(100, 100),
  acceleration: new Vector2(0, 50),
  size: 6,
  colors: ['#ff4400', '#ff8800', '#ffaa00']
});

scene.addParticleEmitter(explosion);

🎮 Complete Game Example

Check out the included Wall Breaker demo in dist/index.html for a complete game implementation featuring:

• Physics-based movement
• Wall destruction mechanics
• Particle effects
• Audio feedback
• LOD optimization
• Object pooling

📚 API Documentation

Core Classes

• Engine - Main game engine
• Scene - Basic scene management
• OptimizedScene - Scene with LOD and pooling
• Sprite - Game objects with rendering
• RigidBody - Physics simulation
• Camera - Viewport management
• ParticleEmitter - Particle effects

Math Utilities

• Vector2 - 2D vector operations
• Rectangle - Rectangular bounds
• CollisionShape - Collision detection shapes

Performance Tools

• ObjectPool - Object reuse system
• LODManager - Level of detail optimization
• Tilemap - Efficient tile rendering

🔧 Configuration

LOD Settings

// Configure LOD levels
scene.lodManager.setLODLevels([
  { distance: 200, renderQuality: 'full', updateFrequency: 1 },
  { distance: 400, renderQuality: 'simplified', updateFrequency: 2 },
  { distance: 600, renderQuality: 'hidden', updateFrequency: 4 }
]);

Physics Settings

// Configure physics
scene.physics.gravity = new Vector2(0, 980);
scene.physics.iterations = 4;

🎯 Performance Tips

1. Use OptimizedScene for large worlds
2. Enable object pooling for frequently created/destroyed objects
3. Set appropriate cull distances for LOD system
4. Batch operations when creating many objects
5. Use simplified collision shapes when possible

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE file for details.

🔗 Links

• GitHub Repository
• Documentation
• Examples

Built with ❤️ by the Kiro Engine Team