Packs de interface
Chromepop Barras de HUD — vida, mana e vigor
Uma moldura de barra nine-slice em cartaz cromado com três preenchimentos de núcleo oco e uma variante segmentada, 200×20 com pontas de 4 px. SVG e PNG.

Sobre este pack
Barras de 200x20 com doze divisões chapadas. As faixas são vãos no preenchimento em vez de linhas por cima, porque uma linha traçada sobre um preenchimento chapado seria o único traço de um kit que decidiu não ter nenhum.
A moldura é um nine-slice com pontas de 4 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 é uma casca oca com um núcleo brilhante atravessando, então a cor do encaixe aparece entre as bordas e a barra se lê como energia contida em vez de tinta.
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 11 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 4 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 doze avos da largura interna, para que a borda do preenchimento caia sempre num entalhe.
Licença
Creative Commons Atribuição 4.0 — Grátis para uso comercial. Atribuição obrigatória. Termos completos · O que isso significa na prática
"Chromepop Barras de HUD — vida, mana e vigor" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/chromepop-hud-bars


