Pixel art isométrica
A maior parte da pixel art isométrica é desenhada numa grade 2:1: linhas que andam dois pixels para o lado a cada pixel para cima. Não é isometria verdadeira, e isso é de propósito.
O que é
Jogos isométricos mostram o mundo de cima e de lado, ao longo de uma diagonal, sem perspectiva: linhas paralelas continuam paralelas e o que está longe não fica menor. Os pisos viram losangos, e as paredes saem em duas inclinações iguais.
Na projeção isométrica verdadeira, essas inclinações ficam a 30° da horizontal. A pixel art quase sempre usa uma inclinação um pouco mais plana, em que cada linha anda dois pixels para o lado e um pixel para cima. Essa inclinação tem cerca de 26.6°, e costuma ser chamada de isométrica 2:1 (a rigor, é uma projeção dimétrica).
Por que 2:1
Numa grade de pixels, uma linha só parece limpa quando seus degraus se repetem por igual. Uma linha 2:1 é uma escada perfeita: dois pixels, degrau, dois pixels, degrau. Uma linha de 30° não tem um padrão simples assim e sai como sequências irregulares de um e dois pixels, o que parece serrilhado.
2:1 também simplifica os tiles. Um tile de piso é um losango duas vezes mais largo que alto, por exemplo 32×16 ou 64×32, e os tiles se encaixam sem espaços.
Os ângulos de câmera
Se você renderiza a partir do 3D, a câmera deve ser ortográfica (sem perspectiva), girada 45° em volta do modelo para olhar ao longo de uma diagonal, e inclinada 30° para baixo. Com essa inclinação, um tile quadrado do piso se projeta num losango exatamente duas vezes mais largo que alto, então as bordas do piso caem em linhas 2:1 limpas. Uma inclinação mais íngreme ou mais plana dá outras proporções, que não se alinham tão bem.
Erros comuns
- Pixels dobrados nos traços. Uma linha 2:1 deve ter exatamente dois pixels por degrau. Sequências de três, ou pixels empilhados no degrau, deixam as bordas grossas.
- Misturar ângulos. Um prédio em 2:1 e outro com inclinação mais íngreme quebram a grade.
- Esquecer a altura. As arestas verticais continuam verticais. A altura numa grade 2:1 é medida em pixels inteiros; escolha quantos pixels de altura tem um metro e mantenha.
- Câmeras em perspectiva. Renderizar com perspectiva faz as linhas convergirem, e os tiles deixam de se encaixar.
Como desenhar à mão
- Desenhe um losango de tile em linhas 2:1, por exemplo 32×16.
- Construa os objetos como caixas nessa grade: topo em losango, laterais verticais.
- Sombreie os dois lados visíveis de forma diferente: um iluminado, um na sombra.
- Mantenha toda borda inclinada na escadinha 2:1.
- Desenhe os personagens nas quatro direções diagonais primeiro; adicione as outras quatro se precisar.
Como o Pixor faz
No Pixor, cada lado é uma câmera. A vista isométrica usa uma configuração 2:1, e você também pode escolher vistas lateral, de três quartos ou de cima, ou definir qualquer inclinação. Anéis de 4, 8 ou 16 câmeras dão cada direção. Com um Pixels/m fixo nas câmeras, construções, objetos de cena e personagens são renderizados em proporção na mesma grade.
Relacionados
- Tamanhos de sprite: tiles e personagens
- Contornos
- Direções e o manual de cena
Perguntas
Por que a isometria em pixel art é 2:1 e não 30 graus?
Uma linha de 30 graus numa grade de pixels dá uma escada irregular. Uma linha 2:1, de cerca de 26.6 graus, repete dois pixels para o lado e um para cima, então fica limpa.
Que ângulo de câmera dá a isometria 2:1?
Olhe ao longo de uma diagonal (45 graus de rotação) e para baixo a 30 graus, com uma câmera ortográfica. A grade do piso então é desenhada em linhas 2:1 limpas.
De quantas direções personagens isométricos precisam?
Normalmente 4 (as diagonais) ou 8. Muitos jogos renderizam 4 ou 5 e espelham o resto.
Leia a seguir
Experimente no seu próprio modelo, grátis no navegador, ou adquira a versão completa.
Testar no navegador Obter o Pixor