Packs de interfaz
Dusk Barras de HUD — HP, MP y XP
Un marco de barra nine-slice en púrpura del ocaso con tres rellenos con marcas y una variante segmentada, de 128×16 con extremos de 4 px. SVG y PNG.
Sobre este pack
Barras de 128x16 con seis marcas, dimensionadas para una pantalla que se amplía en vez de para una que ya es grande. Cada borde cae en la rejilla de 4px y las marcas son huecos en el relleno en vez de líneas encima, así que una ampliación entera las mantiene exactamente de un píxel de ancho en vez de emborronarlas dentro de la barra.
El marco es un nine-slice con extremos de 4 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 lleva marcas regulares a lo largo, lo que convierte un porcentaje en algo que un jugador puede contar de un vistazo sin necesidad de un marco segmentado.
Hay tres colores, uno por recurso: HP, MP y XP. 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 4 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
"Dusk Barras de HUD — HP, MP y XP" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-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.