Packs de interface

Sandbox Controles — caixa, interruptor e deslizante

Oito controles de interface em areia quente: caixa, rádio, interruptor e deslizante, cada estado ligado/desligado desenhado como forma distinta. SVG e PNG.

  • ui
  • svg
  • png transparente
  • caixa de seleção
  • interruptor
  • controle deslizante
  • configurações
  • controles
  • voxel
  • interface clara
  • construção
  • sandbox
Controles de configurações sobre fundo xadrez — uma caixa vazia e uma marcada, um botão de rádio não selecionado e outro selecionado, um interruptor desligado e ligado, e o trilho de um deslizante com sua alça
prévia 1600×747a transparência aparece como xadrez

Sobre este pack

Controles de 20px com geometria quadrada do começo ao fim; neste estilo o auxiliar redondo desenha um quadrado, porque um voxel não tem curvas e um círculo entre cubos está errado na hora.

O conjunto cobre os quatro controles de que uma tela de configurações realmente precisa: uma caixa de seleção, um botão de rádio, um interruptor e um deslizante com alça separada. Cada controle com estados traz os dois estados no próprio arquivo, sobre uma base 20×20 — o interruptor tem 40×20 e o trilho do deslizante 160 px de largura para poder receber nine-slice em qualquer comprimento.

Ligado e desligado são desenhados como formas diferentes, não como cores diferentes. Uma caixa não marcada é um recesso vazio; uma marcada é uma superfície preenchida com uma marca recortada dentro. Isso importa porque a tela de configurações é justamente onde é mais provável que um jogador esteja usando um modo para daltônicos, um shader em escala de cinza ou um pós-processamento muito tingido — e um estado que só se lê pelo matiz some sob os três.

O deslizante vem como trilho e alça em vez de um único sprite. Animar um deslizante de peça única obriga a redesenhá-lo a cada valor; com duas peças você estica o preenchimento e move a alça, que é justamente o que todo toolkit de interface já espera. A alça tem um entalhe central para que sua rotação e sua posição continuem legíveis em tamanhos pequenos.

Tudo está incluído como SVG editável e como PNG chapado transparente em 1x, 2x e 4x, desenhado com os mesmos seis tons areia do deserto do resto da família Sandbox.

Download

Link direto · sem cadastro · sem página de espera
Baixar ZIP13 kB

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

Arquivos inclusos neste pack
ArquivoFormatoPesoDownload
Conjunto completo — 8 fontes SVG, exportações PNG em 1x/2x/4x, licença e readmeZIP13 kB Obter →
Interruptor (estado ligado), SVG editávelSVG506 B Obter →
Trilho do deslizante, SVG editávelSVG455 B Obter →

Como usar

  1. Troque a textura inteira entre os arquivos ligado e desligado em vez de tingir um único sprite; os dois estados diferem na forma, então uma tinta sozinha não os reproduz.
  2. O trilho do deslizante aceita nine-slice com 7 px de ponta de cada lado — estique o meio e as extremidades arredondadas continuam intactas em qualquer largura.
  3. No Unity, conecte os dois arquivos aos gráficos Background e Checkmark do componente Toggle, ou troque o sprite num handler onValueChanged se preferir uma única imagem.
  4. Centralize a alça na borda do preenchimento: ela tem 17 px de largura, então desloque-a metade disso a partir da borda direita do preenchimento para que fique sobre o valor e não depois dele.

Licença

Creative Commons Zero 1.0 — Domínio público. Sem atribuição. Termos completos · O que isso significa na prática