Packs de interface
Byte Interface de criação
13 elementos de criação e receitas (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 Interface de criação é um conjunto de 13 elementos de criação e receitas desenhados no estilo pixel art, em que cada canto é uma escada de pixels inteiros e nada tem antialiasing. Contém três estados de espaço de ingrediente, um espaço de resultado maior, uma seta de combinar e outra de desmontar, uma marca de junção, três medidores de qualidade, uma linha de receita conhecida e outra não descoberta e uma barra de criação em degraus.
A criação é a única tela em que um espaço precisa dizer algo que um espaço de inventário nunca diz: não o que há dentro, mas se você tem o suficiente. Disponível, ausente e parcialmente disponível são três estados, e um conjunto que entrega um único sprite de espaço obriga a engine a responder essa pergunta em texto sob cada espaço.
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 espaço de ingrediente vem nos três estados e a diferença está na borda, não num preenchimento: o espaço completo é fechado, o ausente é tracejado, o parcial é fechado apenas na metade de baixo. Isso se lê a 56 pixels e se lê sem cor. As setas de combinar e desmontar são arquivos separados e não uma seta girada, porque as duas ficam na mesma tela e uma seta espelhada joga o sombreado para o lado errado. O espaço de resultado foi desenhado um terço maior de propósito: o produto de uma receita não é mais um ingrediente e não deve caber na mesma caixa.
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
- Disponha os espaços de ingrediente com a marca de junção entre eles e a seta de combinação antes do espaço de resultado; cada peça foi desenhada para essa ordem de leitura e para um centro vertical comum.
- Controle o estado do espaço pela contagem do inventário em vez de tingir um único sprite: tracejado se falta, meio fechado se é parcial, fechado se está completo.
- Leia o medidor de qualidade pelo número de entalhes, não pelo comprimento. Os entalhes são fixos, então um resultado de cinco se conta ao lado de um de três.
- Para o tempo de criação use a barra em degraus e não uma barra de recurso. A criação avança em passos distintos, e um preenchimento contínuo sugere que dá para interromper em qualquer valor.
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 Interface de criação" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/byte-crafting-ui


