Packs de interfaz
Neon Barras de HUD — escudo, energía y calor
Un marco de barra nine-slice en neón de alto contraste con tres rellenos de núcleo hueco y una variante segmentada, de 200×20 con extremos de 6 px. SVG y PNG.
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 vez de un porcentaje continuo. Es un archivo aparte y no una superposición, así que puedes usarla sin cambiar tu widget de barra. Todo se incluye como SVG editable y como PNG plano transparente en 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-barsMás Packs de interfaz
Ver todos →
Aetherlab Fondos
7 piezas de fondo y superposición (magitech) para interfaces de tema oscuro — paleta azul de laboratorio, acento cian etéreo. SVG y PNG transparente en 1x/2x/4x.
Aetherlab Marcos de carta
11 componentes de cartas y notificaciones (magitech) para interfaces de tema oscuro — paleta azul de laboratorio, acento cian etéreo. SVG y PNG transparente en 1x/2x/4x.
Aetherlab Kit de diálogo
7 componentes de diálogo (magitech) para interfaces de tema oscuro — paleta azul de laboratorio, acento cian etéreo. SVG y PNG transparente en 1x/2x/4x.
Aetherlab Barras de HUD — vida, maná y aguante
Un marco de barra nine-slice en éter frío con tres rellenos de núcleo hueco y una variante segmentada, de 200×20 con extremos de 4 px. SVG y PNG.