Health bars

world-space bars over enemies, floating damage numbers and a fixed HUD.

▶ Run in browser

Tags: ui hud camera tween signals

Games show health in two places, and they live in two different spaces.

Over each enemy, in the world. An Enemy draws its own bar in on_draw, just above its body. Everything a Node2D draws is in world space, so the bar follows the enemy and scrolls with the Camera2D like the rest of the world. The bar is three rectangles: a dark track, a fill hp / max_hp wide and an outline. Its colour goes green, amber, then red as health falls.

On the screen, for the player. The portrait, the health bar and the kill count are Controls inside a CanvasLayer. A CanvasLayer skips the camera entirely, so they stay glued to their corners while the world pans underneath. Without it a Control parented to a Node2D renders through the world camera and scrolls away. Each one is placed in a single call with anchor= and inset=, and tracks its corner when the window is resized. The bar is a ProgressBar whose fill_colour follows the same colour bands, and the portrait is a small Control that draws a face in the colour of the player’s health.

A few techniques make the feedback read well:

• Floating damage numbers. Each hit adds a DamageNumber node that runs a coroutine (start_coroutine): every frame it rises and fades a little, and when its time is up it calls destroy().

• A smooth drain. When the player is hurt, tween() eases the HUD bar’s value down to the new health over 0.4 seconds rather than snapping it, so the loss is visible. A new hit cancels the running tween with stop_coroutine and starts another; between hits the bar tracks the slow regeneration directly.

• Clean removal through a signal. An enemy at zero health calls destroy() and then emits its died signal, so tree.group("enemies") already leaves it out when the handler runs. The root counts the kill from that signal and, once the group is empty, waits 1.5 seconds with wait() and spawns a fresh wave.

• Picking through the camera. A click or tap maps the pointer into the world with camera.screen_to_world() and hits the enemy under it. Camera2D.shake() jolts the view when the player takes contact damage.

Move with WASD, the arrow keys or a gamepad stick. Click or tap an enemy to hit it, or press SPACE (or the A button) to swing at the nearest enemy in range. Touching an enemy hurts the player, at most once a second. A TouchController puts a stick and an A button on screen for a finger, so the HUD keeps to the top edge, clear of them.

Source

# /// simvx
# tags = ["ui", "hud", "camera", "tween", "signals"]
# web = { width = 960, height = 540, responsive = true }
# ///
"""Health bars: world-space bars over enemies, floating damage numbers and a fixed HUD.

Games show health in two places, and they live in two different spaces.

**Over each enemy, in the world.** An `Enemy` draws its own bar in `on_draw`, just above its
body. Everything a `Node2D` draws is in world space, so the bar follows the enemy and scrolls
with the `Camera2D` like the rest of the world. The bar is three rectangles: a dark track, a fill
`hp / max_hp` wide and an outline. Its colour goes green, amber, then red as health falls.

**On the screen, for the player.** The portrait, the health bar and the kill count are
`Control`s inside a `CanvasLayer`. A `CanvasLayer` skips the camera entirely, so they stay glued
to their corners while the world pans underneath. Without it a `Control` parented to a `Node2D`
renders through the world camera and scrolls away. Each one is placed in a single call with
`anchor=` and `inset=`, and tracks its corner when the window is resized. The bar is a
`ProgressBar` whose `fill_colour` follows the same colour bands, and the portrait is a small
`Control` that draws a face in the colour of the player's health.

A few techniques make the feedback read well:

- **Floating damage numbers.** Each hit adds a `DamageNumber` node that runs a coroutine
  (`start_coroutine`): every frame it rises and fades a little, and when its time is up it calls
  `destroy()`.
- **A smooth drain.** When the player is hurt, `tween()` eases the HUD bar's `value` down to the
  new health over 0.4 seconds rather than snapping it, so the loss is visible. A new hit cancels
  the running tween with `stop_coroutine` and starts another; between hits the bar tracks the
  slow regeneration directly.
- **Clean removal through a signal.** An enemy at zero health calls `destroy()` and then emits
  its `died` signal, so `tree.group("enemies")` already leaves it out when the handler runs. The
  root counts the kill from that signal and, once the group is empty, waits 1.5 seconds with
  `wait()` and spawns a fresh wave.
- **Picking through the camera.** A click or tap maps the pointer into the world with
  `camera.screen_to_world()` and hits the enemy under it. `Camera2D.shake()` jolts the view when
  the player takes contact damage.

Move with WASD, the arrow keys or a gamepad stick. Click or tap an enemy to hit it, or press SPACE
(or the A button) to swing at the nearest enemy in range. Touching an enemy hurts the player, at
most once a second. A `TouchController` puts a stick and an A button on screen for a finger, so
the HUD keeps to the top edge, clear of them.
"""

import math
import random

from simvx.core import (
    Anchor,
    Axis2D,
    Camera2D,
    CanvasLayer,
    Control,
    Controller,
    Input,
    Key,
    Label,
    Node2D,
    Pointer,
    ProgressBar,
    Property,
    Signal,
    TouchController,
    Vec2,
    easing,
    tween,
    wait,
)
from simvx.graphics import App

WORLD = 900  # the walkable world spans -WORLD..WORLD on both axes
PLAYER_SPEED = 300.0
PLAYER_RADIUS = 14.0
PLAYER_MAX_HP = 100.0
PLAYER_REGEN = 4.0  # hp per second
CONTACT_DAMAGE = 10
MELEE_RANGE = 150.0
WAVE_SIZE = 5
ENEMY_KINDS = [(40, (0.55, 0.78, 0.42, 1.0)), (60, (0.72, 0.55, 0.90, 1.0)), (80, (0.88, 0.47, 0.36, 1.0))]
DARK = (0.08, 0.08, 0.11, 1.0)


def health_colour(fraction: float) -> tuple[float, float, float, float]:
    """Green when healthy, amber when hurt, red when critical."""
    if fraction > 0.6:
        return (0.26, 0.77, 0.39, 1.0)
    if fraction > 0.3:
        return (0.96, 0.64, 0.38, 1.0)
    return (0.90, 0.22, 0.27, 1.0)


class DamageNumber(Node2D):
    """A number that rises, fades out and removes itself."""

    dynamic = True
    LIFETIME = 0.9  # seconds
    RISE = 46.0  # world units

    def __init__(self, amount: int, colour, scale: float = 1.4, **kwargs):
        super().__init__(**kwargs)
        self.text, self.colour, self.scale_factor = str(amount), colour, scale
        self.alpha = 1.0

    def on_ready(self):
        self.start_coroutine(self.float_away())

    def float_away(self):
        start_y, elapsed = self.position.y, 0.0
        while elapsed < self.LIFETIME:
            elapsed += yield  # the coroutine is sent each frame's dt
            t = min(elapsed / self.LIFETIME, 1.0)
            self.position = (self.position.x, start_y - self.RISE * easing.ease_out_cubic(t))
            self.alpha = (1.0 - t) ** 1.5
        self.destroy()

    def on_draw(self, renderer):
        fill = (*self.colour, self.alpha)
        renderer.text(self.text, (0, 0), fill=fill, scale=self.scale_factor, align="centre", stroke_width=0.08)


class Enemy(Node2D):
    """A wandering enemy with hit points and a health bar drawn in world space."""

    dynamic = True
    died = Signal()

    def __init__(self, home: Vec2, max_hp: int, colour, **kwargs):
        super().__init__(position=home, **kwargs)
        self.home, self.max_hp, self.hp, self.colour = Vec2(home), max_hp, max_hp, colour
        self.radius = 14.0 + max_hp * 0.1
        self.clock = random.uniform(0.0, 10.0)
        self.pace = random.uniform(0.8, 1.4)
        self.flash = 0.0  # seconds of white hit flash left
        self.add_to_group("enemies")

    def on_update(self, dt):
        self.clock += dt
        phase = self.clock * self.pace
        self.position = self.home + Vec2(math.sin(phase) * 14.0, math.sin(phase * 0.7 + 1.7) * 9.0)
        self.flash = max(0.0, self.flash - dt)

    def take_damage(self, amount: int):
        self.hp = max(0, self.hp - amount)
        self.flash = 0.12
        killed = self.hp == 0
        self.parent.add_child(
            DamageNumber(
                amount,
                (1.0, 0.36, 0.30) if killed else (1.0, 0.85, 0.40),
                scale=1.9 if killed else 1.4,
                position=self.position + Vec2(random.uniform(-8, 8), -self.radius - 22),
            )
        )
        if killed:
            self.destroy()  # first, so the died handler no longer counts it in tree.group("enemies")
            self.died.emit()

    def on_draw(self, renderer):
        renderer.circle((0, 0), self.radius, fill=(1.0, 1.0, 1.0, 1.0) if self.flash > 0 else self.colour)
        renderer.circle((0, 0), self.radius, stroke=(0.10, 0.10, 0.14, 1.0))

        fraction = self.hp / self.max_hp
        width, height = 46.0, 5.0
        corner = (-width / 2, -self.radius - 14)
        renderer.rect(corner, (width, height), fill=DARK)
        renderer.rect(corner, (width * fraction, height), fill=health_colour(fraction))
        renderer.rect(corner, (width, height), stroke=(0.85, 0.9, 1.0, 0.5))


class Player(Node2D):
    def on_draw(self, renderer):
        renderer.circle((0, 0), PLAYER_RADIUS, fill=(0.36, 0.72, 1.0, 1.0))
        renderer.circle((0, 0), PLAYER_RADIUS * 0.45, fill=(0.9, 0.97, 1.0, 1.0))


class Portrait(Control):
    """The player's face, coloured by their health."""

    health = Property(1.0, range=(0.0, 1.0))

    def on_draw(self, renderer):
        w, h = self.size
        renderer.rect((0, 0), (w, h), fill=DARK)
        renderer.rect((6, 6), (w - 12, h - 12), fill=health_colour(self.health))
        for eye_x in (0.36, 0.64):
            renderer.rect((w * eye_x - 3, h * 0.38), (6, 8), fill=DARK)
        renderer.rect((w * 0.35, h * 0.68), (w * 0.3, 4), fill=DARK)


class HealthBarsDemo(Node2D):
    dynamic = True  # draws the melee swing ring

    input_context = {
        "move": [Axis2D.WASD, Axis2D.ARROWS, Controller.LEFT_STICK],
        "hit": [Pointer.PRIMARY],
        "attack": [Key.SPACE, Controller.A],
    }

    def on_ready(self):
        self.hp = PLAYER_MAX_HP
        self.kills = 0
        self.hurt_cooldown = 0.0
        self.swing = 0.0  # seconds of melee ring left
        self.drain = None  # the running HUD tween, if any

        self.add_child(Ground())
        self.player = self.add_child(Player())
        self.camera = self.add_child(Camera2D(smoothing=5.0))
        self.camera.target = self.player

        hud = self.add_child(CanvasLayer())
        self.portrait = hud.add_child(Portrait(anchor=Anchor.TOP_LEFT, inset=14, size=(56, 56)))
        self.bar = hud.add_child(
            ProgressBar(anchor=Anchor.TOP_LEFT, inset=(80, 34), size=(200, 16), max_value=PLAYER_MAX_HP, value=self.hp)
        )
        self.bar.show_percentage = False
        self.hp_label = self.bar.add_child(Label(anchor=Anchor.CENTER, font_size=11))
        self.kills_label = hud.add_child(Label("Kills: 0", anchor=Anchor.TOP_RIGHT, inset=14, font_size=16))
        self.kills_label.text_colour = (1.0, 0.82, 0.4, 1.0)
        self.add_child(TouchController(buttons=(Controller.A,)))

        self.spawn_wave()

        # Example help overlay: not part of the technique shown.
        help_text = "WASD / stick: move    Click, tap or SPACE: attack"
        hud.add_child(Label(help_text, anchor=Anchor.CENTER_TOP, inset=14, font_size=13))

    def spawn_wave(self):
        for i in range(WAVE_SIZE):
            angle = i * math.tau / WAVE_SIZE + random.uniform(-0.4, 0.4)
            offset = Vec2(math.cos(angle), math.sin(angle)) * random.uniform(170, 330)
            home = (self.player.position + offset).clamped((50 - WORLD, 50 - WORLD), (WORLD - 50, WORLD - 50))
            enemy = self.add_child(Enemy(home, *random.choice(ENEMY_KINDS)))
            enemy.died.connect(self.on_enemy_died)

    def on_enemy_died(self):
        self.kills += 1
        self.kills_label.text = f"Kills: {self.kills}"
        if not self.tree.group("enemies"):
            self.start_coroutine(self.next_wave())

    def next_wave(self):
        yield from wait(1.5)
        self.spawn_wave()

    def hurt_player(self, amount: float):
        self.hp = max(0.0, self.hp - amount)
        self.camera.shake(4.0, 0.25)
        self.add_child(DamageNumber(int(amount), (1.0, 0.36, 0.30), position=self.player.position - (0, 34)))
        if self.drain is not None:
            self.stop_coroutine(self.drain)
        self.drain = self.start_coroutine(
            tween(self.bar, "value", self.hp, 0.4, easing=easing.ease_out_cubic, on_complete=self.drain_finished)
        )

    def drain_finished(self):
        self.drain = None

    def on_update(self, dt):
        step = Input.value("move") * PLAYER_SPEED * dt
        self.player.position = (self.player.position + step).clamped((-WORLD, -WORLD), (WORLD, WORLD))
        if Input.just_pressed("hit"):
            point = self.camera.screen_to_world(Input.mouse_position)
            hits = (e for e in self.tree.group("enemies") if e.position.distance_to(point) <= e.radius + 6)
            target = next(hits, None)
            if target:
                target.take_damage(random.randint(12, 24))

        if Input.just_pressed("attack"):
            self.swing = 0.18
            distance = self.player.position.distance_to
            # Query again: a click this frame may have just killed an enemy, and the group skips it.
            nearest = min(self.tree.group("enemies"), key=lambda e: distance(e.position), default=None)
            if nearest and distance(nearest.position) <= MELEE_RANGE:
                nearest.take_damage(random.randint(15, 25))
        self.swing = max(0.0, self.swing - dt)

        self.hurt_cooldown = max(0.0, self.hurt_cooldown - dt)
        touching = any(
            e.position.distance_to(self.player.position) < e.radius + PLAYER_RADIUS + 4
            for e in self.tree.group("enemies")
        )
        if touching and self.hurt_cooldown == 0.0:
            self.hurt_cooldown = 1.0
            self.hurt_player(CONTACT_DAMAGE)

        self.hp = min(PLAYER_MAX_HP, self.hp + PLAYER_REGEN * dt)
        if self.drain is None:
            self.bar.value = self.hp
        self.bar.fill_colour = health_colour(self.bar.percentage)
        self.portrait.health = self.hp / PLAYER_MAX_HP
        self.hp_label.text = f"HP {round(self.hp)} / {PLAYER_MAX_HP:.0f}"

    def on_draw(self, renderer):
        if self.swing > 0:
            renderer.circle(self.player.position, MELEE_RANGE, stroke=(0.9, 0.95, 1.0, self.swing * 2.5))


class Ground(Node2D):
    """A dotted grid and the world's border, so the scrolling has something to read against."""

    def on_draw(self, renderer):
        for x in range(-WORLD, WORLD + 1, 120):
            for y in range(-WORLD, WORLD + 1, 120):
                renderer.circle((x, y), 2.5, fill=(0.28, 0.29, 0.35, 1.0))
        renderer.rect((-WORLD, -WORLD), (WORLD * 2, WORLD * 2), stroke=(0.45, 0.48, 0.6, 1.0))


if __name__ == "__main__":
    App(title="Health Bars", width=960, height=540).run(HealthBarsDemo())