PDJBlog

Voltamos com a segunda parte de Pixel art isométricos.

Nessa segunda(e última) parte serão abordados: iluminação, outras formas geométricas e criação de tiles. Eu acabei atrasando bastante o texto, desculpa aê pessoal! (mas é que essas imagens são complicadinhas de fazer ¬¬). Para entender esse texto você tem que ter lido o primeiro texto da série. Espero que gostem

Iluminação

Iluminaçáo é muito importante em representações visuais de um objeto 3d em alguma mídia 2d por vários motivos e um deles é que a iluminação dá a sensação de profundidade. Nos nossos pixels isométricos isso é mais do que válido, já que se não diferenciarmos pelo tom da cor aonde que uma fonte de luz vem, nós nunca saberemos o quão 3d aquilo é(sem contar que não parece real mesmo). Com um exemplo fica mais fácil de acompanhar:

Ou seja, a imagem fica sem uma profundidade aparente, e nós só achamos que ela pode ser 3d por causa da perspectiva usada com isometria. Mas se nós fossemos rotacionar o “cubo” para a direita ficaria algo assim:

Um plano! Tudo bem que eu forcei um pouco, mas a idéia é que se nós não sabemos se isso é 3d ou não, é como ver algo sem luz nenhuma! Nós só veriamos a silhueta em 2d já que a luz é que diferencia a pronfudidade algum objeto. Mas agora vamos ver como nós fazemos para que nosso cubo fique 3d.

Tudo depende de onde a luz está vindo. Geralmente em imagens isométricas que eu vejo pela internet as fontes de luz são muito simples e as pessoas geralmente variam com 3 tons de cor. Mas a ideia é mais ou menos a seguinte: Se a luz está vindo da direita, a direita será mais clara, se a luz está vindo da esquerda, a esquerda será mais clara.. e por aí vai.

Veja que a luz está vindo do canto superior esquerdo, então a parte de cima é mais clara e a parte da esquerda é um pouco mais escura(mas nem tanto) e a direita é a mais escura de todas já que a luz não atinge lá tanto quanto os outros 2 lados.
Você pode usar outras fontes de luz também e fontes de luz com outras cores, isso é um assunto meio avançado mas se você quiser saber mais sobre o assunto eu recomendo procurar na internet ou em livros já que isso é o que diferencia uma imagem bem composta e complexa do que uma mais simples(geralmente as dos jogos são mais complexas).

Outras formas geométricas

Bom, essa parte é importante já que eu creio que você não queira ficar fazendo imagens que pareçam cubos pintados, certo?
A idéia aqui é aprender a criar outras formas que não sejam o cubo e depois aprender a juntá-las.

Primeiro vamos ver rampas. Para se criar uma rampa primeiro faça um cubo, depois ligue a extremidade superior do cubo com a inferior, dependendo da distância que você deseja, exemplo:

Muito fácil né? Agora vamos as pirâmides! Elas são bem fáceis também, a idéia é que você tem um quadrado e tem que ligar as extremidades do quadrado no centro, assim:

Tenho uma observação quanto as pirâmides, observe bem que o quadrado que eu usei tem a base de 3 pixels. Se eu não fizesse assim ficaria difícil achar o meio e a pirâmide iria sair irregular.

Agora vamos aos triângulos. Os triângulos são importantes já que qualquer telhado é basicamente um triangulo meio oco(entenderam? :P), então se você quiser aprender a fazer casas siga o exemplo:

Essa imagem serve para mostrar que para se fazer um triângulo numa perspectiva isometrica é o mesmo processo de uma perspectiva normal, ou seja, faz uma linha na horizontal e a partir do meio puxa as 2 linhas da extremidade pra cima.

Agora as coisas complicam um pouco, mas é só prestar atenção. O que eu fiz aqui foi um triângulo comum e eu repliquei ele ao longo de um retângulo, com isso eu liguei a parte de cima e fiz algo meio parecido com um telhado.
Percebam que existem 2 casos, isso nada mais é do que o tamanho da base do retângulo, ou seja, quando a base for muito grande(o caso 2) você terá que desenhar o lado direito do “telhado” que fica escondido no caso 1.

E por fim, os cilindros. Para se fazer cilindros se segue a mesma idéia dos triângulos, é como se fosse desenhando em uma perspectiva normal para depois passar pra uma perspectiva isométrica:

Tem também as esferas, mas como as esferas são uma figura que independente do ângulo são desenhadas da mesma maneira(um circulo!) eu não desenhei aqui, a única coisa a se prestar atenção na construção de uma esfera é aonde a fonte de luz está atingindo para colorir direito parecendo realmente uma esfera.

Como juntar as figuras geometricas é algo bastante simples e intuitivo. Basicamente é como se fosse brincar de lego ou aqueles brinquedos de criança que tem várias formas e simplesmente juntar! Aqui vão exemplos tirados de jogos onde eu tirei uma screenshot e depois fiz uma imagem equivalente só com os traços:

Eu num fiz todos os contornos(deu preguiça :P), mas dá pra ver que se a textura for tirada da imagem, o que sobra são as formas geométricas, tente observar quais são as formas geométricas dessa imagem aqui:

http://pixeljoint.com/pixelart/13806.htm

Uma coisa interessante a se observar é que nos jogos nem sempre os traços são simétricos(o do Megaman por exemplo), isso acontece porque em alguns jogos devido o engine isométrico utilizado, nem sempre alguns objetos são colocados de acordo com as posições do tamanho do tile. Por exemplo, se o programador criou um engine que coloca os tiles a cada 14 pixels, então é esperado que os objetos(o armário, o tapete, a cama, etc) também sejam colocados a cada 14 pixels, ou seja, eles também seriam tiles. Mas em alguns engines de tiles existe uma diferença aonde o tile é colocado(no caso seria fixo, de 14 em 14) e aonde os objetos são colocados. Nesse caso os objetos podem ser botados na posição onde o artista quiser, isso acontece pra dar uma maior mobilidade ao artista fazendo com que a imagem fique mais dinâmica e não pareça um monte de tiles juntos.

Tiles isométricos

Bom, a criação de tiles isométricos é razoavelmente diferente da criação de tiles para jogos com perspectiva top-down(que nem aqueles RPGs de Snes). Isso acontece devido ao fato de que em isometria a profundidade de onde os tiles estão importa, e nós queremos que pareça um ambiente em 3 dimensões, então temos que levar algumas coisas em consideração.

Primeiro vamos fazer um tile comum na perspectiva top-down:

Agora, como nós fizemos acima na criação de formas geométricas, vamos mudar a perspectiva do quadrado e assim temos um tile isométrico:

Certo, agora você tem um tile que representa uma grama, você poderia usar a mesma técnica para criar coisas simples sem dimensão no eixo Y, os chamados tiles de terreno, por exemplo: água, areia, tapete, ladrilhos, etc. Mas para nós criarmos algo como por exemplo uma casa é mais complicado em tiles isométricos do que na perspectiva top-down, pois nela para fazer isso nós simplesmente separamos os vários tiles para que quando nós formos juntar eles, eles se tornem uma casa:

Mas em isometria isso não acontece, devido ao fato da pronfudidade. Isso significa que quanto mais o tile está embaixo, mais profundo ele é, mais perto da visão do jogador ele está, então não teria como o programador fazer coisas como esconder o jogador atrás de uma parede, veja bem:

É até possivel criar tiles para se desenhar uma ilustração isométrica dessa maneira(em algum engine tipo Rpg Maker), mas para jogos isso não seria útil por causa dessa colisão. Para se criar paredes ou “coisas altas” precisa que o programador ajuste o engine para que ele aceite “tiles de objeto”. A diferença de um “tile de objeto” isométrico é que nós construimos o tile do tamanho da base que todo tile isométrico tem, mas a diferença é que verticalmente o tile pode ultrapassar o limite permitido em um engine de tiles convencional:

Ou seja, para fazer uma casa, nós simplesmente juntariamos os tiles como se fosse na perspectiva top-down, mas devido a profundidade da visão isometrica e de que os tiles são desenhados no mapa de cima para baixo, cria-se a impressão de que é 3D:

Ou seja, o importante na criação de tiles isométricos é não ultrapassar os limites da base horizontal, mas quando for desenhar na vertical não há problema.

Considerações Finais

Bom, esse é o final da pequena série(que era pra ter sido em um só artigo). Meus próximos artigos vão ser sobre programação e game design, mas como a demanda para artigos de arte/visual é grande nós vamos providenciar algo para vocês ;).