Pular para o conteúdo
Estilizar · TécnicaIniciante

Contorno de sprite

Desenhar uma borda onde os pixels do sprite encontram o espaço transparente em volta dele.

UVTextura2D / sprite

Cards

Um exemplo ao vivo para ajustar, aprender e copiar.

Como funciona

Um jogo 2D marca a unidade selecionada, o item que dá para pegar ou o inimigo sob o cursor com uma borda colorida em volta do sprite. Desenhar essa borda à mão exigiria uma segunda cópia de cada quadro. Um shader a desenha a partir do próprio sprite.

A ideia cabe numa frase: um pixel faz parte do contorno se ele é transparente e algum vizinho não é. O shader lê o alfa do sprite no pixel e nos texels ao lado, e pinta a cor da linha onde o pixel está vazio mas um vizinho é sólido. O blending de alfa normal da engine então põe o resultado sobre a cena como qualquer sprite.

Dois detalhes decidem se isso funciona num projeto de verdade. A linha cresce para fora, num espaço que o sprite não usa, então a imagem precisa de pixels vazios em volta do desenho, ou a linha é cortada na borda do quad. E numa sprite sheet (abre em uma nova aba) os vizinhos dos pixels da borda de um quadro pertencem ao quadro seguinte, então os quadros também precisam de um espaço entre eles.

Leitura complementar