Packs de interface

Inkwell Barras de HUD — golpes, carga e combo

16 sprites de barra de HUD quadrinho nanquim: molduras padrão, fina e vertical, três preenchimentos em faixas em cada, mais variantes segmentada, fantasma e de escudo.

  • ui
  • svg
  • png transparente
  • hud
  • barra de vida
  • barra de progresso
  • nine-slice
  • quadrinhos
  • cartoon
  • grosso
  • interface clara
Três barras de status horizontais empilhadas sobre fundo xadrez, preenchidas em níveis diferentes para golpes, carga e combo, com uma barra segmentada de 5 marcas e três barras menores abaixo
prévia 1600×880a transparência aparece como xadrez

Sobre este pack

Barras de status com o mesmo contorno de quatro pixels dos painéis. Os preenchimentos são cor chapada pura porque um degradê dentro de uma forma de nanquim se lê como erro em vez de material.

A moldura é um nine-slice com pontas de 12 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: golpes, carga e combo. 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 4 linhas de entalhe sobre a mesma moldura, para jogos que contam unidades 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 seu widget de barra.

Três construções de moldura cobrem onde as barras realmente ficam: a barra padrão, uma fina para placas de nome de inimigos e uma vertical, porque uma coluna de mana não é uma barra de vida girada — girar um nine-slice estica suas pontas no eixo errado. Cada construção tem seu próprio conjunto de três preenchimentos.

Dois preenchimentos de sobreposição cobrem os estados que uma barra sozinha não consegue mostrar. O preenchimento fantasma é vazado e tracejado: marca o trecho recém-perdido, então um golpe se lê como uma mudança e não como um número novo. O preenchimento de escudo é hachurado em vez de tingido, porque uma camada de absorção fica sobre a barra de recurso e uma segunda cor ali colide com a de baixo. Tudo está incluído como SVG editável e como PNG transparente plano em 1x, 2x e 4x.

Download

Link direto · sem cadastro · sem página de espera
Baixar ZIP44 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 readmeZIP44 kB Obter →
Moldura da barra, SVG editávelSVG550 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 12 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 quinto 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
"Inkwell Barras de HUD — golpes, carga e combo" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/inkwell-hud-bars