PixelArt
Essa 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í).
Para esse tutorial vai ser usado o paint. Recomendo abrir o paint e ir seguindo o tuto.
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:
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 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:
Em teoria, o angulo para uma isometria seria de 30º, mas se nós formos desenhar dessa maneira 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:
Começando a criar
Ok, agora você já sabe desenhar um quadrado, 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.
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
Problema… As imagens simplesmente não juntam. Reparem que para corrigir isso nós simplesmente juntamos o contorno delas!
Pronto!
Abaixo um exemplo de transformação de uma imagem 2D em uma imagem isométrica:
Ainda falta um ponto de pixel art isométrico que existe. Para fazer as quinas é melhor desenhar elas com 3 pixels ao invés de 2 pra poder desenhar uma linha do meio sem que tenha problema de divisão:
Iluminação
Iluminaçáo é muito importante em representações visuais de um objeto 3D em algum plano 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 já que isso é o que diferencia uma imagem bem composta e complexa do que uma mais simples.
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 quina 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?
), 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.
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 geométricas é 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 e depois uma imagem equivalente só com os traços:
Não tem todos os contornos, 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
Observando e treinando bem, você pode criar coisas incríveis.
Agora vou deixar vocês liberarem sua criatividade.
Boa sorte
Tutorial retirado de PDJBlog
Adaptado por mim mesmo
Agora é sua vez
Tutorial de Pixel Art Isométrico
0
Modo Linear
