Construção de arte isométrica em vetores

 

Arte do jogo isométrico em vetores

Tutorial do Inkscape

Eu tive alguns pedidos para fazer algo isométrico recentemente. Na maioria das vezes, as solicitações são sobre personagens e animação ou elementos mais complexos como edifícios. Como sempre, tento começar um pouco mais fácil para aliviar a curva de aprendizado. Vamos criar um simples bloco de grama isométrica (como chato de mim ;) ). Dito isso, o próximo tutorial já está em andamento. Acho a arte isométrica muito divertida. Bem, é muito mais divertido agora fazê-lo em vetores, do que antigamente. Fazer com que blocos de 16× 16 pixels parecerem bons foi um desafio diferente. Especialmente quando você só tem um punhado de cores.

O que é arte isométrica?

De acordo com a projeção isométrica da Wikipédia é: "A projeção isométrica é um método para representar visualmente objetos tridimensionais em duas dimensões em desenhos técnicos e de engenharia. É uma projeção axonométrica na qual os três eixos de coordenadas aparecem igualmente menoshorados e os ângulos entre os dois são de 120 graus.

Isso é um bocado... e por favor... Não me peça para explicar... Eu só uso... ;) Basicamente é uma tentativa de fingir uma sensação tridimensional em 2D girando o chão 45 graus e ignorando a escala de perspectiva. Isso significa que os objetos não ficam menores quando estão mais longe.

Vamos começar com alguns passos básicos na projeção isométrica. Isso é quase "verdadeira isométrica", mas não completamente lá – mas muito mais fácil de lidar com o artwise.

Nota:
Com diferentes motores de jogo você pode encontrar proporções ligeiramente diferentes no que diz respeito ao dimensionamento vertical... mas o processo de criação dos elementos seria muito semelhante.

Vamos começar.

Vamos começar com um quadrado.

Gire-o em 45 graus.

Dimensione a altura para metade do tamanho.

Duplique a forma e selecione os dois nós na parte superior e direita.

Mova esses dois nódulos para a esquerda e para baixo para conectar-se à forma inferior.

Duplique a forma superior novamente e selecione o nó esquerdo e superior desta vez.

Mova esses nódulos para baixo e para a direita para conectar ao lado direito da forma inferior.

Isso cria o cubo base.

Vamos adicionar um pouco de cor e determinar a direção da luz.

Escolhi uma fonte leve no canto superior direito. Como resultado, a parte superior é mais leve e o lado esquerdo mais escuro.

Adicione um pouco de decoração com alguns círculos deformados (mantenha a escala 1/2 em mente) e alguns triângulos com um gradiente de cores.

Crie variações dos blocos para torná-lo menos repetitivo. Normalmente, funciona bem simplesmente reorganizar as formas de decoração.

Ao criar mais blocos (por exemplo, um bloco de grama pura) permitirá que você varie o terreno que você pode construir com suas telhas.

 

Para a minha pequena cena eu adicionei uma árvore rápida – com um par de círculos (mantendo a razão de deformação de 1/2 em mente) e algumas rochas simples baseadas nos mesmos círculos – e já está começando a parecer algo que você esperaria ver em um jogo.

Conclusão

Criar telhas isométricas é um pouco mais demorado. As coisas ficam deformadas, distorcidas e esmagadas. No entanto, é um olhar atraente e vale a pena. Você pode achar mais fácil criar elementos na visão frontal primeiro. Depois, você inclina e ajusta para encaixar o ângulo. Por exemplo, em vez de desenhar uma porta para uma casa em vista isométrica, crie-a com retângulos. Uma vez feito, desvie o elemento acabado para combinar com a configuração isométrica.

Um problema principal que você encontrará ao criar cenários inteiros em inkscape com base em 'blocos isométricos' é a classificação de profundidade. Só vai parecer certo se as telhas estiverem empilhadas corretamente. As telhas mais distantes (canto superior esquerdo da tela) estão na parte inferior da pilha e as mais próximas (canto direito frontal) estão em cima das outras formas.

Colocar camadas na cena pode ser muito útil. Por exemplo, faça uma camada com telhas de água, depois os azulejos moído em cima, a decoração em uma camada acima disso.

Espero que tenham gostado deste post rápido e é um começo para a criação de conjuntos de telhas isométricas. A próxima parte deste tutorial será adereços e edifícios (e eu vou fazer personagens e animações também.).

Finalmente

Nota:
Ligar o estalo no Inkscape torna o alinhamento de nódulos na etapa 5 muito mais fácil.
Ligue a exibição de estalo/ Snap (%) para alinhar os nódulos precisamente aos outros. Na barra de botão snap há um botão para 'encaixar nódulos ou alças' (7º a partir da parte superior) e, ligando a sub-função 'snap to cusp nodes' (10º de cima) permite que você encaixe os nódulos perfeitamente.
Caso ainda não seja tão responsivo quanto você gostaria, vá para o Inkscape Preferences (Shift+Ctrl+P) e mude o peso para o snapping lá.

---