Packs de interfaz

Oak Barras de HUD — vida, maná y aguante

Un marco de barra nine-slice en roble cálido con tres rellenos brillantes y una variante segmentada, de 192×28 con extremos de 10 px. SVG y PNG.

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

Sobre este pack

Barras de estado recortadas para caber dentro de los marcos Oak sin un segundo borde. La división brillante les da aspecto de tubo de cristal lleno, y los colores están apagados a propósito — una barra de vida roja saturada sobre madera se lee como una luz de aviso y no como parte del mundo.

El marco es un nine-slice con extremos de 10 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 7 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 ZIP12 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 readmeZIP12 kB Obtener →
Marco de barra, SVG editableSVG572 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 10 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 octavo 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
"Oak Barras de HUD — vida, maná y aguante" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-hud-bars