Packs de interface
Blocks Barras de HUD — vida, mana e vigor
Uma moldura de barra nine-slice em voxel robusto com três preenchimentos com marcas e uma variante segmentada, 168×28 com pontas de 6 px. SVG e PNG.

Sobre este pack
Barras de status com um padrão de marcas em vez de preenchimentos suaves, combinando com os painéis em blocos. A moldura se lê como uma calha aberta num bloco maciço — o preenchimento se apoia dentro em vez de flutuar em cima.
A moldura é um nine-slice com pontas de 6 px, então se estende a qualquer largura sem que as extremidades deformem — uma barra de chefe em largura total e uma barra de placa de nome de inimigo de 40 px usam o mesmo arquivo.
Os preenchimentos são sprites separados e não estão assados na moldura, que é a parte que importa na prática: você escala a largura do preenchimento de zero ao máximo e a moldura nunca se mexe. Cada preenchimento traz marcas regulares ao longo do comprimento, o que transforma uma porcentagem em algo que o jogador consegue contar de relance sem uma moldura segmentada.
São três cores, uma por recurso: vida, mana e vigor. Elas estão afastadas tanto em brilho quanto em matiz, e é essa parte que sobrevive a uma captura em escala de cinza e às formas mais comuns de daltonismo. Um conjunto ajustado a uma luminosidade idêntica parece equilibrado numa fileira de amostras e desmorona num único bloco cinza na tela.
A variante segmentada acrescenta 7 linhas de entalhe sobre a mesma moldura, para jogos que contam pastilhas discretas — corações, cargas, munição — em vez de uma porcentagem contínua. É um arquivo separado e não uma sobreposição, então você pode usá-la sem mudar o seu widget de barra. Tudo está incluído como SVG editável e como PNG chapado transparente em 1x, 2x e 4x.
Download
Link direto · sem cadastro · sem página de esperaKit completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readme
Como usar
- Desenhe primeiro a moldura e depois o preenchimento por cima, com a borda esquerda recuada pela largura da ponta de 6 px; animar só a largura do preenchimento mantém as extremidades da moldura perfeitamente paradas.
- No Unity, defina a imagem de preenchimento como Image Type Filled com Fill Method Horizontal, ou use uma imagem Sliced e anime a largura do RectTransform — os dois funcionam porque o preenchimento não tem cantos arredondados próprios.
- No Godot 4, um TextureProgressBar com a moldura como Under Texture e o preenchimento como Progress Texture reproduz tudo isso sem uma linha de código, e Stretch Mode em Tile mantém as pontas intactas.
- Para recursos em pastilhas, use a moldura segmentada e alinhe a largura do preenchimento a múltiplos de um oitavo da largura interna, para que a borda do preenchimento caia sempre num entalhe.
Licença
Creative Commons Zero 1.0 — Domínio público. Sem atribuição. Termos completos · O que isso significa na prática



