Skip to content

HEALTH_BAR_UI.md

Latest commit

 

History

History
169 lines (130 loc) · 5.17 KB

HEALTH_BAR_UI.md

File metadata and controls

169 lines (130 loc) · 5.17 KB

Health Bar UI Implementation

The health bar frame has been added to the top of the game screen with a dynamic health meter.

What Was Added

Health Bar Frame

  • Location: assets/images/ui/health-bar-frame.png
  • Position: Stretched across the entire top of the screen (800px wide)
  • Automatically scales to fit screen width
  • Drawn on top of all game elements (UI layer)

Health Meter

  • Position: Center of the health bar frame
  • Width: 300 pixels maximum
  • Height: 20 pixels
  • Color changes based on health:
    • Green: Health > 60% (more than 1.8 lives)
    • Yellow: Health 30-60% (0.9 to 1.8 lives)
    • Red: Health < 30% (less than 0.9 lives)
  • Fills/drains dynamically as player takes damage

Configuration Settings

All adjustable values are in the "UI LAYER - HEALTH BAR AND HUD" section of main.lua.

Frame Position & Scale

local frameY = 0                    -- Y position (0 = top of screen)
local frameX = 0                    -- X position (0 = left edge)
local frameScaleX = 800 / frameOriginalWidth   -- Scale to screen width
local frameScaleY = 1.0                        -- Keep original height

Health Meter Position & Size

local healthMeterX = 250            -- X position (left edge of meter)
local healthMeterY = 15             -- Y position (from top)
local healthMeterWidth = 300        -- Maximum width when full health
local healthMeterHeight = 20        -- Height/thickness of bar

Adjustment Guide

Moving the Frame

  • frameY: Change to move up (negative) or down (positive)

    • Example: frameY = 10 moves frame 10 pixels down
    • Example: frameY = -5 moves frame 5 pixels up

  • frameX: Change to move left (negative) or right (positive)

    • Example: frameX = 20 moves frame 20 pixels right
    • Example: frameX = -10 moves frame 10 pixels left

Resizing the Frame

  • frameScaleX: Adjust width scaling

    • Current: 800 / frameOriginalWidth (fits screen width exactly)
    • Example: 900 / frameOriginalWidth (wider, may go off screen)
    • Example: 700 / frameOriginalWidth (narrower)

  • frameScaleY: Adjust height scaling

    • Current: 1.0 (original height)
    • Example: 1.5 (50% taller)
    • Example: 0.75 (25% shorter)

Positioning the Health Meter

  • healthMeterX: Horizontal position of meter

    • Current: 250 (centered-ish)
    • Increase to move right, decrease to move left
    • Align with your frame design

  • healthMeterY: Vertical position of meter

    • Current: 15 (15 pixels from top)
    • Increase to move down, decrease to move up
    • Align with frame's design

Sizing the Health Meter

  • healthMeterWidth: Total width of health bar

    • Current: 300 pixels
    • Increase for wider bar, decrease for narrower

  • healthMeterHeight: Thickness of health bar

    • Current: 20 pixels
    • Increase for thicker bar, decrease for thinner

Color Customization

Health meter colors can be adjusted in the code:

-- Healthy (green)
if healthPercent > 0.6 then
    love.graphics.setColor(0.2, 0.8, 0.2, 1)

-- Warning (yellow)
elseif healthPercent > 0.3 then
    love.graphics.setColor(0.9, 0.9, 0.2, 1)

-- Critical (red)
else
    love.graphics.setColor(0.9, 0.2, 0.2, 1)
end

Values are RGB (red, green, blue, alpha) from 0.0 to 1.0.

Features

  1. Dynamic Color: Changes based on health percentage
  2. Smooth Scaling: Meter fills/drains as player gains/loses lives
  3. Background Layer: Dark background shows empty portion
  4. Border: White outline for clarity
  5. Screen-wide Frame: Stretches across entire top
  6. Layering: Drawn on top of all game elements

Common Adjustments

Center the health meter exactly

local healthMeterX = (800 - healthMeterWidth) / 2  -- Centers in 800px screen

Make frame smaller (not full width)

local frameScaleX = 600 / frameOriginalWidth  -- Only 600px wide
local frameX = (800 - 600) / 2                -- Center it

Move meter to align with frame's center indent

  1. Look at your health-bar-frame.png design
  2. Estimate where the center section is
  3. Adjust healthMeterX and healthMeterY accordingly

Change health thresholds

if healthPercent > 0.75 then        -- Green above 75%
elseif healthPercent > 0.25 then    -- Yellow between 25-75%
else                                 -- Red below 25%

Code Location

File: main.lua

Section: "UI LAYER - HEALTH BAR AND HUD"

Look for the detailed comments starting with:

-- =======================================================================
-- UI LAYER - HEALTH BAR AND HUD
-- =======================================================================

All configuration values are in this section with extensive comments explaining each parameter.

Testing

  1. Run the game: love . or ./start.sh
  2. Health bar frame appears at top
  3. Health meter shows current health (starts at 100% - green)
  4. Take damage to see meter drain and color change
  5. Adjust values in code to fine-tune positioning

Notes

  • Frame stretches to full screen width by default
  • Health meter positioned for typical centered design
  • All values are easily adjustable with clear comments
  • No border radius on rectangles (sharp edges)
  • Color coding helps player see health status quickly