Slime Genesis - ECS RPG PoC

A complete proof of concept for Slime Genesis: The Awakening of the Entity built with TypeScript using an Entity Component System (ECS) architecture.

Quick Start

Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open your browser to the URL shown (usually http://localhost:5173)

Development

Format code:
```
npm run format
```
Check formatting:
```
npm run format:check
```
Lint code:
```
npm run lint
```
Fix linting issues:
```
npm run lint:fix
```
Build for production:
```
npm run build
```

Controls

WASD or Arrow Keys: Move your slime
Mouse: Aim/face direction
Left Click or Space: Attack
Shift: Toggle stealth mode
1-9: Activate skills (when you have them)

Features

Core Systems

✅ ECS Architecture: Entity Component System for flexible game design
✅ Real-time Combat: Fast-paced action combat with form-specific styles
✅ Evolution System: Three paths (Human, Beast, Slime) that change based on absorption
✅ Skill Absorption: Defeat creatures to gain their abilities
✅ Stealth System: Form-specific stealth mechanics (Social, Hunting, Structural)
✅ RPG Systems: Stats, leveling, XP, inventory, equipment
✅ AI System: Intelligent creature behaviors (wander, chase, combat, flee)
✅ Projectile System: Skills can create projectiles (Water Gun, etc.)
✅ Mutation System: Gain mutations like Hardened Shell, Electric Skin, Bioluminescence

Graphics & Polish

✅ Animated Slime: Smooth morphing blob with jiggle physics
✅ Combat Effects: Damage numbers, attack indicators, particle effects
✅ Absorption Visuals: Swirling particles and color transitions
✅ Stealth Indicators: Visibility meters and detection warnings
✅ Glow Effects: Bioluminescence mutation creates a pulsing glow effect
✅ Polished UI: Health bars, XP bars, skill hotbar, stat displays

Skills

Water Gun: Shoot a jet of water at enemies
Fire Breath: Breathe fire in a cone
Pounce: Leap forward and damage enemies
Stealth Mode: Enter stealth mode (form-specific)

Architecture

This game uses a pure ECS (Entity Component System) architecture:

Entities: Game objects (player, creatures, projectiles)
Components: Data containers (Position, Health, Stats, Evolution, etc.)
Systems: Logic processors (RenderSystem, CombatSystem, AbsorptionSystem, etc.)

This architecture makes it easy to:

Add new skills and abilities
Create mutations and combinations
Extend creature behaviors
Add new game mechanics

Project Structure

src/
├── core/                    # ECS framework and utilities
│   ├── Engine.ts            # Main game loop
│   ├── Entity.ts            # Entity manager
│   ├── Component.ts         # Base component
│   ├── System.ts            # Base system
│   ├── Constants.ts         # Enums and constants
│   ├── EventBus.ts          # Event system
│   ├── LevelLoader.ts       # Level loading
│   ├── Palette.ts           # Color palette
│   ├── PixelFont.ts         # Pixel font rendering
│   ├── SpriteLibrary.ts     # Sprite definitions
│   └── TileMap.ts           # Tile map system
├── components/              # All game components
│   ├── Position.ts          # Position and rotation
│   ├── Velocity.ts          # Movement velocity
│   ├── Health.ts            # Health and regeneration
│   ├── Sprite.ts            # Visual representation
│   ├── Stats.ts             # Attributes and leveling
│   ├── Combat.ts            # Combat stats and attacks
│   ├── Evolution.ts         # Evolution paths and mutations
│   ├── Skills.ts            # Skill management
│   ├── SkillProgress.ts     # Skill learning progress
│   ├── Absorbable.ts        # Absorption mechanics
│   ├── Stealth.ts           # Stealth state
│   ├── Intent.ts            # Action intent
│   ├── Inventory.ts         # Items and equipment
│   └── AI.ts                # AI behavior data
├── systems/                 # All game systems
│   ├── RenderSystem.ts      # Rendering
│   ├── InputSystem.ts       # Input handling
│   ├── PlayerControllerSystem.ts  # Player control
│   ├── MovementSystem.ts    # Movement physics
│   ├── CombatSystem.ts      # Combat logic
│   ├── AISystem.ts          # AI behavior
│   ├── AbsorptionSystem.ts  # Absorption mechanics
│   ├── StealthSystem.ts     # Stealth mechanics
│   ├── SkillSystem.ts       # Skill activation
│   ├── SkillEffectSystem.ts # Skill visual effects
│   ├── ProjectileSystem.ts  # Projectile physics
│   ├── DeathSystem.ts       # Death handling
│   ├── HealthRegenerationSystem.ts  # Health regen
│   ├── VFXSystem.ts         # Visual effects
│   ├── UISystem.ts          # UI rendering
│   └── MenuSystem.ts        # Menu management
├── skills/                  # Skill system
│   ├── Skill.ts             # Base skill class
│   ├── SkillRegistry.ts     # Skill registry
│   └── skills/              # Individual skills
│       ├── FireBreath.ts
│       ├── Pounce.ts
│       ├── StealthMode.ts
│       └── WaterGun.ts
├── items/                   # Item system
│   ├── Item.ts              # Base item class
│   └── ItemRegistry.ts      # Item registry
├── world/                   # World management
│   └── World.ts             # World setup
├── GameConfig.ts           # Game configuration
└── main.ts                 # Entry point

Gameplay Loop

Explore: Move around the cave, discover creatures
Fight: Engage in real-time combat with creatures
Absorb: Defeat creatures to gain evolution points and skills
Evolve: Your form changes based on what you absorb
Level Up: Gain XP, increase stats, unlock new possibilities
Stealth: Use form-specific stealth to avoid or ambush enemies
Mutate: Gain powerful mutations like Hardened Shell, Electric Skin, or Bioluminescence

Evolution Paths

Human Path: Absorb humanoids to gain human traits, access to social areas
Beast Path: Absorb beasts to become a predator, gain physical power
Slime Path: Maintain your original form, gain unique abilities

Mutations

Hardened Shell: Increased defense (requires high Constitution)
Electric Skin: Damage reflection (requires high Intelligence)
Bioluminescence: Glowing light source (requires high Human evolution)

Technical Details

TypeScript: Full type safety and modern JavaScript features
Vite: Fast development server and build tool
Canvas 2D: High-performance rendering with Canvas API
ESLint: Code linting with TypeScript support
Prettier: Code formatting
Husky: Pre-commit hooks (skips in CI environments)
Modular Design: Easy to extend and modify
ECS Pattern: Scalable architecture for complex game mechanics

Code Quality

TypeScript: Full type coverage, no any types
ESLint: Zero warnings policy
Prettier: Consistent code formatting
Pre-commit Hooks: Automatic formatting and linting before commits

Future Enhancements

More skills and mutations
Multiple areas/zones
NPCs with dialogue
Quest system
Equipment system expansion
Save/load functionality
More creature types and behaviors

License

This is a proof of concept. Use as you see fit for your game development.

7.8 KiB Raw Permalink Blame History