Packs de interfaz

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.

  • ui
  • svg
  • png transparente
  • hud
  • barra de vida
  • barra de progreso
  • nine-slice
  • magitech
  • alquimia
  • laboratorio
  • hud
Tres barras de estado horizontales apiladas sobre fondo de damero, rellenas a distintos niveles para vida, maná y aguante, con una barra segmentada de 22 muescas y tres barras más pequeñas debajo
vista previa 1600×880la transparencia se muestra como damero

Sobre este pack

Barras de 200x20 con veintidós divisiones, casi las más finas de aquí. Un medidor de investigación o de reacción se lee hasta un valor, y tantas marcas permiten a un jugador acertar uno exacto.

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 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: 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 21 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 espera
Descargar ZIP13 kB

Kit completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme

Archivos incluidos en este pack
ArchivoFormatoPesoDescarga
Kit completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readmeZIP13 kB Obtener →
Marco de barra, SVG editableSVG776 B Obtener →

Cómo se usa

  1. 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.
  2. 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.
  3. 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.
  4. Para recursos por unidades, usa el marco segmentado y ajusta el ancho del relleno a múltiplos de un 22avo 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

Línea de crédito para copiar
"Aetherlab Barras de HUD — vida, maná y aguante" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/aetherlab-hud-bars