Neon HUD Bars — shield, power and heat
======================================

A high-contrast neon nine-slice bar frame with three hollow-core fills and a
segmented variant, sized 200×20 with 6 px caps. SVG plus transparent PNG.

Ship systems rather than fantasy resources: shield, power and heat. The fills
are hollow shells with a bright core, so the socket colour shows between the
edges and the bar reads as contained energy instead of paint. The three
colours are far apart in hue and in brightness, because a pilot glancing at a
HUD for a quarter of a second is reading position and colour at once.

The frame is a nine-slice with 6 px end caps, so it stretches to any width
without the ends deforming — a full-width boss bar and a 40 px enemy nameplate
bar use the same file.

The fills are separate sprites rather than baked into the frame, which is the
part that matters in practice: you scale the fill's width from zero to full
and the frame never moves. Each fill is a hollow shell with a bright core
running through it, so the socket colour shows between the edges and the bar
reads as contained energy rather than paint.

There are three colours, one per resource: shield, power and heat. They are
spaced apart in brightness as well as hue, which is the part that survives a
greyscale screenshot and the most common forms of colour blindness. A set
tuned to identical lightness looks balanced in a swatch row and collapses into
one grey block on screen.

The segmented variant adds 11 notch lines over the same frame, for games that
count discrete pips — hearts, charges, ammo — rather than a continuous
percentage. It is a separate file rather than an overlay, so you can drop it
in without changing your bar widget. Everything is included as editable SVG
and as flat transparent PNG at 1x, 2x and 4x.

HOW TO USE

  - Draw the frame first, then the fill on top with its left edge inset by the
    6 px cap width; animating only the fill's width keeps the frame's ends
    perfectly still.
  - In Unity, set the fill image to Image Type Filled with Fill Method
    Horizontal, or use a Sliced image and animate the RectTransform width —
    both work because the fill has no rounded corners of its own.
  - In Godot 4, a TextureProgressBar with the frame as Under Texture and the
    fill as Progress Texture reproduces the whole thing with no code, and
    Stretch Mode set to Tile keeps the caps intact.
  - For pip-style resources, use the segmented frame and snap the fill width
    to multiples of one twelveth of the inner width so the fill edge always
    lands on a notch.
  - Shield reads as the accent colour on purpose: it is the bar a player
    watches during combat, and it is the only one that shares a hue with the
    interface chrome.

License: CC-BY-4.0 — see LICENSE.txt
Page: https://www.colorosse.com/assets/2d/ui/neon-hud-bars
More free assets: https://www.colorosse.com
