Esta é uma continuação do tutorial ortográfico e oblíquo. Não deixe de conferir se ficar confuso!

Axonométrica

Então, a lógica de adicionar a parte superior ainda é semelhante à da lateral.

../../_images/projection-cube_07.svg

Não é muito interessante. Mas fica muito mais interessante quando usamos uma projeção lateral:

../../_images/projection-cube_08.svg

Como nosso cubo é vermelho em ambas as faces e azul nos lados esquerdo e direito, podemos usar apenas cópias, o que simplifica bastante o método para cubos. Chamamos essa forma de projeção axonométrica de “dimétrica”, pois ela deforma duas retas paralelas igualmente.

A isométrica é algo como dimétrica, onde temos o mesmo ângulo entre todas as linhas principais:

../../_images/projection-cube_09.svg

A verdadeira projeção isométrica é feita com um ângulo de 90-54,736=35,264° em relação ao plano do solo:

../../_images/projection-cube_10.svg

(como você pode ver, ela não se alinha perfeitamente, porque o Inkscape, embora mais projetado para fazer esse tipo de diagrama do que o Krita, não tem ferramentas para manipular o ângulo da linha em graus)

Esse é um ângulo um pouco estranho e, além disso, não se alinha com os pixels de forma sensata, então, para videogames, um ângulo de 30° em relação ao plano do solo é usado.

../../_images/projection-cube_11.svg

Certo, então vamos fazer uma figura isométrica do nosso menino.

Criamos um novo documento e adicionamos uma camada vetorial.

Na camada vetorial, selecionamos a ferramenta de linha reta, iniciamos uma linha e, em seguida, pressionamos a tecla Shift para ajustá-la aos ângulos. Isso nos permitirá criar uma configuração de 30° como a mostrada acima:

../../_images/projection_image_15.png

Em seguida, importamos alguns quadros da animação via Camadas ‣ Importar/Exportar ‣ Importar camada.

Em seguida, recorte-o configurando a ferramenta de corte para Camada e use Filtros ‣ Cores ‣ Cor para alfa… para remover qualquer fundo. Também configurei as camadas para 50% de opacidade. Em seguida, alinhamos os vetores a elas:

../../_images/projection_image_16.png

Dica

Para redimensionar um vetor, mas manter seu ângulo, basta selecioná-lo com a ferramenta de manipulação de formas (a seta branca), arrastar os cantos da caixa delimitadora para começar a movê-los e, em seguida, pressionar a tecla Shift para restringir a proporção. Isso permitirá que você mantenha o ângulo.

A imagem inferior é “a parte de trás vista de frente”, usaremos isso para determinar onde a orelha deve ficar.

Agora, obviamente temos muito pouco espaço, então selecione a ferramenta de corte, selecione Imagem e marque Crescer e faça o seguinte:

../../_images/projection_image_17.png

Crescer é uma maneira mais prática de redimensionar a tela em largura e altura imediatamente.

Em seguida, alinhamos as outras cabeças e as transformamos usando as opções da ferramenta de transformação:

../../_images/projection_image_18.png

(330° aqui é 360°-30°)

O retângulo em que trabalharemos se torna visível lentamente. Como este é um ângulo um pouco difícil de trabalhar, vamos em Imagem ‣ Girar ‣ Girar imagem e preenchemos 30° no sentido horário:

../../_images/projection_image_19.png ../../_images/projection_image_20.png

(claro, poderíamos ter girado as duas imagens da esquerda em 30°, isso serve principalmente para ser menos confuso em comparação ao cubo)

Então, fazemos alguns cortes, algumas limpezas e adicionamos dois assistentes paralelos, como fizemos com a projeção ortográfica:

../../_images/projection_image_21.png

A ideia aqui é desenhar linhas paralelas de ambos os lados para encontrar pontos na área de desenho. Você pode usar as visualizações dos assistentes para manter as coisas organizadas, mas eu desenhei as linhas mesmo assim para sua conveniência.

../../_images/projection_image_22.png

O melhor é fazer alguns pontos de amostragem, como nas sobrancelhas aqui, e então desenhar a sobrancelha sobre eles.

../../_images/projection_image_23.png

Axonométrica alternativa com a ferramenta de transformação

Agora, há uma maneira alternativa de chegar lá que não exige tanto espaço.

Abrimos nossa projeção ortográfica com Abrir documento existente como documento sem título para não salvar sobre ele.

Nosso isométrico seguro para jogos tem um ângulo de dois pixels na horizontal e um pixel na vertical. Portanto, distorcemos os gráficos ortogonais com máscaras de transformação para -0,5/+0,5 pixels (isso é proporcional).

../../_images/projection_image_24.png

Use a grade para configurar duas réguas paralelas que representam ambas as diagonais (você pode encaixá-las com o atalho Shift + S):

../../_images/projection_image_25.png

Adicione também à vista superior:

../../_images/projection_image_26.png

se você fizer isso para todas as fatias, obterá algo assim:

../../_images/projection_image_27.png

Usando as réguas paralelas, você pode então descobrir a posição de um ponto no espaço tridimensional:

../../_images/projection_image_28.png

Como você pode ver, esta versão parece mais 3D e mais assustadora.

Isso ocorre porque há menos etapas envolvidas do que na versão anterior. Estamos derivando nossa imagem diretamente da vista ortográfica, então há menos erros envolvidos.

O aspecto assustador se deve ao fato de termos estilizado um pouquinho a nossa vista lateral, então os olhos ficaram ENORMES. Isso ocorre porque, ao estilizar a vista lateral de um olho, tendemos a desenhá-lo não perfeitamente de lado, mas sim ligeiramente inclinado. Se você olhar atentamente para o toca-discos, o mesmo problema surge lá também.

Geralmente, coisas estilizadas tendem a desmoronar na visualização 3D, e você pode precisar fazer algumas escolhas sobre como fazê-las funcionar.

Por exemplo, podemos facilmente corrigir a vista lateral (porque usamos máscaras de transformação, isso é fácil).

../../_images/projection_image_29.png

E então gerar um novo desenho a partir disso…

../../_images/projection_animation_02.gif

Compare com o antigo e você verá que os olhos do novo resultado são muito menos assustadores:

../../_images/projection_image_30.png

Ela ainda parece muito achatada em comparação à projeção paralela regular acima, e pode ser uma ideia não apenas inclinar, mas também esticar um pouco os ortos.

Vamos continuar com a projeção em perspectiva no próximo tópico!