Pixel art isométrico – parte 1

Autor: Thiago Valle

Esse texto trata sobre como fazer desenhos isométricos no computador. É um texto bem introdutório que só contém a base de isometria em pixel art. O texto ficou com muita teoria(bem mais que os outros tutoriais encontrados por aí). Decidi fazer dessa maneira já que as pessoas que trabalham, ou querem trabalhar com jogos tem que saber o que estão fazendo e não podem se prender a uma só técnica.

Recomendo que você abra o paint e vá desenhando de acordo com o texto para uma melhor compreensão. Bom estudo 😀

O que é Pixel Art isométrico?

Pixel Art como muitos já sabem é a técnica utilizada para fazer desenhos no computador, pixel-a-pixel. Isometria já é um pouco mais complicado mas estamos aqui justamente pra isso :)

Isometria nada mais é do que uma maneira de reproduzir imagens em 3 dimensões em ambientes de 2 dimensões onde os ângulos entre 2 eixos são iguais a 120º. Ok, eu falei que ia ser fácil hehehe, então aqui vai uma imagem pra ilustrar o que eu tô falando:

Um cubo :)

Ou seja, em uma imagem isométrica os 3 eixos são desenhados com os mesmos ângulos, por isso o nome isometria(iso de igual, metria de medida). Não se preocupe porque essa parte matemática de isometria é mais importante pra criaçao de tiles complexos ou outras construções diferentes, nesse texto eu vou me focar em falar da parte mais simples, sem a matemática toda, o que já é suficiente pra criação de imagens satisfatórias.

Notem na imagem, que quando uma linha sai da horizontal, ela vai subindo com 1 pixel na vertical e 2 na horizontal, dessa forma:

Como fazer uma linha

Em teoria, o angulo formado seria de 30º, mas se nós formos desenhar dessa maneira e sem anti-aliasing os pixels ficam quebrados e com uma aparência meio estranha, então adotou-se esse esquema de desenhar 2 pixels a cada subida na vertical que na verdade forma um ângulo de 26.565º. Resumindo tudo, pra desenhar um quadrado em pixel art nós podemos seguir os seguintes passos:

Como desenhar um quadrado

Os vários tipos de pixel art isométrico

Ok, agora você já sabe desenhar um quadrado que é igual a um tile, agora é só pintar dentro juntar e pronto! Você tem um lindo chão pra um cenário, mas como a vida não é bela e sempre aparece um problema, as coisas não são bem assim. Quem tentou desenhar coisas mais complexas no paint(ou o software que você preferir) enquanto lia o texto pode ter notado alguns problemas na hora de juntar os quadrados. Vou explicar aqui algumas maneiras para contornar isso e principalmente quando contornar isso.

Para quem não tentou desenhar, o problema é mais ou menos o seguinte:

Primeiro nós desenhamos três quadrados

Depois nós tentamos juntar os três como se fossem tiles

Problema… As imagens simplesmente não juntam. Reparem que para corrigir isso nós poderiamos juntar o contorno delas

Isso realmente é uma construção possivel, mas não para tiles. Só é bom juntar o contorno de dois quadrados quando eles não forem tiles, geralmente se faz isso para criar bases para desenhos maiores, por exemplo:


Nesse caso não teve problema porque os quadrados eram vazios por dentro, e em tiles isso não acontece. Quando dentro do quadrado tem uma textura ou algo pintado(ou seja, um tile), se os contornos forem juntados vai ocorrer uma “colisão” de informações do desenho e alguma coisa vai acabar sendo apagada, por exemplo:

Existem varias maneiras de se corrigir esse problema, nesse texto eu vou falar uma das maneiras, no outro texto da série eu vou explicar com detalhes como fazer tiles. Nessa maneira de corrigir, os tiles são desenhados com 4 espaços horizontais na base, pra que embaixo caibam 2 do lado esquerdo e 2 do lado direito:

Ainda vale a pena notar outro tipo de construção de pixel art isométrico que existe. Algumas pessoas em alguns tutoriais falam que quando elas vão fazer um cubo, elas desenham o cubo com 3 pixels ao invés de 2 pra poder desenhar uma linha do meio sem que tenha problema de divisão:

Quando o cubo é desenhado com 2 pixels na base fica difícil decidir onde botar a linha pra dividir o cubo, então elas acabam criando 3 linhas pra poder ter o “meio” do cubo. Vale a pena notar que isso é não é util na criação de tiles, pois quando os cubos vão ser juntados com 3 pixels em cima e embaixo acaba tendo um problema e os pixels ficam serrilhados:

Ou seja, dependendo do motivo que você está fazendo a imagem em pixel vai importar em como você vai desenhar os quadrados. Quando o desenho é só para portfolio, não tem problema em juntar os contornos ou fazer o cubo com 3 pixels, já que o que importa é o resultado final. Mas quando os desenhos são para um jogo tem que ter em mente esse tipo de construção explicado acima(tanto no desenho quanto na programação do jogo).

Considerações finais

Com essa base já é possivel desenhar algumas coisas simples como retângulos e cubos. Por incrivel que pareça essa é a base de muita coisa de desenhos isométricos(dá até pra fazer uma casa assim!). Construindo variações de cubos é possivel desenhar um quarto, esse foi um que eu fiz em meados de 2003 mas utiliza boa parte do que eu falei aqui:

Você já pode criar coisas bem simples agora! No próximo texto eu vou ensinar construções mais complexas, tiles e outros detalhes :)

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
 

Leave a Reply

Your email address will not be published. Required fields are marked *

Email
Print