Redline Barras de HUD — vida, mana e vigor

Barras de 200x20 com dez marcas, deliberadamente grosseiras. Um medidor de alarme se lê como "quão ruim" e não como um número, e dez marcas são o máximo que um jogador consegue contar sem parar.

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 9 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.

Creative Commons Atribuição 4.0 — Grátis para uso comercial. Atribuição obrigatória. Termos completos · O que isso significa na prática