Packs de interfaz
Hyperlane Barras de HUD — vida, maná y aguante
Un marco de barra nine-slice en velocidad arcade con tres rellenos brillantes y una variante segmentada, de 240×28 con extremos de 8 px. SVG y PNG.
Sobre este pack
Barras de 240x28 con seis divisiones — las barras más anchas y altas del catálogo. Un HUD de carreras se lee a toda velocidad y con visión periférica, lo que descarta las marcas finas.
El marco es un nine-slice con extremos de 8 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 se divide a media altura con un borde duro en vez de un degradado, y eso es lo que se lee como cristal sin costar ni un píxel suave a 1x.
Hay tres colores, uno por recurso: vida, maná y aguante. 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 5 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 8 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 sexto del ancho interior para que el borde del relleno caiga siempre sobre una muesca.
Licencia
Creative Commons Atribución 4.0 — Gratis para uso comercial. Atribución obligatoria. Términos completos · Qué significa en la práctica
"Hyperlane Barras de HUD — vida, maná y aguante" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/hyperlane-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.