Packs de interface

Byte Barras de HUD — vida, mana e vigor

Uma moldura de barra nine-slice em pixel brilhante com três preenchimentos em faixas e uma variante segmentada, 152×20 com pontas de 6 px. SVG e PNG.

  • ui
  • svg
  • png transparente
  • hud
  • barra de vida
  • barra de progresso
  • nine-slice
  • pixel art
  • interface clara
  • quebra-cabeça
  • gerenciamento
Três barras de status horizontais empilhadas sobre fundo xadrez, preenchidas em níveis diferentes para vida, mana e vigor, com uma barra segmentada de 10 marcas e três barras menores abaixo
prévia 1600×880a transparência aparece como xadrez

Sobre este pack

Barras de status de 20px em vez dos 24 habituais, porque uma interface em modo claro se lê mais pesada que uma escura no mesmo tamanho e as barras dominavam o painel. Três preenchimentos em faixas, cada um separado em brilho além do matiz para que o conjunto continue se lendo em escala de cinza.

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 é desenhado em três faixas horizontais — uma faixa clara em cima, um tom médio e uma borda escura embaixo — então ainda se lê como barra em tamanhos pequenos, onde um retângulo chapado vira mancha.

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 9 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 espera
Baixar ZIP10.0 kB

Kit completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readme

Arquivos inclusos neste pack
ArquivoFormatoPesoDownload
Kit completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readmeZIP10.0 kB Obter →
Moldura da barra, SVG editávelSVG687 B Obter →

Como usar

  1. 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.
  2. 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.
  3. 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.
  4. Para recursos em pastilhas, use a moldura segmentada e alinhe a largura do preenchimento a múltiplos de um décimo 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

Linha de crédito para copiar
"Byte Barras de HUD — vida, mana e vigor" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/byte-hud-bars