Contorno de sprite
Desenhar uma borda onde os pixels do sprite encontram o espaço transparente em volta dele.
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 texelsUm elemento de uma textura, a versão do pixel numa textura. Uma amostra mistura texels próximos ou devolve o mais próximo. Texel Um elemento de uma textura, a versão do pixel numa textura. Uma amostra mistura texels próximos ou devolve o mais próximo. Blending Combinar a cor que o shader de fragmento devolve com a cor que já está no framebuffer, em vez de substituí-la. Transparência, brilho aditivo e multiplicação vêm daí.texel size = 1 / textureSize(sampler, 0)result = src × srcFactor + dst × dstFactor
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)Uma única imagem com vários sprites ou quadros de animação lado a lado. Cada sprite lê só o próprio retângulo, mas a filtragem e as leituras de vizinhos perto da borda podem pegar pixels do quadro ao lado. Sprite sheet Uma única imagem com vários sprites ou quadros de animação lado a lado. Cada sprite lê só o próprio retângulo, mas a filtragem e as leituras de vizinhos perto da borda podem pegar pixels do quadro ao lado.
Leitura complementar
- step (abre em uma nova aba)Referência
- smoothstep (abre em uma nova aba)Referência
- Shaping functions (abre em uma nova aba)Livro
- texture (abre em uma nova aba)Referência
- texelFetch (abre em uma nova aba)Referência
- Using textures in WebGL (abre em uma nova aba)Documentação
- Blending (abre em uma nova aba)Artigo
- WebGLRenderingContext: blendFunc() method (abre em uma nova aba)Documentação
- Spatial shaders (abre em uma nova aba)Documentação
- textureSize (abre em uma nova aba)Referência
- CanvasItem shaders (abre em uma nova aba)Documentação
- Texture atlas (abre em uma nova aba)Referência