Packs de interfaz

Blocks Barras de HUD — vida, maná y aguante

Un marco de barra nine-slice en vóxel tosco con tres rellenos con marcas y una variante segmentada, de 168×28 con extremos de 6 px. SVG y PNG.

  • ui
  • svg
  • png transparente
  • hud
  • barra de vida
  • barra de progreso
  • nine-slice
  • vóxel
  • de bloques
  • isométrico
  • cubo
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 con un patrón de marcas en vez de rellenos suaves, a juego con los paneles de bloques. El marco se lee como un canal recortado en un bloque macizo — el relleno se apoya dentro en vez de flotar encima.

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 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: 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 ZIP10 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 readmeZIP10 kB Obtener →
Marco de barra, SVG editableSVG429 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 6 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 Zero 1.0 — Dominio público. Sin atribución. Términos completos · Qué significa en la práctica