Primeiras aulas do curso Endless Runner: criando um HUD

Endless Runner: criando um HUD

Briefing - Introdução

Oi, gente, tudo bem? Eu sou o Rafa Nunes, sou ilustrador e desenvolvedor visual, e esse é mais um curso do nosso conjunto de cursos em que a gente está desenvolvendo um endless runner, aquele tipo de jogo que como o nome diz você corre infinitamente até trombar em um obstáculo e ser impedido de continuar correndo. É um jogo bem comum nas plataformas móveis, celular e tablets, e é nosso foco nessa produção.

Como vocês podem ver, a gente já tem uma grande etapa desse processo concluída, que foi feita em quatro outros cursos. Essa é a quinta parte desse grupo de cursos. Se você chegou agora, eu recomendo que você volte um pouco, comece pelo curso de direção de arte, onde a gente determinou quais iam ser os direcionamentos da parte visual desse jogo, e depois que você siga conforme a ordem da criação de cenário, dos assets, que a gente já fez, os objetos como plataformas, obstáculos e objetos colecionáveis, e depois para design de personagem, que a gente criou nosso personagem principal e o antagonista, que é um monstro que está sempre correndo.

Nesse curso vamos pegar a parte de design desse jogo, que é o que está faltando para completar essa tela de exemplo, esse mocap que estamos criando. Vamos começar criando um HUD, um heads up display dessa tela, então todo jogo tem algum elemento de design que vai informar para o jogador as coisas importantes. Por exemplo, quantos pontos ele fez, quantas moedas ele tem no jogo, quais são os poderes disponíveis.

A gente vai criar os ícones para colocar nesse HUD, que vão ser um conjunto de ícones para os poderes, um conjunto de ícones demonstrativos de quantas bolhas foram coletadas, quantos passos o jogador deu. Depois vamos criar um menu de pause para esse jogo e dentro desse menu fizemos uma loja que vende esses poderes que você pode selecionar, arrastar e determinar quais você vai usar.

Depois disso, a gente vai criar o logo do jogo, a gente deu um nome agora para ele, que ainda não tinha, e criamos um elemento visual para representar esse nome. E um ícone para colocar na entrada do celular, na área de trabalho do celular, um ícone que a pessoa vai clicar para entrar no jogo.

Além disso, vamos criar uma página inicial para o jogo, um menu inicial, e conversar sobre quais outros menus precisamos fazer para esse jogo. Não é só a parte de dentro do gameplay, mas todos os menus que envolvem o menu inicial, como menu de configurações, e todos os outros.

Temos bastante assunto para discutir nesse curso, espero que vocês gostem, sejam bem-vindos. Qualquer dúvida estou à disposição de vocês na plataforma online da Alura.

Briefing - Alinhamento de briefing

Vamos começar agora a criar o nosso HUD, o heads up display, os elementos de design que vão aparecer na tela de gameplay durante o jogo, para o jogador ter informações importantes, como quantidade de pontos que ele fez, quantidade de moedas que esse jogador coletou ou os poderes que estão disponíveis, além de um botão de pause para ele parar o jogo e entrar no menu, que tem informações importantes para ele também.

A gente começou no primeiro curso dessa carreira falando sobre direção de arte. Fizemos durante aquele curso esse briefing com exemplos de HUDs de jogos. Nossa referência principal era esse jogo que é bem limpo, o design dele na tela é bastante minimalista. A gente foi destoando um pouco desse tipo de abordagem que temos aqui. O que é uma coisa comum de acontecer.

Se vocês repararem, as referências que peguei são todas puxadas para isso de ter o mínimo de informação possível na tela e dessa informação ser transmitida principalmente com a tipografia. Eu fui mudando para uma coisa mais visual, que depende um pouco mais de desenhos, muito próximo do que a gente vê nas animações do cartoon network, por exemplo, uma coisa mais cheia de informação visual para o nosso jogador.

É uma coisa muito comum a gente fazer um briefing assim no começo do projeto e as coisas mudarem no decorrer dele. Principalmente quando a gente está nessas etapas mais avançadas, como a gente está agora, é legal rever como está o nosso processo de acordo com o que a gente tinha planejado no começo, nos exercícios do curso de direção de arte, que era esse tipo de botão que a gente tem aqui.

Tínhamos uma abordagem mais minimalista e mais de jogos de celular em geral, esses botões elaborados e desenhados. Tínhamos duas informações conflitantes, mostrando que não tínhamos muita precisão no que estávamos esperando nesse momento do design no começo. Estávamos mais focados em outros elementos.

Duas opções que a gente tem são ou deixar para ir fazendo o briefing de cada etapa depois que uma primeira etapa é cumprida, ou ir realinhando durante o processo. Principalmente quando a gente está trabalhando com equipes muito grandes, quando a gente tem muitas mentes pensando junto no projeto e as coisas invariavelmente vão ser alteradas, as pessoas vão trazer ideias melhores e é importante para um diretor de arte ouvir as ideias das pessoas da equipe. Muitas vezes vão ser muito melhores do que as ideias que tiveram no início.

Vocês veem que tudo que a gente selecionou aqui não está funcionando muito bem com o que temos até agora do gameplay do nosso jogo. São elementos muito estilizadas e cartunescos, bem com cara de desenho animado mesmo. E que não estão casando muito bem com essa coisa mais de pintura, se aproximando de objetos da vida real. Vocês veem que esses botões todos pintados imitando madeira ou outros elementos não iam funcionar.

Antes de começar a produzir, vou pegar esse briefing e realinhar ele, fazer um novo briefing, procurar referências diferentes.

Briefing - Novo briefing

Eu tinha indicado nesse briefing dois caminhos que a gente poderia seguir, o primeiro era do design simples, limpo, minimalista, e o segundo do design mais elaborado, essa cara mais de pintura, cheio de luz e sombra, renderização dos botões. E essa coisa do esquemorfismo, que são elementos que imitam objetos da vida real, como a textura de madeira, ou a textura de pergaminho, que são elementos que eu vou abandonar no nosso game, não vou seguir nenhum desses dois.

O que quero então é uma coisa mais lúdica, mais com cara de cartoon network, mais dinâmica, cheia de movimento. Eu trouxe três referências. A primeira é o Banana Kong, que é um jogo endless runner muito parecido com o que a gente está fazendo, muito próximo o tipo de gameplay dele.

Eu achei que a disposição dos elementos, dos menus no jogo, é bastante interessante. Apesar de achar um design um pouco feio, batido já, e não é muito o que quero seguir para o nosso game.

Mas nem todas as referências que a gente trouxer vão ser aproveitadas ao máximo. A gente às vezes pega um elemento dessa referência e já é o suficiente para dar uma inspiração para a gente.

Nesse caso do Banana Kong, o que eu gosto muito é da disposição dos elementos. Esses menus que ocupam só uma parte da tela, mas que enchem essa parte da tela. Por exemplo, o menu de pause dele, que puxa um espaço todo fechado, você não consegue ver o fundo, esses elementos do gameplay do jogo, porque nesse momento que está pausado é o momento para você focar em outra coisa, não no que está na tela.

Por outro lado, ele não fecha completamente, ele deixa um espaço da tela sobrando para mostrar para a gente que a gente ainda está dentro do jogo. Acho que isso é muito interessante, muito bem resolvido no design desse game. São coisas que vou levar para o nosso. Os botões também, quais são esses botões e quais os elementos no menu de pause, também é uma coisa que quero trazer.

Mas não vamos esquecer dele visualmente. Vamos para uma referência que tem mais a ver com o nosso game, que é o Grindstone, um jogo exclusivo da Apple que tem mais essa cara de cartoon network, de desenho animado, tudo mais lúdico, apesar de ainda ter o esquema de imitar madeira, vocês veem que é uma coisa muito mais estilizada do que a gente estava vendo até agora. Ou mesmo esse imitando metal não está querendo replicar o que a gente vê na vida real, só está mostrando que é uma placa de metal.

E tem elementos muito próximos do nosso game, essas linhas de contorno, a escolha de cores, muito próxima da nossa, o tipo de acabamento, esse tipo de sombreado. São coisas muito próximas do nosso game que a gente pode trazer.

Essa é uma ótima referência visual para o nosso game e além de tudo de plataforma móvel, de celular e tablets, então acho que é o grande exemplo que a gente vai seguir.

Porém, ainda trago um terceiro que é o Persona 5, um jogo de consoles muito baseado na escola de design japonesa, as coisas são todas muito chamativas, não é um design minimalista, simples, ele chama atenção na tela. Ele rouba toda a cena, mais até que o próprio visual do jogo. Ele é invasivo, porém é um design muito bom, muito dinâmico, e chamativo. O jogo chama bastante nossa atenção por conta desses detalhes.

E essas telas dinâmicas, que são retângulos que ficam mexendo, não dá para ver, mas ficam mexendo o tempo todo, mudando de forma. Ajuda bastante no dinamismo do game. Isso é uma coisa que quero trazer também porque o gameplay do nosso jogo é um pouco lento, o personagem não vai correr muito, as coisas acontecem no fundo do mar, então tem que dar aquela impressão de que estão acontecendo mais devagar do que aconteceria na terra firme.

Para ajudar, a gente coloca um pouco de movimento no HUD do jogo, esse movimento que falta no gameplay na animação e no design.

Sobre o curso Endless Runner: criando um HUD

O curso Endless Runner: criando um HUD possui 93 minutos de vídeos, em um total de 36 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