Feature/Pixel-Rework #4

Merged

jusemon merged 3 commits from Feature/Pixel-Rework into main

2026-01-06 17:28:25 -05:00

jusemon commented

2026-01-06 17:27:56 -05:00

Owner

Pull Request: Aesthetics Overhaul, Animation System, and UI Reshuffle

Summary

This PR significantly upgrades the game's visual presentation and user experience. It introduces a multi-frame pixel animation system, a completely redesigned minimalist HUD, and a comprehensive menu system (Start, Pause, Game Over) that leverages a custom pixel font and a unified 7-color palette. Additionally, character behavior and rendering have been refined for a more authentic retro feel.

Key Changes

Visuals and Animation System

Multi-Frame Spritesheets: Introduced SpriteLibrary support for multiple animation frames (Idle and Walk) for all entity types (Slime, Humanoid, Beast, Elemental).
Procedural Slime Physics: Implemented a squash-and-stretch effect for the player and slime enemies to convey liquid movement.
Horizontal Flipping: Characters now flip horizontally based on movement direction instead of rotating the entire square, maintaining pixel alignment.
Sprite Corrections: Redesigned the Slime entity to be bottom-heavy, fixing the "upside-down" appearance and adding centered eye highlights.
Animation State Logic: Entities now automatically transition between idle and walk states based on velocity.

Minimalist HUD: Streamlined the in-game UI to show only essential combat info (Health, Current Form, Skills), reducing screen clutter.
Advanced Pause Menu: Moved granular information (detailed Statistics, DNA Evolution Points, and Skill Learning Knowledge) to the Pause screen for a cleaner gameplay experience.
Game Over System: Added a "YOU PERISHED" screen with a themed restart loop (Press ENTER to Reborn).
Pixel-Perfect Typography: All UI elements now use a custom 5x7 matrix-based pixel font to ensure perfect legibility at the 320x240 internal resolution.

Core Systems and Stability

Refined RenderSystem: Rebuilt the grid-rendering loop to handle multi-frame animations with robust safety fallbacks and shape-based lookup.
Death Logic Improvements:
- Dead entities now freeze their animation frame immediately.
- AI and Movement systems now skip dead entities to prevent "ghost sliding."
Resolution Sync: Tuned projectile speeds, detection radii, and UI positions to perfectly fit the low-res 4:3 canvas.
Bug Fixes: Resolved a crash in the renderer caused by undefined grid lookups and fixed various linting errors (unused variables).

Technical and CSS

Aspect Ratio Locking: Updated index.html with modern CSS (aspect-ratio: 4 / 3) to ensure the canvas scales correctly on all monitor sizes without stretching.
Sharp Scaling: Enforced image-rendering: pixelated and disabled browser smoothing across the engine.

Visual Comparison

Before: Static squares, cluttered HUD, generic system fonts, no game over state.
After: Animated bouncers, clean HUD, detailed status screen on pause, cohesive pixel art palette and font.

# Pull Request: Aesthetics Overhaul, Animation System, and UI Reshuffle ## Summary This PR significantly upgrades the game's visual presentation and user experience. It introduces a multi-frame pixel animation system, a completely redesigned minimalist HUD, and a comprehensive menu system (Start, Pause, Game Over) that leverages a custom pixel font and a unified 7-color palette. Additionally, character behavior and rendering have been refined for a more authentic retro feel. ## Key Changes ### Visuals and Animation System * Multi-Frame Spritesheets: Introduced SpriteLibrary support for multiple animation frames (Idle and Walk) for all entity types (Slime, Humanoid, Beast, Elemental). * Procedural Slime Physics: Implemented a squash-and-stretch effect for the player and slime enemies to convey liquid movement. * Horizontal Flipping: Characters now flip horizontally based on movement direction instead of rotating the entire square, maintaining pixel alignment. * Sprite Corrections: Redesigned the Slime entity to be bottom-heavy, fixing the "upside-down" appearance and adding centered eye highlights. * Animation State Logic: Entities now automatically transition between idle and walk states based on velocity. ### UI/UX and Menu Overhaul * Minimalist HUD: Streamlined the in-game UI to show only essential combat info (Health, Current Form, Skills), reducing screen clutter. * Advanced Pause Menu: Moved granular information (detailed Statistics, DNA Evolution Points, and Skill Learning Knowledge) to the Pause screen for a cleaner gameplay experience. * Game Over System: Added a "YOU PERISHED" screen with a themed restart loop (Press ENTER to Reborn). * Pixel-Perfect Typography: All UI elements now use a custom 5x7 matrix-based pixel font to ensure perfect legibility at the 320x240 internal resolution. ### Core Systems and Stability * Refined RenderSystem: Rebuilt the grid-rendering loop to handle multi-frame animations with robust safety fallbacks and shape-based lookup. * Death Logic Improvements: * Dead entities now freeze their animation frame immediately. * AI and Movement systems now skip dead entities to prevent "ghost sliding." * Resolution Sync: Tuned projectile speeds, detection radii, and UI positions to perfectly fit the low-res 4:3 canvas. * Bug Fixes: Resolved a crash in the renderer caused by undefined grid lookups and fixed various linting errors (unused variables). ### Technical and CSS * Aspect Ratio Locking: Updated index.html with modern CSS (aspect-ratio: 4 / 3) to ensure the canvas scales correctly on all monitor sizes without stretching. * Sharp Scaling: Enforced image-rendering: pixelated and disabled browser smoothing across the engine. ## Visual Comparison - Before: Static squares, cluttered HUD, generic system fonts, no game over state. - After: Animated bouncers, clean HUD, detailed status screen on pause, cohesive pixel art palette and font.

jusemon added 3 commits 2026-01-06 17:27:56 -05:00