Feature/Camera and Large Map #7

Merged

jusemon merged 2 commits from Feature/Camera-and-Large-Map into main

2026-01-07 01:29:10 -05:00

jusemon commented

2026-01-07 01:28:45 -05:00

Owner

Camera System and Large Map Implementation

Overview

This PR implements a comprehensive camera system with smooth player tracking and expands the game world from a small arena to a large explorable map. Additionally, it enhances the stealth system with form-specific mechanics and fixes several rendering and gameplay issues.

Major Features

Camera System

Camera Component: New component for viewport management with smooth following, bounds checking, and viewport configuration
CameraSystem: System that smoothly follows the player using interpolation, with configurable smoothness
Camera-Aware Rendering: All rendering now uses camera transforms to convert world coordinates to screen coordinates
Viewport Culling: Map tiles and entities are culled based on camera viewport for improved performance

Large Map System

Designed Level Generator: New loadDesignedLevel() function that generates a 200x150 tile map (3200x2400 pixels)
Room-Based Layout: Procedurally generates rooms connected by corridors with strategic obstacles
Map Bounds: All systems now use map bounds instead of canvas bounds for proper boundary checking

Enhanced Stealth System

Form-Specific Stealth: Different stealth mechanics based on player form (slime, human, beast)
- Slime Form: Color matching to background, size reduction (0.6x), lower visibility when stationary
- Human Form: Visual transformation to humanoid appearance, moderate visibility reduction
- Beast Form: Visual transformation to beast appearance, visibility based on movement speed
ColorSampler Utility: New utility for sampling dominant colors from the tile map for slime camouflage
Dynamic Visual Effects: Stealth now affects sprite appearance, scale, and color in real-time

Technical Changes

New Files

src/components/Camera.ts: Camera component for viewport management
src/systems/CameraSystem.ts: System for camera movement and player tracking
src/core/ColorSampler.ts: Utility for sampling background colors for stealth camouflage

Modified Files

src/core/LevelLoader.ts: Added loadDesignedLevel() for large map generation
src/core/Constants.ts: Added CAMERA to ComponentType and SystemName enums
src/core/Engine.ts: Updated to use new large map generator
src/components/Stealth.ts: Enhanced with camouflage color, size multiplier, and form appearance properties
src/systems/StealthSystem.ts: Implemented form-specific stealth logic with color sampling
src/systems/RenderSystem.ts:
- Added camera transform support for all rendering
- Implemented viewport culling for map tiles
- Updated stealth visual effects rendering
- Fixed pounce skill effect rendering with camera transforms
src/systems/InputSystem.ts: Updated mouse position to convert screen coordinates to world coordinates using camera
src/systems/MovementSystem.ts: Updated boundary checks to use map bounds instead of canvas bounds
src/systems/ProjectileSystem.ts: Fixed boundary checks to use map bounds for proper projectile lifetime
src/main.ts:
- Updated player and camera initialization to use map center
- Changed enemy spawning to spawn near player instead of randomly across map
- Updated camera bounds based on map size
eslint.config.js: Added eslint-config-prettier to resolve formatting conflicts

Bug Fixes

Fixed cursor/mouse position calculation to account for camera offset
Fixed movement barriers by using map bounds instead of canvas bounds
Fixed projectile visibility by using map bounds for boundary checks
Fixed pounce skill effect line rendering with proper camera transforms
Fixed enemy spawning to occur near player instead of map center
Fixed duplicate variable declarations in MovementSystem and RenderSystem

Performance Improvements

Viewport culling for map tiles (only renders visible tiles)
Cached color sampling for stealth system
Optimized camera transform calculations

Configuration

Updated ESLint to use eslint-config-prettier for better Prettier compatibility
Removed conflicting indent rules that interfered with Prettier formatting

Testing Notes

Camera smoothly follows player movement
Map is fully explorable with proper boundaries
Stealth mechanics work correctly for all three forms
Projectiles are visible and travel correctly
Enemy spawning occurs near player
All rendering transforms correctly with camera

# Camera System and Large Map Implementation ## Overview This PR implements a comprehensive camera system with smooth player tracking and expands the game world from a small arena to a large explorable map. Additionally, it enhances the stealth system with form-specific mechanics and fixes several rendering and gameplay issues. ## Major Features ### Camera System - **Camera Component**: New component for viewport management with smooth following, bounds checking, and viewport configuration - **CameraSystem**: System that smoothly follows the player using interpolation, with configurable smoothness - **Camera-Aware Rendering**: All rendering now uses camera transforms to convert world coordinates to screen coordinates - **Viewport Culling**: Map tiles and entities are culled based on camera viewport for improved performance ### Large Map System - **Designed Level Generator**: New `loadDesignedLevel()` function that generates a 200x150 tile map (3200x2400 pixels) - **Room-Based Layout**: Procedurally generates rooms connected by corridors with strategic obstacles - **Map Bounds**: All systems now use map bounds instead of canvas bounds for proper boundary checking ### Enhanced Stealth System - **Form-Specific Stealth**: Different stealth mechanics based on player form (slime, human, beast) - **Slime Form**: Color matching to background, size reduction (0.6x), lower visibility when stationary - **Human Form**: Visual transformation to humanoid appearance, moderate visibility reduction - **Beast Form**: Visual transformation to beast appearance, visibility based on movement speed - **ColorSampler Utility**: New utility for sampling dominant colors from the tile map for slime camouflage - **Dynamic Visual Effects**: Stealth now affects sprite appearance, scale, and color in real-time ## Technical Changes ### New Files - `src/components/Camera.ts`: Camera component for viewport management - `src/systems/CameraSystem.ts`: System for camera movement and player tracking - `src/core/ColorSampler.ts`: Utility for sampling background colors for stealth camouflage ### Modified Files - `src/core/LevelLoader.ts`: Added `loadDesignedLevel()` for large map generation - `src/core/Constants.ts`: Added `CAMERA` to ComponentType and SystemName enums - `src/core/Engine.ts`: Updated to use new large map generator - `src/components/Stealth.ts`: Enhanced with camouflage color, size multiplier, and form appearance properties - `src/systems/StealthSystem.ts`: Implemented form-specific stealth logic with color sampling - `src/systems/RenderSystem.ts`: - Added camera transform support for all rendering - Implemented viewport culling for map tiles - Updated stealth visual effects rendering - Fixed pounce skill effect rendering with camera transforms - `src/systems/InputSystem.ts`: Updated mouse position to convert screen coordinates to world coordinates using camera - `src/systems/MovementSystem.ts`: Updated boundary checks to use map bounds instead of canvas bounds - `src/systems/ProjectileSystem.ts`: Fixed boundary checks to use map bounds for proper projectile lifetime - `src/main.ts`: - Updated player and camera initialization to use map center - Changed enemy spawning to spawn near player instead of randomly across map - Updated camera bounds based on map size - `eslint.config.js`: Added eslint-config-prettier to resolve formatting conflicts ## Bug Fixes - Fixed cursor/mouse position calculation to account for camera offset - Fixed movement barriers by using map bounds instead of canvas bounds - Fixed projectile visibility by using map bounds for boundary checks - Fixed pounce skill effect line rendering with proper camera transforms - Fixed enemy spawning to occur near player instead of map center - Fixed duplicate variable declarations in MovementSystem and RenderSystem ## Performance Improvements - Viewport culling for map tiles (only renders visible tiles) - Cached color sampling for stealth system - Optimized camera transform calculations ## Configuration - Updated ESLint to use eslint-config-prettier for better Prettier compatibility - Removed conflicting indent rules that interfered with Prettier formatting ## Testing Notes - Camera smoothly follows player movement - Map is fully explorable with proper boundaries - Stealth mechanics work correctly for all three forms - Projectiles are visible and travel correctly - Enemy spawning occurs near player - All rendering transforms correctly with camera

jusemon added 2 commits 2026-01-07 01:28:46 -05:00