Primeiras aulas do curso Pixel Art: Desenhando um cenário de jogo top-down

Pixel Art: Desenhando um cenário de jogo top-down

Top Down View - Introdução

E aí, pessoal. Beleza? A gente agora vai começar a trabalhar o curso de pixel art pra cenário. A gente vai desenhar um cenário pro jogo de RPG que a gente já desenvolveu o personagem, que é a Jill, em dois outros cursos dentro aqui da Alura.

O curso que a gente tem como pré-requisito pra esse aqui é o curso introdutório de pixel art, fazendo um sprite. E com base nele você pode vir direto pra cá ou você pode fazer os outros dois cursos que a gente criou os sprites da Jill, que é o personagem que vai atuar nesse mapa.

Aqui a gente vai fazer o mapa, quer dizer, não necessariamente o mapa. A gente vai fazer o material que vai ser usado pelo game designer ou pelo programador de Unity para fazer o seu mapa. A gente vai fazer o que a gente chama de tile sheet, que é isso aqui.

O entregável é isso aqui, é um material que tem várias instâncias, está vendo aqui? Tem vários quadradinhos e cada quadradinho desse é como se fosse um jeito de pintar o cenário dentro da Unity.

A gente vai separar tudo certinho aqui pra produção com assets, com a própria rocha da caverna, já que o cenário vai ser uma caverna, com texturas diferentes pro chão ou até pra fazer teto e a porta aqui em dois estados, fechado e aberto, que é o que o cliente precisa pra fazer o jogo dele. A gente começa agora, mãos à obra e até lá.

Top Down View - Cenário pixel

Pessoal, vamos começar a entender o que é, o que a gente vai trabalhar quando a gente fala que vai criar um cenário num jogo de RPG em videogame. A gente tem que analisar aqui as diferenças do que passou primeiro pra gente entender visualmente o que ele quer.

A gente já fez o personagem no curso anterior, a gente agora vai fazer o cenário, ou seja, a gente vai fazer essas folhas, a gente vai fazer esse altar, a gente vai fazer as florzinhas, os detalhes, a gente vai fazer esse tipo de coisa, só que dentro da caverna, como o cliente passou no briefing dele.

Vamos abrir o briefing dele aqui. Ele quer que seja isso dentro de uma caverna. Então a gente vai fazer o cenário da caverna. Mas como a gente produz isso? Nos outros cursos a gente viu que a gente criou o personagem e colocou-o dentro de um sprite sheet.

Aqui a gente vai pegar as nossas referências e vai desenhar mais ou menos o cenário que a gente quer e depois vai entender como a gente vai fazer padrões, por exemplo, essas árvores aqui do Moonlighter, são padrões que a gente vai aprender como fazer – botei aqui tileset pra pegar o exemplo – e botar esses padrões dentro de um tile sheet, que a gente chama. A gente vai pegar e vai botar tudo aqui dentro.

Se a gente parar pra ver, isso aqui está subdividido em quadradinhos. Esses quadrados têm o mesmo tamanho do quadrado que a gente bolou pro boneco, que no caso aqui é 64 por 64 pixels.

Quando a gente tem uma imagem muito grande como, por exemplo, essa árvore aqui, a gente pode notar que ela ocupa um espaço de dois tiles desse, ou seja, duas vezes a altura aqui. Essa árvore aqui é um sprite que ocupa ao todo 64 pixels de largura e 128 pixels de altura. A mesma coisa aqui vale pra outros que a gente vê.

Aqui, por exemplo, a gente tem um padrão, olha. A gente tem árvores aqui e ela termina no meio, esses tiles, esses quadradinhos terminam no meio, por quê? Porque se a gente pegar e juntar esses dois, eles continuam num padrão infinito. A gente vai trabalhar isso agora. Como que a gente faz isso?

Primeira coisa, vamos entender o que a gente quer exatamente. A gente já viu o personagem e a gente já viu a caverna como que é. Vamos buscar então algumas referências de caverna em jogo e na vida real também? Vamos lá. Vou botar aqui no Google: caverna.

Aqui a gente já tem vários tipo de caverna pra gente explorar, com várias cores, vários temas. A gente já tem um ambiente aqui dos mais diversos, desde algumas que são mais naturais, outras que já estão sendo explorados pelo homem aqui.

No caso a gente vai fazer uma fantasmagórica, então esse clima aqui é muito bom, como essa aqui, que tem uma fumacinha, tem alguma coisa ali, um raio de sol ali só pra dar uma esperança. Ou de repente uma coisa mais etérea assim, isso aqui é do fundo do mar até. Umas luzes diferentes podem dar um clima. Esse tipo de coisa é interessante a gente trabalhar. Também estalactites e estalagmites. Estalactites acho que vem de cima, estalagmites acho que vem de baixo.

A gente aqui consegue fazer uma grande coleta. Olha, aqui tem uma caverna trabalhada pelo homem. A gente consegue fazer uma grande coleta visual do que a gente pode pensar como uma caverna.

A gente pode pensar também dentro de jogo, o que a gente tem aqui? Caves, vou botar em inglês, caves ou caverna, poderia ser também. Zelda III. Com I que a gente escreve aqui, três romano. Aqui ele tem uma boca de caverna, olha como que é a caverna dentro, só tem as paredes aqui, você vê que repete, dá pra ver bem o padrão, o tile. O chão é diferente e tem essa parede. É bem isso que ele coloca como parede.

Vamos ver aqui no Moonlighter. Moonlighter cave. Vamos ver se aparece alguma coisa. Aqui já tem uma caverna com paredes já feitas pelo homem como a do Zelda também, que a gente viu no link. A gente não vê nenhuma muito rústica. Mas, pelo visto, a do cliente, que ele pediu, já é mais rústica um pouco, porque ele quer monstros ali e quer uma coisa meio vulcânica, saindo uns veios diferentes.

Vamos botar outras influências, vocês podem buscar dentro do mundo dos jogos outros jogos que tenham. Eu recordo aqui de um jogo interessante. O nome dele era Hiper Light Drifter e eu lembro que ele tinha muitas cavernas. Olhando aqui a gente vê, de fato, ele tem algumas cavernas, umas formações diferentes. Até a planta que ele desenha é bem diferente e não segue tanto esses padrões. Aqui tem outras técnicas que eles usam, já não é mais essa técnica que a gente vai trabalhar de tilesets, são coisas mais avançadas.

Mas uma coisa importante que a gente passa aqui é o mood. Olha só que coisa doida aqui, esses brilhos. Esse jogo é interessante. Olha a caverna dele como que é, tem uma paleta de cores muito interessante e isso pode influenciar a gente. Olha que curioso. Beleza. Isso aqui é muito legal também.

A gente tem uma coleção visual aqui interessante. No próximo vídeo a gente já começa a botar em prática isso, rabiscar um pouquinho o que a gente quer dessa caverna. Então até o próximo vídeo.

Top Down View - Esboços de Perspectiva

Pessoal, olhando aqui o briefing do cliente, a gente vê que a gente precisa desenhar essa caverna, ela precisa ser escura e estranha. Ela precisa ter sugestão de elementos que deem origem para os inimigos. A gente vê aqui que o jogo se passa numa caverna, a heroína enfrentará monstros de gosma rastejantes em busca de chaves que abram os seus caminhos até o tesouro.

O que a gente tem que fazer aqui é botar algum elemento que dê a entender que está formando essas criaturas, esses inimigos de gosma que a gente vai enfrentar. Tem que também portas de pedra acessando outras salas e pilares. Ou seja, tem que botar alguns elementos. A gente vai ter que desenhar isso.

Eu vou vir no Photoshop direto e vou fazer rascunho. Lembra, toda a primeira parte que a gente faz, normalmente, de tudo, é treinar um pouco, é exercitar um pouco a criatividade, deixar os músculos ficarem mais soltos, a gente liberar um pouco de atividade. Então vamos estudar, ainda sem fazer nada final. Vamos só estudar o que a gente quer desse desenho. Vamos ter ideias.

Vou botar aqui arquivo novo no Photoshop. Vou botar aqui no tamanho de web, vou botar, sei lá, 1920 por 1080. Tudo bem. Eu vou pensar. Eu estou usando o mouse mesmo, não preciso de grande precisão, vai ficar meio feio aqui, mas eu acho que com esse brush e tudo mais está bom, eu não preciso de muito mais do que isso.

Vou desligar aqui a opacidade, não tem muito porquê fazer a opacidade de acordo com a pressão que a gente botar. Eu vou diminuir um pouco a opacidade fixa aqui. Se eu ficar fazendo assim o traço vai escurecendo.

Como que é essa caverna que a gente vai desenhar? Normalmente a gente tem na caverna uns ambientes assim, um ambiente mais ou menos uma tela desse tamanho aqui. Normalmente o personagem vai entrar por uma porta, então vou botar aqui uma portinha. No caso, uma porta de pedra, que ele botou lá que tem que ter porta de pedra que a gente abra com chave, então vou botar uma coisa meio assim, só pra eu dar uma ideia aqui de campo. Uma sala com a porta de pedra, assim.

Tem que ser estranha, então a gente pode botar aqui que o chão é irregular, uma coisa meio recortada, bem na rocha mesmo. Vou botar que esse chão é bem recortado. Mais o quê? Ele pode ter uma coisa meio molhada, umas poças aqui. Então a gente coloca que ele vai ter umas poças no meio dele, assim. Vou desenhar a grosso modo, com o mouse mesmo. E mais o quê?

A gente desenha aqui normalmente, como é que a gente faz essas paredes aqui? A gente está vendo a porta que a gente fez, mas essa parede eu faço assim mesmo? Nessa perspectiva? Seria mais ou menos assim?

Acho que seria mais ou menos assim. Aqui uma coisa meio irregular também e aqui naturalmente irregular também, porque senão fica parecendo uma construção e não é bem isso, é uma caverna e é uma caverna estranha, então a gente tem que dar um ar de estranheza também.

Aqui essa rocha, eu vou botar aqui que é rocha na parede, então vou botar uns veios, mais ou menos assim. E agora como é que eu continuo essa parede aqui? Essa outra parte eu vou fazer assim, mais ou menos. Essa parede irregular aqui. Mesma coisa dos veios. E o topo vindo aqui, mais ou menos isso. E aqui a gente completa. Eu queria mais ou menos isso.

E agora nessa parte aqui? A gente faz assim? A gente coloca aqui, porque gente está vendo só a parte de cima aqui. É assim que a gente faz? Assim parece que a gente não está vendo a 90 graus acima, a gente não está olhando de cima, a gente está olhando um pouquinho de trás. É, parece.

Agora, a gente tem outra forma de fazer isso, não tem? A gente não poderia fazer a mesma coisa do que isso aqui, só que espelhado? Ou seja, fazer uma coisa mais ou menos assim? Ou seja, fazer aqui assim também. Bem irregular também. E os veios aqui. A gente não poderia fazer assim também? Qual será que é o certo de fazer? Essas paredes aqui fazendo essa perspectiva ou aquela outra que a gente fez?

Vou dar uma olhada aqui no Google. Eu já fiz uma pesquisa aqui. Pesquisei sobre Zelda, pesquisei um pouco sobre tileset, que é o nome de quando a gente pega todos os quadradinhos que a gente fez de pixel art pra gerar o cenário. Então botei aqui e fiz essa pesquisa.

O do Zelda a gente vê que ele é essa forma que a gente desenhou depois, que a gente vê a parede aqui e vê essa outra parede aqui. Apesar disso, o boneco a gente não está vendo 90 graus acima. Essa visão que a gente tem é como se estivesse 90 graus, porque a gente está vendo essa parte aqui das duas paredes.

Se a gente fosse mais realista um pouco, ou seja, ele estaria um pouco mais pra trás e talvez botar essa parede sem ver essa parte de baixo aqui, porque a gente está vendo as duas paredes assim. Essa aqui assim e essa aqui assim também. A gente veria também essa face daqui e essa face daqui.

A gente está vendo que no Zelda ele pegou esse caminho. Eu vi outras coisas também, outra caverna do Zelda, vou dar um zoom pra gente ver melhor. Exatamente assim. O bom é que a gente vê porta em cima, porta embaixo, a gente vê bem. Se a gente tivesse esse esquema aqui a gente teria que ver a porta daqui a gente não veria a porta dentro da sala que a gente está, que é aqui. Aqui a gente consegue fazer outra porta tranquilamente, por exemplo. Interessante.

Tem outros tilesets. Esse aqui, por exemplo, do Rogue Dungeon, já é dessa forma que a gente falou, a gente vê a porta aqui embaixo e também funciona. E aqui o bonequinho está numa perspectiva que parece mais alinhada com isso aqui do que o Zelda, o Link, aqui dentro ele está com a perspectiva de quem está vendo não a 90 graus, mas está vendo de um ângulo mais agudo. Mas as paredes é como se estivesse vendo a 90 graus.

Mas não chega a ser um problema, o Zelda, por exemplo, é um clássico. Aqui outro Dungeon que a gente está vendo, também segue o segundo princípio que a gente viu. E aí? A gente precisa tomar uma decisão. Eu vou escolher fazer essa solução aqui, porque eu gostei da porta. A porta é uma coisa importante pra gente, que a gente viu. A gente vai andar pela sala em busca de porta.

Não ficou claro se a gente vai ter um scroll, se a tela vai andar pra um lado, pro outro. Pelo que eu entendi, a gente vai passar de sala em sala, só entrando na porta. Então se a gente não conseguir ver a porta de baixo aqui, nessa parede, de outra sala, a gente não vai ter pista dela. Então eu vou ser mais conservador e vou desenhar essa perspectiva aqui. Eu vou deixar desse jeito aqui.

Legal. Agora eu vou pegar esse brush, eu vou aumentá-lo e vou tirar um pouco mais de opacidade, só pra eu sentir melhor a questão de cor, tal. Tem que ser escura essa caverna, então vou fazer essas paredes serem escuras. Essas ranhuras também são bem escuras, isso aqui tudo é escuro, pra ressaltar bem essa coisa dos veios da parede, uma coisa meio misteriosa.

Aqui também tem que ser meio escuro. O personagem que a gente fez, a Jill, no outro curso, que a gente vai usar aqui, tem tons claros e tudo mais, ele fica escuro só em alguns pontos, então aqui a gente consegue ter um contraste bom.

E por último ele quer algum elemento que traga o inimigo. Pensando que o inimigo é uma gosma, a gente pode fazer uma gosma de uma cor tipo rosa, uma coisa meio estranha. E como que a gente faz isso? A gente pode fazer que isso está brotando da parede, esse material. Vou botar opacidade alta. A gente pode fazer isso brotando da parede e empossando, do teto um pouco assim. A gente pode fazer isso aqui.

Acho que fica uma Dungeons legal, fica uma caverna legal, interessante e misteriosa, tipo está surgindo daqui? Como que é isso? Os inimigos estão vindo daqui e essa gosma. Então acho que isso aqui fica legal. Beleza, aqui pra mim está um bom estudo já do que a gente quer com a nossa caverna, com o nosso cenário.

E no próximo vídeo a gente começa a trabalhar isso, já na forma da pixel art. A gente já vai fazer todos aqueles ajustes que a gente faz de grade, de visualização, tamanho do pixel, tamanho da grade. E aí a gente vai desenhar isso aqui e pensar depois em cores e outras coisas que a gente vai acrescente nesse desenho. Até a próxima.

Sobre o curso Pixel Art: Desenhando um cenário de jogo top-down

O curso Pixel Art: Desenhando um cenário de jogo top-down possui 143 minutos de vídeos, em um total de 33 atividades. Gostou? Conheça nossos outros cursos de Design de Jogos em Design & UX, ou leia nossos artigos de Design & UX.

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

Aprenda Design de Jogos acessando integralmente esse e outros cursos, comece hoje!

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana