Ilustração digital: criando cenários isométricos para games

A base - Apresentação

Olá, galera! Meu nome é Rainer Petter, sou ilustrador e quadrinista, e esse é o curso de cenário isométrico para jogos. Essa imagem que vocês estão vendo, esse cenário complexo, seguindo essa perspectiva isométrica é o resultado final do que vamos aprender nesse curso, esse é o tipo de imagem que vamos produzir.

Para chegar nesse resultado nós produzimos várias peças menores, que são essas apresentadas. No total dá mais de 150 peças que vamos fazer e, no final, vamos montá-las, inclusive, casas, visão interna, externa. No final vamos montá-las. Eu vou ensinar como criamos essas peças, de modo que elas encaixem uma do lado da outra sem aparecer as emendas, elas encaixem perfeitamente.

Vamos entender como funciona a questão da iluminação delas, como trabalhar com os tamanhos de cada uma, variações de cor, essas plantas, por exemplo, têm várias cores diferentes. E esse é o resultado final que vamos ter, nesse curso.

Vale a pena lembrar que esse curso de cenário isométrico para jogos faz parte de toda uma carreira de desenvolvimento visual de um jogo isométrico, então temos o primeiro curso, caso você não tenha feito, onde eu passo uma introdução, eu ensino como trabalhamos com esse tipo de perspectiva, como fazemos linhas retas, linhas curvas, seguindo essa perspectiva isométrica.

Depois temos o curso, também, de mapas isométricos para jogos, onde vamos desenvolver mais, entender como funciona o mapa, já seguindo essa perspectiva, e, logo em seguida, o terceiro curso dessa carreira é esse de cenários isométricos. Dependendo do momento em que você estiver fazendo esse curso, dá uma conferida, porque vão ter mais cursos seguindo e continuando isso.

Então esse curso é, eu diria que, intermediário, em relação à dificuldade, é bom que você tenha um conhecimento de desenho, um certo conhecimento de pintura. Então caso você nunca tenha desenhado nada do tipo, nesse tipo de perspectiva, não tenha pintado nada com esse nível de estilização e realismo, ou algo parecido, dá uma conferida nesses outros cursos que vai te ajudar bastante.

Então esse é o resultado final do nosso curso, espero que vocês gostem, é um curso feito com bastante carinho. Vamos lá.

A base - Overview

Bem, galera, agora que vocês já viram o conteúdo que vamos ver no curso, por alto, eu vou mostrar mais à fundo cada um dos elementos que vamos aprender a fazer. Essa é a cena final, o resultado final que vamos ter na última aula, onde vamos montar com todas as peças que vamos ter feito. As peças são essas apresentadas.

Primeiro vamos fazer terras. Olhando de perto é uma coisa bem simples, mas a complexidade está em conseguirmos criar uma textura, uma coisa bem sutil, de modo que uma peça encaixe na outra perfeitamente.

Então todas essas peças podem encaixar uma do lado da outra, sem que a borda fique visível, e elas têm texturas e cores diferentes, assim conseguimos criar uma textura mais rica, por isso tem tudo igual, tudo montado, na cena, não vai ficar tudo repetitivo demais, criamos uma variação de tipos de terra.

Em cima da terra vamos fazer algumas pedras, também. Vamos fazer 5 pedras diferentes, matos e plantas. Observe como tem toda uma variação, também, que vamos fazer, de tamanhos e cores diferentes, algumas plantas com flores para compormos essa cena. Então é interessante criarmos essas variações de cores para a cena final não ficar tão repetitiva.

Observe, de gramas nós temos 3 cores diferentes. Tem essa grama média, digamos, um verde mediano, e tem um verde mais escuro e um verde mais claro para criarmos essa variação nos tons da grama.

Observe como tem várias peças de formatos diferentes, porque vamos criando isso de modo que consigamos encaixar uma peça na outra e formar toda essa variedade de formatos que temos. Conseguimos fazer curvas, ficam umas quinas, que é uma característica dessa perspectiva isométrica, mas conseguimos fazer toda uma variação de formas e cores, também.

Observe como que, próximo da água, eu coloquei um tom de verde mais escuro, e mais distante, talvez, uma aparência um pouco mais seca, um tom de verde diferente. Com essas peças conseguimos criar todos esses formatos, essas possibilidades.

A mesma coisa fazemos com a água. Observe, temos uma base original da água, essa assinalada – observe a textura da água – que se encaixa perfeitamente com as outras, sem criar nenhum tipo de ruído, não vemos as bordas quando a água está encaixando. Observe, vemos no meio e não conseguimos falar onde começa e onde termina cada peça, elas se encaixam perfeitamente. Vamos aprender a fazer isso, que é uma coisa muito importante.

Também, essas bordas, as margens da água, com essas ondas, para encaixarmos e distribuirmos de acordo com o formato do rio ou do lago que vamos fazer.

A mesma coisa fazemos com esse pavimento de pedra. Também tem várias opções de encaixe. As árvores não seguem esse padrão de encaixe, uma do lado da outra, mas temos que criar uma variação entre elas, então vamos fazer cinco tipos diferentes de árvores, de tamanhos, cores e formatos diferentes.

Para finalizar, vamos fazer essas três casas. Essas duas primeiras que seguem, mais ou menos, o mesmo tamanho da base, então para essas duas vamos ter esse mesmo visual interno, também vamos desenvolver isso, e essa casa maior, que é um pouco maior em baixo, além de ser mais alta.

Vamos utilizar como base esse primeiro elemento, para criar os outros. Inclusive, vamos fazer, primeiro, essa casa mais simples, para podermos usá-la como base para criar as outras.

Isso é uma coisa que, na perspectiva isométrica é muito prático, podemos utilizar um elemento para criar outro, porque por mais distante, mais para o alto, mais para baixo que esteja o elemento, ele não muda de tamanho, não seguimos aquela perspectiva com pontos de fuga, onde quanto mais longe, menor é um elemento. Não, está tudo mais ou menos do mesmo tamanho.

Então eu posso pegar essa árvore que está bem no centro e posso colocá-la em baixo, ou em cima, é só arrastar. Eu posso duplicar para construir as casas, como eu estava falando, podemos pegar a janela de uma casa, arrastar, e colocar numa outra, posso pegar o telhado de uma e colar na outra, não tem problema, porque a perspectiva não altera o tamanho dos elementos.

Isso é um recurso bem interessante para trabalharmos com a perspectiva isométrica.

Então é isso que vamos ver nesse curso, vamos aprender bastante coisa. Vocês estão vendo que vamos fazer muitos elementos, então é um curso bem completo. Relembrando, caso você sinta alguma dificuldade na parte do desenho, na parte da pintura, em si, temos vários outros cursos que podem te ajudar, é só dar uma pesquisada na plataforma da Alura. Então é isso, vamos lá.

A base - Briefing

Beleza, galera, vamos começar, então, o nosso cenário isométrico, analisando o briefing do cliente. Então já temos uma imagem, a descrição daquele trabalho que vamos fazer, que é bem a simulação de um trabalho real, onde o cliente passa uma ideia, manda um texto falando o que ele quer e também manda algumas imagens de referência.

Eu tenho o que seria o briefing do nosso cliente, nessa situação. Primeiramente está pedindo “Precisamos dos seguintes tiles para o cenário de jogo isométrico”, tiles são as peças. Então vamos fazer várias peças seguindo essa perspectiva isométrica, e elas se encaixam, se montam para formar esse cenário que vamos fazer nesse curso.

Precisamos dessas peças de quê? Precisamos de terra, de pedras, matos, gramas, vários formatos que se encaixam, pavimento de pedra. Então vai ter uma parte de pavimento, no chão, com pedras, como se fosse uma rua ou algo assim, água de bordas e interiores do rio. Então vai ter um rio que vamos fazer e vamos fazer as peças para encaixar tanto nas bordas do rio, quanto na parte de dentro, são formatos diferentes.

Também vamos precisar de árvores, 3 variações, vamos fazer uma árvore e a partir dela vamos fazer mais duas variações, então vamos ter 3 árvores diferentes no nosso cenário, e casas, também da mesma forma, vamos fazer uma casa inicial e a partir dela vamos fazer mais duas imagens, para termos 3 diferentes na nossa cena.

Então tem essas imagens de referência. Eu peguei um arquivo, uma imagem, porque geralmente é assim que os clientes enviam os briefings, acontece bastante, uma parte em texto e outra parte de imagem. Mas nesse arquivo eu tenho, também, as imagens em alta resolução dos exemplos que ele mandou.

Esse arquivo, lembrando, vocês podem ver que tem uma janela suspensa, que é um arquivo do programa Pureref. Vou deixar embaixo o link do para vocês baixarem caso vocês não tenham ainda, porque é o mesmo arquivo que usamos nos cursos anteriores de cenário isométrico, de mapa isométrico, também nos cursos mais introdutórios, a perspectiva isométrica.

O mesmo programa que utilizamos bastante, em outros cursos, também, utilizo no trabalho de ilustração, que é o Pureref, que é um programa em que soltamos as imagens dentro dele e vamos trabalhando com elas. Então vai ter o link para vocês baixaram, “pureref.com”, o site. Ele é gratuito e também tem a opção, caso vocês queiram, de fazer uma doação para os criadores.

Temos as imagens de exemplo que o cliente nos passou, numa resolução um pouco melhor. Essa é, mais ou menos, como vai ser essa cena que vamos montar no final, vamos ter várias peças se encaixando e formando uma cena. Temos peças de terra. Uma peça de terra. Porque só tem uma peça de terra? Porque vamos duplicá-las, vamos colocar várias, uma do lado das outras, e vai formar todo o chão de terra.

Por isso é muito importante que essas peças se encaixem e não fique visível a borda de encaixe delas, senão fica estranho. Temos que fazer essas texturas, de modo que elas se encaixem sem ficar aparente aquela borda. O termo que a galera costuma usar é “textura seamless”, e é um tipo de textura que vamos fazer, logo na próxima aula, porque é algo muito importante para irmos trabalhando no decorrer do curso.

Vamos saber como fazer essas texturas se encaixar uma do lado da outra, como criar uma textura que podemos ir duplicando e colocando uma do lado da outra sem que as bordas fiquem aparentes, tanto para os lados quanto para cima e para baixo, também. Vamos aprender a fazer isso já na próxima aula.

Então o chão vai ser isso, a terra que vamos fazer embaixo. Em cima dessa terra vamos fazer os outros elementos. Vamos fazer a grama, vamos fazer as pedras. Observe que interessante essa grama, vemos que tem vários formatos. Nós temos a textura seguindo a perspectiva isométrica, por exemplo, esses 4 pontos são um tile, uma peça desse quebra-cabeça que montamos.

Essa outra grama só tem pontos, outra está envolta todos os lados, mas o meio está vazio, outra tem dos lados, mas tem um lado vazio, e no meio também, porque elas vão se encontrar e formar essa estrutura apresentada.

Observe, essa assinalada é uma grama que foi colocada sobre a terra. Tem grama de um lado e do outro, e só tem um lado vazio e esse vazio forma essa estrada, a estrada de terra que é o que está por baixo.

Então é transparente, vamos fazer essa base de terra e, tudo que formos fazer por cima vai ter esse vazado transparente, que vamos encaixando e montando. Por isso é importante fazermos vários tipos de gramas, porque podemos fazê-las de várias combinações diferentes – indo para um lado, para o outro, uma mais fechada, uma com a grama mais falhada. Mais abaixo nós temos as casas.

Esse é só um exemplo mesmo, não vamos fazer exatamente como está aqui, até porque nesse exemplo nós temos algo bem estilizado, nós conseguimos ver uma linha de contorno separando cada um dos tiles, das peças, e não vamos ter isso.

Vamos fazer algo um pouco mais realista, seguindo o estilo que viemos trabalhando, inclusive, no mapa do curso anterior, algo mais ou menos nesse estilo. Vocês viram no vídeo de introdução como vai ficar o resultado final.

Eu tenho mais imagens de referência, também. Observe que interessante esses tiles, essas peças, várias combinações diferentes. São imagens que eu peguei no site da Unity, mesmo, que é uma engine, um programa de fazer jogos. Na Alura nós temos vários cursos de Unity.

Nesse caso, vamos fazer o seguinte, vamos trabalhar com essas imagens num formato especifico, temos já a descrição do cliente: 128x66px. Eu já pesquisei antes, e esse é um formato bom para trabalharmos no jogo na Unity. Não vamos fazer isso, vamos focar o curso na parte de criação do visual em si, não vamos fazer nada de programação, montagem de level design, nada do tipo, vamos só criar essas peças mesmo.

Mas precisamos criá-las num formato que seja bom para uma outra pessoa vir trabalhar com isso depois no jogo. Então esse é o formato que vamos trabalhar, 128 pixels por 66 pixels.

Então essas são as referências, dá para vocês entenderem bem. Uma coisa importante: quando estamos trabalhando com cliente e você tem qualquer tipo de dúvida nesse estágio, sempre pergunte, tire as dúvidas antes de começar o trabalho, de fato, para você não precisar ficar refazendo coisas.

Então é isso que vamos fazer, vamos pegar essas imagens como exemplo e o que precisamos fazer é isso que está pedindo no briefing. Vamos fazer várias peças de terra, mato, pedra, grama, pavimento de pedra, água, vamos ter um rio, árvores e casas, e, no final, vamos ter todos esses tiles, essas peças separadas, cada um em um arquivo no formato PNG, transparente no fundo, nesse formato 128x66px.

E também precisamos montar uma cena com todos eles aplicados, que é algo semelhante com essa cena montada, aliás, nessa outra imagem está com a resolução melhor, algo semelhante a isso.

Agora, já na próxima aula, no próximo vídeo, eu vou mostrar para vocês como criamos essas texturas que podemos empilhar uma do lado da outra, sem ficar com as bordas aparentes.

Sobre o curso Ilustração digital: criando cenários isométricos para games

O curso Ilustração digital: criando cenários isométricos para games possui 203 minutos de vídeos, em um total de 46 atividades. Gostou? Conheça nossos outros cursos de Ilustração Digital em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• A base
• O solo
• Elementos do cenário
• Casa
• Cenário complexo