Aprenda Pixel Art [Anti-Aliasing] pt.1

Olá, recomendo ler meu tutorial antes de começar a ler este tutorial sobre Anti-Aliasing. Para ler clique aqui.

Mas, o que é Anti-Aliasing?
- Nas minha palavras, é um efeito serrilhado, com cantos mal-arredondados e com partes fora do estilo geral do pixel art.
- Nas palavras do Wikipédia:

Serrilhamento, comumente conhecido pelo anglicismo aliasing, é o efeito em forma de serra que se cria ao desenhar uma reta em diagonal. Uma vez que a divisão mínima num monitor é discreta (pixels) surge o aparecimento dos "dentes" da serra ao longo da recta desenhada.

O Anti-Aliasing é normalmente usado em modelos 3D, e alguns programas de modelagem minimizam, ou anulam esse efeito. Como exemplo eu cito Blender3D e 3D Studio Max.

Mas isso é no 3D, no 2D a coisa é muito diferente. Vamos a um exemplo:

Linhas Paralelas.

Na imagem a esquerda, é como deveria ser, com as linhas totalmente paralelas entre si.
Mas já, na imagem á direita, tá uma porcaria, e podemos ver como duas linhas podem estragar seu pixel art. As linhas não estão paralelas com as linhas mais abaixo. O que faz isso acontecer, é apenas um pixel. Destaquei as linhas com o erro em vermelho, e o pixel causador do problema de azul. A imagem ampliada 0% parece um pouco estranha, mas poucas pessoas conseguem verificar a raiz do problema, normalmente, somente pessoas acostumadas com o pixel art conceguem enxergar erros como esse. Mas o caso acima, foi um esboço de um prédio, mas imagine se fosse um prédio real, até parece que faltou cimento para terminar a quina do terraço, é um muito pouco estranho O_O. E como queremos deixar nosso jogo com um ar mais realista isso JAMAIS deve acontecer, a não ser que seja um jogo de guerra e a quina do terraço foi destruido por um tiro de bazuka que roçou ali. Mas isso não é o caso, queremos representar o nosso prédio direito. Ampliado 200% e 400% o erro fica mais perceptível, e esse será o modelo para postagem de imagens nos tutos de pixel art.. (:

Quero um canto arrendondado / Quero destacar meu desenho

Uma das coisas que mais me irritam em pixel arts mal feitos é impressão de cantos quadriculados, mas que querem ser arredondados, outra coisa que deve-se notar são bordas exageradas. Vamos agora testar com um círculo e um emoticon?

HaHa, aqui é tenso explicar e entender. Vou fazer assim:
Círculo[img1] - Está tudo como deveria estar.
Círculo[img2] - Uma coisa mal feita. Vamos pegar um exemplo da vida real. Vamos pensar que pegamos um compasso, e fizemos um círculo para jogar o jogo do compasso.. Mas, o grafite quebrou quando você tava terminando o círculo, e você continuou o círculo igual. Bom, é OBVIO que uma parte vai ficar mais grossa que outra, se fosse um trabalho não ficaria muito legal, concorda?
Círculo[img3] - É super normal. Eu recomendo isso para dar destaque a uma imagem sendo discreto, isso da um efeito de borda maior, mais a borda continua do mesmo tamanho eu apenas quadriculei. É ideal para fazer itens piscar dentro do jogo sem que você quera dar muito destaque a ele.

Emoticon[img1] - Um emoticon que eu tirei aqui do forum, representando meu sono: . Nada de mais.
Emoticon[img2] - Isso só serve realmente para imagens grandes, pois parece que o emoticon é engolido pelas bordas... O_O ... Não tem muito o que explicar, fica ridículo em imagens com menos de 256x256 px.

Bom, ficamos por aqui com mais um tutorial, e c@ralho comentem, demorei MUITO tempo fazendo esse tutorial, para que vocês possam melhorar os seus jogos. (:

Bom estudo

Próxima aula: O que me der na telha.

Sempre queria aprender Pixel Art, vamo v~e se o mseu tuto me ajuda (ainda não testei)

Parabéns!

Aguardando a proxima aula! #*Némséisétáprontóaída*#