Packs de interface
Byte Kit de progressão
11 componentes de progressão e recompensa (pixel art) para interfaces em modo claro — osso frio, acento azul-petróleo de sinal. SVG e PNG transparente em 1x/2x/4x.

Sobre este pack
Byte Kit de progressão é um conjunto de 11 componentes de progressão e recompensa desenhados no estilo pixel art, em que cada canto é uma escada de pixels inteiros e nada tem antialiasing. Contém quatro estados de nó da árvore de habilidades, estrelas de avaliação vazia, pela metade e cheia, um selo de nível, um anel de experiência e um anel de recarga de habilidade.
As telas de progressão são onde o estado mais importa e onde a cor é menos confiável: uma árvore de habilidades já está coberta de arte de habilidades em todos os matizes, então um nó cujo estado é só uma cor de borda fica ilegível assim que recebe um ícone dentro.
O contorno avança em degraus de 4px e o sombreamento é um dithering de Bayer em vez de um degradê, então o conjunto sobrevive a uma escala por fator inteiro — o único jeito de escalar pixel art sem virar mingau.
Dentro desse estilo, esta é a leitura Byte: uma interface em modo claro sobre uma paleta osso frio com acentos azul-petróleo de sinal, construída em torno de uma moldura de borda única, botões em cápsula totalmente arredondados de 112x36, barras em faixas divididas em 10 segmentos e ícones com contorno numa grade de 24px. São essas medidas que explicam por que duas famílias podem compartilhar um estilo artístico sem serem intercambiáveis: o estilo decide como se traça uma borda, os números decidem para que serve a interface.
O nó bloqueado é hachurado, o nó no máximo leva quatro marcas nos cantos e o nó disponível é simplesmente a face lisa — três estados contados por textura e quantidade em vez de matiz. Os dois anéis compartilham uma mesma geometria e diferem só na direção do preenchimento e na cor, então se alinham quando sobrepostos.
Cada sprite vem como SVG editável e como PNG transparente em 1x, 2x e 4x, então você pode jogar os PNGs direto num motor ou abrir o vetor e mudar uma cor. Desenhado com as mesmas medidas do resto da família Byte, o que significa que este kit e o kit de painéis Byte se alinham sem que nenhum dos dois seja redimensionado. Combina bem com jogos em pixel art.
Download
Link direto · sem cadastro · sem página de esperaConjunto completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readme
Como usar
- Desenhe o ícone da habilidade dentro do nó, não em cima; a arte do nó deixa o centro livre exatamente para isso.
- Anime o anel de recarga redesenhando o arco em vez de girar o sprite — o quadro incluído é um exemplo estático em 68%.
- Empilhe três estrelas do mesmo tamanho para uma linha de avaliação; a meia estrela existe para que uma média de 2.5 não precise ser arredondada.
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
"Byte Kit de progressão" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/byte-progression-kit


