Primeiras aulas do curso Endless Runner: cenário

Endless Runner: cenário

Briefing - introdução

Eu sou o Rafa Nunes, eu sou ilustrador e desenvolvedor visual, e eu estou aqui para mostrar para vocês o processo de criação desse cenário, que é uma parte de uma série de cursos que eu estou fazendo, que vão gerar um game endless runner, que é aquele estilo de game que o personagem corre até bater em algum obstáculo na tela.

Nós vamos focar nesse curso no cenário e ele é uma continuação direta do curso de direção de arte, que se vocês ainda não fizeram, eu recomendo que vocês façam antes de vir fazer esse aqui, porque lá vocês vão desenvolver um projeto de game para que continuemos durante essa série.

A ideia aqui não é que vocês repliquem esse cenário que eu estou mostrando, mas sim que vocês façam o próprio cenário de vocês, com as informações que eu der, com as dicas que eu for passando aqui e as instruções todas de como criar o arquivo.

Nesse curso nós vamos criar esse cenário do zero, a partir do briefing que fizemos no curso passado, desde a etapa de thumbnail, que é essa etapa de fazer pequenos rascunhos com bastante variedade, criar cinco ou seis versões de como você imagina que seja esse cenário.

Até todo o desenvolvimento do thumbnail nós vamos para o rascunho e do rascunho vamos trabalhar etapa por etapa, camada por camada desse cenário, começando pelo fundo, como vocês podem ver, recortados no formato que a tela vai ficar, então esse é o formato que vocês vão ver do jogo inteiro, partindo para um terceiro plano, um plano um pouco mais próximo da câmera, com um pouco mais de detalhamento e depois para o segundo plano, com bem mais detalhamento do que o terceiro.

Além de trabalhar o acabamento desse cenário, vamos conversar sobre as escolhas temáticas, sobre as variações temáticas de cada um dos planos. Vocês podem ver que esse plano de fundo tem uma narrativa diferente desse segundo plano, aqui são só as montanhas, aqui já tem um pouco mais de detalhamento, mais coisas acontecendo, e vamos conversar sobre por que ter essas variações e não só fazer igual ao que está ali no terceiro plano.

Além disso, eu vou falar um pouco sobre movimento nesses cenários. Tanto um movimento de câmera de paralaxe, que é fazer cada um desses planos se mover numa velocidade diferente.

Aqui temos o terceiro e o segundo plano, um separado do outro, cada um deles vai se mover numa velocidade diferente, para dar a impressão de velocidade no movimento. Assim como em qualquer coisa que você puder observar em movimento, as coisas mais próximas vão dar a impressão de se mover mais rápido do que as coisas mais distantes, esse é o efeito de paralaxe, até pequenos movimentos, como os movimentos das ondas aqui no fundo.

Então vamos fazer esse cenário de maneira que ele tenha pequenas ações de movimento acontecendo. Esse cenário rotaciona para mostrar as ondas se mexendo ali no fundo também. São movimentos sutis, mas que já vão dar uma graça para o nosso cenário.

Além disso, eu vou mostrar para vocês como preparar o arquivo, quais são as proporções, os tamanhos de arquivo que precisamos para construir um game, toda essa parte um pouco mais técnica e a parte expressiva, de quais são as escolhas que eu fiz e por que eu fiz essas escolhas, tanto de cor quanto de formatos no cenário, quanto de como eu construo as silhuetas e tudo mais que eu puder dar de dicas para vocês de como funciona na vida real.

Eu espero que vocês gostem, sejam bem-vindos ao curso. Qualquer coisa eu estou disponível pela plataforma da Alura, pelo fórum principalmente, e vamos lá.

Briefing - analisedebriefing

No curso anterior fizemos alguns briefings de cada etapa do nosso processo de criação das ilustrações para o game, e uma dessas etapas foi a de cenário. Esse foi o briefing que resultou daquele curso.

Temos aqui na esquerda algumas referências que queremos seguir e à direita algumas que não queremos seguir. Se dermos um zoom aqui, conseguimos ir arrecadando algumas informações que você, como ilustrador, ao receber um briefing, tem que se atentar e analisar com cuidado. Temos que ter esse olhar para discernir o que o nosso cliente quer ou não quer em cada situação.

O que podemos tirar de informação aqui, por exemplo, é que a ideia para esse cenário é fazermos formas que mostrem volume, tridimensionalidade, mas de uma maneira simples. Vocês veem que essas pedras da frente que têm mais contraste, a parte da frente é sempre a que tem mais informação, elas são simples mesmo, são só traçados que dá para ver a marca do pincel passando aqui.

Em três tons nós resolvemos quase tudo, vocês veem tem um meio tom, um tom de luz e um tom de sombra. Às vezes tem um segundo tom de luz ou um segundo tom de sombra para dar uma graça, mas basicamente é tudo bastante simples e tudo bem recortado. Vocês veem que essas transições de tons não são graduais, elas são bruscas, elas são recortadas.

Essas são informações que temos que carregar para a nossa imagem. É claro que vamos fazer do nosso próprio jeito, cada um que pegar uma referência dessa para fazer vai fazer de uma maneira diferente, por mais que esteja se influenciando por ela. E também é bom conversarmos de novo sobre aquela coisa de, pegar uma referência é diferente de copiar uma referência.

Nós não vamos simplesmente pegar essa imagem e copiar, até porque estamos criando um cenário que não tem nada a ver com esse, o nosso cenário é no fundo do mar, o nosso cenário tem um recife de corais, então é outra coisa completamente diferente dessas montanhas, mas existem informações aqui que podemos pegar.

Por exemplo, vamos ter montanhas submarinas, que podemos pegar essas texturas. Assim como vamos ter os corais vistos ao fundo, que vão ter menos informação, que vão ser parecidos com isso aqui.

E vocês veem que vai chegando lá no fundo, vai afastando a câmera, vamos perdendo contraste, as coisas vão ficando mais azuladas por causa da perspectiva atmosférica e nós vamos simplificando as informações, vão tendo menos tons, por exemplo, para definir esse fundo, e tudo de maneira mais simples e bastante clara, nós batemos o olho e já conseguimos identificar o que está acontecendo. Mesma coisa nessas outras referências.

Aqui fica mais claro ainda isso que eu estou falando. No primeiro plano temos mais contraste, no segundo plano, ali no fundo, as coisas são bem mais simples, temos poucos tons aqui, não tem nem luz e sombra aparecendo no cenário, é um tom para cada região, não tem volume aparecendo, que é uma coisa que não precisamos seguir à risca, queremos colocar um pouquinho de volume.

Por outro lado, coisas que não queremos são esse tipo de desenho muito renderizado, muito detalhado, cheio de nuances de tons, variações de tom, graduações, transições sutis de tonalidades. Você vê que não tem uma transição recortada da luz para a sombra que nem tem no outro.

E muitas texturas aqui também, não queremos essas variações de textura, por exemplo, pincel texturizado, nada disso. É aquele pincel redondinho do Photoshop, aquele pincel básico que já vem instalado com ele ou em qualquer programa de edição de imagem.

Eu, por exemplo, tenho trabalhado com o Procreate, que também tem as variações dele desse tipo de pincel já instalados no programa, acho que qualquer programa que vocês pegaram vai ter.

E outra coisa que não queremos é partir para essa coisa muito simples, essas formas que funcionam muito bem pela silhueta delas, tem uma textura dentro para dar uma enriquecida na forma, super legal, mas não tem volume. Essas texturas estão aqui não para dar volume, mas para dar uma graça para essa silhueta, para não ficar tudo muito liso.

Queremos que a nossa forma tenha uma noção de volumetria, de tridimensionalidade. Então esses tons chapados assim, essas formas muito simples, sem um tom de luz e um tom de sombra não vão funcionar para nós, o que queremos é mais próximo disso ou, melhor ainda, disso aqui.

Briefing - criandoosarquivos

Agora que já sabemos o que vamos fazer, temos que criar o nosso arquivo, é claro, para trabalhar o cenário.

Para isso, aqui no Photoshop, eu vim em criar novo documento. Na aba de filme e vídeo tem diversas opções de formato, e vamos trabalhar no formato de HDTV. Em full HD o formato é 1280 por 720, isso é o suficiente para a maior parte dos celulares atuais, mesmo celulares de maior resolução conseguem rodar esse formato de maneira satisfatória.

A resolução não precisa ser maior que 72 pixels por polegada, é o padrão para web, a não ser que você vá trabalhar no formato 4K, que é o formato para consoles, para TVs de resolução 4K, ou seja, para a tecnologia de ponta. Você não precisa chegar nessa resolução para ter algo satisfatório.

Porém, sempre temos que ter em mente que quando estamos trabalhando com bitmap, ou seja, com arquivos do tipo do Photoshop, nós conseguimos diminuir esses arquivos, mas não conseguimos aumentar. Então vocês devem dar sempre preferência para fazer um arquivo no maior formato possível, dependendo do planejamento de vocês. Como o nosso planejamento é para um jogo mobile, vamos usar esse cenário no formato full HD.

Esse retângulo central em preto é o equivalente ao arquivo que eu criei, esse é o arquivo original. Porém, vocês podem ver que eu dei uma esticada nesse arquivo, por quê? Vamos três camadas diferentes, um fundo, um segundo plano e um terceiro plano mais para frente. Na verdade, contamos ao contrário, primeiro plano é o que está na frente, vamos ter nesse cenário o segundo, o terceiro e o quarto plano, que é o plano de fundo.

Se eu abrir as camadas vocês vão ver que eu criei mais dois recortes aqui. Esse primeiro recorte, que é a área em vermelho, é uma área de 50% a mais do arquivo, ou seja, eu peguei metade dele e coloquei um quarto para cá e um quarto para cá, dividi a metade na metade de novo e coloquei para cá e para cá.

E na área azul, que é o cenário mais na frente, eu fiz um aumento de 100% no tamanho, eu dobrei o tamanho do nosso arquivo na largura. Então isso aqui é o formato que vocês devem ter no final das contas. Para quem não sabe como aumentar o formato do arquivo no Photoshop, é só você apertar “C”, que é o crop, você consegue diminuir ou aumentar o arquivo como você quiser.

Tendo esse formato e já as divisões, vamos começar pelo fundo, que é essa cena estática aqui, então eu já estou falando um pouquinho do nosso planejamento. Essa parte em preto é o que vai sempre aparecer na tela para o jogador.

Essa região em vermelho e essa região em azul vão ter uma parte delas oculta na tela, então o fundo vai ser estático sempre nesse espaço, não vai se mover. O plano mais para frente vai ter esse espacinho a mais, porque vamos movê-lo da esquerda para a direita, e o plano mais para frente ainda vai ter mais espaço, vai ter mais cenário criado. Assim conseguimos criar uma variação de movimento em relação ao tempo. O cenário que estiver mais perto vai se mover mais rápido e o que estiver mais longe vai se mover mais devagar.

Sobre o curso Endless Runner: cenário

O curso Endless Runner: cenário possui 113 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de Design de Jogos 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:

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

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas