Ilustração digital: criando assets para cenários de jogos isoméricos

Preparando o terreno - Apresentação

Olá, galera. Meu nome é Rainer Petter, sou ilustrador e quadrinista. Esse é um curso de assets para cenários isométricos. Vamos criar todos esses assets, essas peças que vocês estão vendo. Tanto para cenas internas quanto para cenas externas de um cenário. E aplicaremos elas nos cenários que já fizemos no curso anterior.

Já temos um curso de desenvolvimento de cenário isométrico. Caso você não tenha feito esse curso, eu recomendo. Dá uma pesquisada porque durante este curso eu faço muitas referências ao curso anterior. É uma continuação. Vamos fazer todas essas peças e aplicá-las no cenário que desenvolvemos no curso anterior.

Vamos ver que nessa cena externa que já tínhamos feito, agora ficou muito mais complexa. Criamos vários elementos, toda essa plantação com vários tipos de vegetais. Fizemos tablados no rio, um poço de água, baú, barril e também muito do que vamos fazer neste curso são as cenas internas das casas que desenvolvemos no curso anterior. Tínhamos feito só parede e chão, mas fizemos todos os móveis para colocarmos nos três tipos de casas diferentes.

Mesas, cadeiras, sofás, decoração, a parte da cozinha, escritório e tudo o mais. Então esse é o resultado do que vamos aprender neste curso. Relembrando que caso você não tenha feito o curso anterior de desenvolvimento de cenários isométricos, vale muito a pena fazer porque faço muita referência. Inclusive, vamos utilizar o resultado do curso anterior e aplicar neste projeto.

Caso você já tenha realizado o curso anterior, já tenha feito o seu cenário, mantenha o cenário que você desenvolveu que agora com este curso ele vai ficar muito mais complexo, com muito mais elementos tanto na cena externa, quanto nas cenas internas das casas. É isso. Um curso feito com muito carinho. Espero que vocês gostem.

Vamos lá?

Preparando o terreno - Overview

Oi galera, vamos ver mais a fundo todo o conteúdo que vamos aprender neste curso. A primeira coisa que vamos fazer serão os assets de terra arada que é essa terra para o solo. É bem-parecido com o que já fizemos no curso anterior na parte de terra, vamos deixar só uma textura um pouco mais escura para ela se encaixar bem.

E vamos fazer algumas bordas também. Em alguns lugares coloquei algumas curvas para não ficar tudo reto demais. São essas bordas aqui. Temos ali algumas bordas para encaixarmos na terra e aí não temos ela totalmente reta, porque fica meio estranho também reto demais.

A primeira coisa que vamos fazer é essa terra daquele jeito de textura seamless, sem bordas que se conectam às outras. Depois vamos fazer o espantalho e todos os outros elementos externos. Uma coisa importante: o espantalho é um bom exemplo, ele precisa ser simples e não pode ser complexo demais, porque senão a cena não vai funcionar tão bem. Não vamos conseguir interpretar o que está nele.

Então vamos fazer vários elementos que são pequenos, mas a iluminação precisa estar funcionando. O importante é a iluminação estar funcionando. Vocês vão ver que vou reforçar isso bastante durante o curso. Não precisamos colocar detalhes demais. Se a iluminação está funcionando, a leitura vai estar legal. Se tentarmos colocar detalhes demais em elementos muito pequenos, não vai dar certo.

Os vegetais são o seguinte: cada um terá quatro estágios de crescimento. Até coloquei eles alinhados. Vai ter a semente, o broto, ele vai crescer, vai ter um fruto, no caso uma pimenta, um milho ou a cenoura, o trigo. Mas todos vão ter esses quartos.

O quarto seria o momento da colheita. Vamos pensar que o jogador vai plantar essa semente e com o tempo a semente vai crescendo. Então vamos fazer todos esses estágios. Vamos fazer as cercas ao redor. Vou mostrar como fazemos para ela encaixar. Olha só, tem a cerca virada para um lado, tem a cerca virada para outro. Elas encaixam certo.

Não é a cerca inteira. Elas são peças que vão se encaixando e vamos ver como elas se encaixam também que é uma lógica diferente que utilizamos na terra que é um tile, um quadrado inteiro. Na cerca não, são peças também.

E aí vamos fazer outros elementos como os baús, os barris que inclusive eles funcionam tanto na cena interna quanto na cena externa, nas duas cenas, para o lado de dentro e para o lado de fora das casas. Vamos fazer também um poço de água com a lógica de iluminação e textura parecido com o que fizemos nas casas. Já vai ficar do lado externo. Vamos fazer esse tablado. Coloquei dois exemplos, mas vamos fazer quatro exemplos porque eles precisam funcionar em todas as possibilidades.

Seja do lado de cima do rio virado para a direita ou para a esquerda e do lado de baixo do rio virado para a direita ou para a esquerda também. Isso da cena externa. Mas boa parte do que vamos fazer são dos elementos da parte interna das casas. Vamos mobiliar todas elas. No curso anterior só fizemos o chão e a parede. Aqui temos três exemplos que são três casas. São duas casas menores e uma maior.

Vamos fazer mesa, cadeira, plantas. O baú que estava do lado de fora também funciona do lado de dentro. Partes para a cozinha, armário, alguns potes, sofá para a sala, decoração, quadros. Tudo isso vamos fazer nesse curso. No final vou mostrar para vocês como vamos montar essa cena. Temos que imaginar que o personagem, tem que lembrar que isso é para um jogo, um jogo fictício, mas temos que imaginar que é para um jogo e tem que ter espaço para o personagem andar.

Então não podemos encher tudo. Tem que ter um espaço para o personagem vir caminhando. A última coisa que vamos fazer lá no final vai ser montar isso. Então vou mostrar para vocês como montamos de modo que sobre espaço e fique levemente organizado. Precisa ter uma certa harmonia. A cozinha está no canto, tem o forno, tem o armário, aqui tem uma parte mais de escritório, uma parte mais de sala de estar no canto da direita.

Vou mostrar para vocês como montaremos isso. E esse será o resultado final do curso. Espero que vocês gostem do curso e vamos lá.

Preparando o terreno - Terra arada

Vamos começar o projeto. Essa imagem que vocês estão vendo na tela é o resultado que tivemos no curso anterior. Agora colocaremos elementos novos, acrescentaremos elementos para essa cena isométrica.

A primeira coisa que vamos fazer vai ser criar um solo arado, em que vamos colocar as plantas, igual vocês viram no vídeo de introdução do curso. E vocês podem ver que estou vendo essa imagem em um arquivo cheio de imagens que são as referências que usaremos em todo o curso. Esse arquivo está disponível para download também, junto com todos os outros materiais que vamos utilizar durante o curso.

A primeira coisa que vamos fazer vai ser esse solo arado. É o solo onde vamos colocar as plantas. Tenho alguns exemplos que peguei de outros jogos onde temos esse tipo de solo. É interessante para compararmos. Embora nenhum deles seja isométrico. Esse primeiro é do Minecraft que é 3D, o segundo é do Stardew Valley que é a visão frontal meio de cima, meio top view. E esses outros também. Um visto de cima e outro em 3D.

Mas a lógica para aplicarmos isso em uma perspectiva isométrica é a mesma. Afinal já fizemos bastante coisa na perspectiva isométrica. É bom entender só qual é a diferença desse solo para um solo normal. Olha no Minecraft como ele é mais escuro. Esse solo onde podemos plantar é mais escuro e também tem algumas linhas com a sensação de algo que foi arado com alguma ferramenta, um rastelo ou uma enxada, ou algo do tipo.

No Stardew Valley, olha como é mais escura. Tem essas áreas mais escuras. Acho interessante pegarmos o conceito dessas curvas, de não deixar tudo com quinas, reto igual está no Minecraft. O Minecraft é um jogo de cubos. Então de fato tudo tem essas quinas, faz parte do visual do jogo, da estética dele. Não fica estranho.

Já é mais interessante para o nosso jogo pensando nesse conceito isométrico. Tem algumas quinas, mas tentamos suavizar elas em alguns lugares. Podemos tentar dar uma suavizada na terra arada também. Então era um pouco mais escura. Podemos colocar esses elementos, essas linhas ficam interessantes parecendo algo que foi trabalhado, a terra trabalhada para poder receber essas plantas.

Então um pouco mais escuro. Na segunda imagem também temos essas linhas. Essa é a lógica que temos inicial para fazer a nossa terra. Vamos começar a partir da terra que já fizemos lá no curso anterior, a terra original. Tenho esse arquivo base compartilhado com vocês também. É um arquivo com uma camada com o fundo, aquele quadrado isométrico vazio. Vamos fazer essa terra.

Lembrando que ela é um pouco mais escura, vai ter um pouco mais de textura e tem que ter aquela lógica de textura seamless, textura sem bordas onde podemos conectar uma do lado da outra sem ficar aparecendo nenhum tipo de borda. Isso é muito importante e é o que já fizemos no curso anterior. Então vocês já sabem como fazer isso.

Vou mostrar para vocês. Geralmente no curso todo esse processo leva mais tempo, já tenho isso pré-gravado, dou uma acelerada no vídeo e vou mostrando para vocês como foi feito. Depois volto e vou mostrando alguns detalhes no arquivo original mesmo. Tem etapa que demora bastante tempo e precisamos para funcionar bem essa didática, o curso, precisamos das coisas mais diretas.

Então o que fiz? Primeiramente já escureci a imagem. Estava mais claro o Z, o “Hue Saturation”, o atalho "Ctrl + U". Escureci a imagem e joguei ela um pouco para o lado vermelho. Depois disso vim com o pincel maior, com textura. Lembrando que esses pincéis todos estão lá no arquivo, compartilhados com vocês. Se você fez o curso anterior, você baixou os arquivos do curso anterior, então você até já tem esses pincéis.

Um pincel bem grande com textura. Venho marcando algumas texturas maiores, algumas texturas menores. Quando preciso utilizar, olha lá em cima que estou com o pincel no modo Multiplay para escurecer a cena. Então quando estou com o pincel no Multiplay eu passo a cor ali e ela vai ficando cada vez mais escura.

Tem que tomar cuidado para não ficar escuro demais. Testando pincéis diferentes. Então é bom irmos variando também e não ficar no mesmo pincel para criar uma textura só. Usa pincéis diferentes, cria texturas diferentes até chegar em um ponto que seja interessante essa textura. Ficou legal, gostei. Olha só o que temos, algumas ranhuras, algumas linhas sugerindo essa coisa da ferramenta que falei da enxada no solo.

Tem algumas manchas escuras ali e outras. Temos que tomar cuidado para não ficar demais essas manchas escuras. Uma ou outra ainda funciona. Se ficar demais às vezes atrapalha a visualização. Sempre vamos estar comparando isso lá naquele arquivo final com a cena que já fizemos no curso anterior que é lá que vamos aplicar esse tile.

Sempre vamos fazer e vamos colocar lá para ver como fica o mesmo processo que fizemos no curso anterior. Então aquele esquema de divisão em cruz para criarmos esse tile seamless. Assim como fizemos com todas aquelas peças do curso anterior, pego a parte de baixo desse quadrado e jogo ela para cima, a de cima jogo para baixo, a da esquerda jogo para a direita, a da direita jogo para a esquerda. Fazemos essas trocas e aí depois viemos trabalhando ali no meio com a pintura para tirar essas emendas.

Esse é o segredo para termos essas peças sem emendas. Mantendo essa linha diagonal seguindo essa perspectiva isométrica. Fiz e joguei nesse outro arquivo "testes" que também está aí para vocês no pacote que vocês baixam no arquivo compactado vai vir tudo isso.

Vocês simplesmente arrastam. Pegam a camada lá, arrasta e solta nesse outro arquivo. E vou duplicando ela e encaixando para ver se está funcionando bem. Está legal. Tem alguns lugares que estou sentindo que ainda ficou. Parece que tem uma linha no meio. Tem uma área muito clara. É só suavizar um pouco disso. Vendo que não está funcionando 100%, volto no outro arquivo, dou uma trabalhada, uma pintada, tiro essas marcas que vi que não estava legal, pego o arquivo e jogo lá de novo e vou encaixando para ver se está funcionando.

Já está bem melhor. Aquelas linhas que estavam bem no meio já não estão mais ali atrapalhando. O que estou fazendo? Vou salvar esse arquivo, esse tile, essa peça que funcionou. Está boa? Vou salvar ela no formato PNG para ela ficar com o fundo transparente assim como fizemos em todos os outros do curso passado. Lembre-se de deixar fundo transparente. Não tem nada branco.

Então de fato o fundo vai ficar transparente. E aí o que vou fazer? Como comentei, lá naquele exemplo, na referência do Minecraft, até que funcionou bem, está tudo quadrado porque o jogo tem essa estética de quinas, coisas quadradas. Mas no nosso queria dar uma suavizada. Então vou fazer algumas bordas em curvas para em alguns lugares deixarmos ela mais curva e não ficar tudo reto demais.

Para isso, olha qual é o caminho. Vou duplicar esses arquivos e vou encaixar ele lá fora, ainda no tile de terra original. Vou encaixar eles para eu usar só essa ponta de fora. Encaixa, duplico, tem camadas separadas e venho apagando o excesso para fazer uma curva na borda. Então faço uma curva na borda de cá até chegar na ponta. Aí faço no de cima. No final vamos ter meio que uma forma circular no chão.

Dificilmente vamos utilizar todas elas em simultâneo, para ficar o círculo assim. Mas é importante fazermos para termos uma noção de como vai funcionar principalmente as quinas do arquivo. E vou salvar. Para salvar cada uma dessas peças no formato PNG, vou colocar elas no local certo. Fiz o excesso. De fato, ela vai ser uma quina de baixo. Então vou arrastar ela para baixo.

Fiz a primeira, salvo, desativo tudo o que está embaixo, salvo transparência. E aí vou fazer isso com todas. Vou clicar e arrastar na ponta até ter todas elas. Vou salvar tudo no formato PNG. No final vou ter o arquivo da seguinte forma. Tenho a peça da terra original e tenho todas as outras. A que encaixa de um lado, a que encaixa do outro. De todos os lados. E aí vou fazer o teste, aquela aplicação naquele arquivo do cenário.

Olha o que fiz. Coloquei uma do lado da outra, fui encaixando. Nas pontas coloquei esse arquivo, a imagem de curva. Se eu colocar todas as curvas, acho que não fica tão legal, colocar curvas para todos os lados. Tipo na ponta, coloco de cá, coloco de cá, posso arrastar. Fica um formato muito circular. Não é tão interessante. A forma que funciona melhor mesmo é quando deixamos nas pontas que aí já fica algo mais parecido com o que vimos naquelas referências do Stardew Valley.

Olha como que nas pontas têm uma curva. Em alguns lugares fica mais reto. Tem as quinas. Nas pontas temos essas curvas. Então dessa forma vai funcionar melhor esse arquivo de terra. Temos só a terra. Na medida que vamos fazendo os outros elementos, vamos jogando para testar e ver se está funcionando bem ou não. Vamos comparando. Pode ser até que no futuro, depois que colocarmos mais elementos, colocar elementos da plantação, nós vemos que nessa terra está faltando algo ou fica melhor se mudarmos um pouco a cor para um lado e para outro.

Tudo o que estamos fazendo está em constantes mudanças. Estamos testando e experimentando. É difícil fazermos e "a terra está pronta e não vou mexer nela mais" porque estamos sempre testando. O resultado final mesmo é esse. É quando aplicamos tudo isso na cena final. Então não deu certo? Depois voltamos e fazemos uma mudança. Mas o que quero que vocês façam por enquanto é isso.

Vamos fazer essa peça original da terra. Depois, a partir dela vamos encaixar ao redor e fazer essas outras que são só essas pontas para termos essas curvas nas pontas mais suavizadas, vamos salvar cada uma dessas peças separadas em PNG e aí jogamos nesse cenário para testar se está funcionando ou não. É isso que quero que vocês façam agora.

Lembrando, olha como é uma textura que tem uma linha como se fosse um arado seguindo a perspectiva isométrica. Não é algo totalmente na horizontal, algo totalmente na vertical. São linhas seguindo essa perspectiva. É um pouco mais escuro. No caso ficou bem mais escuro do que à terra normal para ficar fácil do jogador ver e entender onde ele pode plantar onde ele não pode.

Vai e salva cada um deles. É isso que quero que vocês façam agora. Terminando já vamos passar para a próxima etapa em que faremos um espantalho para a cena.

Vamos lá.

Sobre o curso Ilustração digital: criando assets para cenários de jogos isoméricos

O curso Ilustração digital: criando assets para cenários de jogos isoméricos possui 228 minutos de vídeos, em um total de 47 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:

• Preparando o terreno
• Plantação
• Complementando o cenário
• Dentro das casas - Sala e quarto
• Dentro das casas - Outros cômodos