Packs de interfaz
Neon Barras de HUD — escudo, energía y calor
16 sprites de barra de HUD neón de alto contraste: marcos estándar, fino y vertical, tres rellenos de núcleo hueco en cada uno, más variantes segmentada, fantasma y de escudo.

Sobre este pack
Sistemas de nave en vez de recursos de fantasía: escudo, energía y calor. Los rellenos son carcasas huecas con un núcleo brillante, así que el color del zócalo se ve entre los bordes y la barra se lee como energía contenida y no como pintura. Los tres colores están lejos entre sí en matiz y en brillo, porque un piloto que mira un HUD un cuarto de segundo está leyendo posición y color a la vez.
El marco es un nine-slice con extremos de 6 px, así que se estira a cualquier anchura sin que los extremos se deformen — una barra de jefe a todo lo ancho y una barra de nombre de enemigo de 40 px usan el mismo archivo.
Los rellenos son sprites aparte y no están horneados en el marco, que es la parte que importa en la práctica: escalas el ancho del relleno de cero a completo y el marco no se mueve nunca. Cada relleno es una carcasa hueca con un núcleo brillante que la recorre, así que el color del zócalo se ve entre los bordes y la barra se lee como energía contenida en vez de como pintura.
Hay tres colores, uno por recurso: escudo, energía y calor. Están separados tanto en brillo como en tono, que es la parte que sobrevive a una captura en escala de grises y a las formas más comunes de daltonismo. Un conjunto ajustado a la misma luminosidad parece equilibrado en una fila de muestras y se derrumba en un único bloque gris en pantalla.
La variante segmentada añade 11 líneas de muesca sobre el mismo marco, para juegos que cuentan unidades discretas —corazones, cargas, munición— en lugar de un porcentaje continuo. Es un archivo aparte y no una superposición, así que puedes usarla sin cambiar tu widget de barra.
Tres construcciones de marco cubren dónde se colocan las barras de verdad: la barra estándar, una fina para placas de nombre de enemigos y una vertical, porque una columna de maná no es una barra de vida girada: girar un nine-slice estira sus extremos por el eje equivocado. Cada construcción tiene su propio juego de tres rellenos.
Dos rellenos superpuestos cubren los estados que una sola barra no puede mostrar. El relleno fantasma es hueco y discontinuo: marca el tramo recién perdido, así que un golpe se lee como un cambio y no como un número nuevo. El relleno de escudo va rayado en lugar de tintado, porque una capa de absorción se apoya sobre la barra de recurso y un segundo color ahí choca con el de debajo. Todo se incluye como SVG editable y como PNG transparente plano a 1x, 2x y 4x.
Descarga
Enlace directo · sin registro · sin página de esperaKit completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme
Cómo se usa
- Dibuja primero el marco y luego el relleno encima, con su borde izquierdo metido hacia dentro el ancho de extremo de 6 px; animar solo el ancho del relleno mantiene los extremos del marco totalmente quietos.
- En Unity, pon la imagen de relleno en Image Type Filled con Fill Method Horizontal, o usa una imagen Sliced y anima el ancho del RectTransform — las dos funcionan porque el relleno no tiene esquinas redondeadas propias.
- En Godot 4, un TextureProgressBar con el marco como Under Texture y el relleno como Progress Texture reproduce todo esto sin código, y poner Stretch Mode en Tile mantiene los extremos intactos.
- Para recursos por unidades, usa el marco segmentado y ajusta el ancho del relleno a múltiplos de un doceavo del ancho interior para que el borde del relleno caiga siempre sobre una muesca.
- El escudo se lee en el color de acento a propósito: es la barra que un jugador vigila durante el combate y la única que comparte matiz con el cromado de la interfaz.
Licencia
Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica
"Neon Barras de HUD — escudo, energía y calor" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/neon-hud-bars


