Packs de interface

Pinos de mapa Byte

12 marcadores de mapa e indicadores de mundo (pixel art) para interfaces em modo claro — osso frio, acento azul-petróleo de sinal. SVG e PNG transparente em 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • marcador de mapa
  • ponto de rota
  • marcador de missão
  • minimapa
  • pixel
  • pixel art
  • pixel art
  • interface clara
  • quebra-cabeça
  • gerenciamento
Folha com 12 marcadores de mapa e indicadores de mundo (pixel art) da família Byte, dispostos sobre um xadrez de transparência com suas medidas em pixels escritas embaixo
prévia 1600×1219a transparência aparece como xadrez

Sobre este pack

Pinos de mapa Byte é um conjunto de 12 marcadores de mapa e indicadores de mundo desenhados no estilo pixel art, em que cada canto é uma escada de pixels inteiros e nada tem antialiasing. Contém cinco alfinetes de mapa — simples, missão, loja, perigo e casa —, galões de ponto de rota, uma seta de orientação do jogador, um nó de rota e uma marca de bússola, um anel de objetivo, anéis de ping e uma área de efeito.

Kits de interface cobrem as bordas da tela. Estes ficam no meio, sobre o jogo, onde o kit não faz ideia do que há embaixo — grama, neve, noite. Um marcador que depende de um fundo para ser lido vai sumir na metade das suas fases.

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.

Cada marcador carrega o próprio contorno e um corpo de uma só cor, de modo que quem trabalha é a silhueta e não o preenchimento. A âncora é citada no título de cada sprite e não é o centro: um alfinete aponta o alvo com a ponta, então ancora embaixo ao centro, enquanto um anel e a seta de orientação ancoram no meio. Colocar um alfinete pelo centro o põe meio alfinete acima do que ele deveria marcar. A área e o anel de objetivo são tracejados e não sólidos porque descrevem uma região e não uma borda — um anel sólido é lido como parede.

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 espera
Baixar ZIP38 kB

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

Arquivos inclusos neste pack
ArquivoFormatoPesoDownload
Conjunto completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readmeZIP38 kB Obter →
Alfinete de mapa, âncora embaixo ao centro, SVG editávelSVG494 B Obter →

Como usar

  1. Ancore cada sprite pelo ponto citado no título: embaixo ao centro nos alfinetes, no centro nos anéis e na seta de orientação.
  2. Mantenha os marcadores em tamanho de tela fixo em vez de escalá-los com a distância; um alfinete que encolhe com o mundo deixa de ser legível exatamente na distância em que você precisava dele.
  3. Use os anéis de ping como três quadros de uma animação — desenhá-los para fora e apagá-los — e não como três marcadores separados.
  4. Tinja o corpo do alfinete por facção mas deixe o contorno em paz; é o contorno que mantém o marcador legível sobre um fundo desconhecido.

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
"Pinos de mapa Byte" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/byte-map-markers