Hoje eu venho aqui contar para vocês que eu fiz o meu primeiro shader! Utilizando o Shader Graph da Unity, eu criei um contorno (em inglês, outline) para sprites. Este projeto é um WIP (Working in Progress, ou em português Trabalho ainda sendo realizado), mas quero contar aqui o que eu aprendi com essa experiência.
O que são Shaders?
Shaders are small scripts that contain the mathematical calculations and algorithms for calculating the colour of each pixel rendered, based on the lighting input and the Material configuration.
Shaders são cálculos matemáticos para transformar pixels, descrevendo como eles devem ser desenhados na tela. Assim, você provavelmente utilizará nós (nodes) como Add (Adição) e Multiply (Multiplicação) ao usar o Shader Graph, uma ferramenta da Unity que permite criar Shaders visualmente.
Se você estiver curioso sobre como eu criei esse shader, eu aprendi assistindo ao vídeo da Brackeys sobre o assunto. Para criar esse shader, o grande pulo do gato é o node Tiling and Offset, que permite, utilizando a entrada para o Offset, fazer a rolagem dos pixels. Usando essa rolagem, é possível demarcar onde será o contorno da imagem. Você deve fazer essa rolagem para todos os cantos do sprite: esquerda, direita, cima e embaixo.
Após gerar a rolagem de todos os cantos, é necessário somar o canal alpha de todas as novas texturas criadas. Depois de fazer a soma, utilizei um node Clamp, para manter todos os valores da soma entre 0 e 1, pois a soma pode gerar textura com valores maiores que 1 e isso não é algo que queremos. Então, faz a subtração da textura gerada pelo Clamp do canal alpha da imagem original, o que irá gerar o contorno esperado.
Utilizando o contorno, somamos seu valor com a propriedade criada para a cor do contorno. Tendo o contorno com a cor definida, faz-se a soma com a imagem original, para enfim gerar o contorno junto da imagem do sprite. Para então adicionar a imagem resultante ao node Fragment, para ter tanto o canal da cor e o canal alpha, utilizei o node Split.
O Projeto
Nesse projeto, eu montei uma cidade com três prédios, usando as imagens do pacote da Modern Exteriors. Nesta versão, o usuário poderia passar o mouse sobre alguns dos prédios presente na cidade e ver o destaque do prédio. Isso pode ser usado para um próximo passo em que o usuário possa selecionar algum dos prédios ou quem sabe, se houver uma personagem, eu possa adicionar um teste de colisor da personagem com o prédio e destacar o prédio que a personagem estiver próxima.
Para criar a cidade, eu utilizei tilemaps para fazer as ruas e as calçadas. No caso dos prédios, eu montei eles no Photoshop, para ter cada prédio como uma única imagem. Para que o contorno dos prédios funcionasse, eu deixei um espaço transparente como uma borda, para que houvesse espaço para o shader posteriormente.
Utilizando o Shader
Com a cidade e o shader criado, eu gerei um material que usasse o shader. Dessa forma algumas das propriedades adicionadas ao blackboard do Shader Graph aparecem para ser modificados no material. A textura (MainTex) utilizado pelo material, era atualizado segundo o sprite renderer do objeto, assim, eu consigo realizar o contorno em qualquer prédio que possua sprite.
Outras duas propriedades que eu criei foi a espessura do contorno (Thickness), que poderia ser configurado de 0 até 0.05; e a última propriedade é a cor do contorno, que eu utilizei no formado HDR para definir a intensidade do brilho da cor que eu poderia manipular depois em um pós processamento.
Script
Quando o usuário passa o mouse sobre os sprites dos prédios, deve trocar o material do sprite do material default para o material que eu criei utilizando o shader. Para isso, adicionei um Box Collider 2D em cada prédio, assim eu pude fazer a verificação de OnMouseEnter para cada collider. Assim, toda vez que o mouse entra na área do collider, o script troca o material para o do contorno, quando o mouse sai da área do collider, o script troca de volta o material para o default do Sprite Lit.