Vidas negras importam. Saiba como você pode ajudar.

William Brendaw

Notas de um Game Dev #1

Para dar o pontapé inicial na saga de aprender a desenvolver jogos, eu não poderia ter aproveitado uma melhor oportunidade: participar da Imersão GameDev da Alura.

Sim, já fazem 84 anos desde que aconteceu essa imersão. Inclusive, certas pessoas já publicaram a sua experiência durante a imersão. Ainda não consegui atingir esse nesse nível de "blogueirinho".

Eu realmente queria postar antes, mas acabei tendo motivos que me fizeram adiar: tinham algumas coisas que estavam pendentes e que eu queria deixar prontas antes de publicar; também tive um trabalhão para montar o Dojo de Microsserviços, que ficou muito bom, mas que acabou consumindo muito do meu tempo pelo prazo que eu tinha para entregar.

E, se não bastasse tudo isso, quando eu estava prestes a publicar esse artigo, a fonte do meu notebook morreu, fazendo com que eu ficasse sem computador por 1 semana.


Bom, saindo das desculpas e superadas as dificuldades, aqui está, enfim, o meu GameDev dessa experiêcia que foi muito boa.

A imersão em si ocorreu durante 5 dias, onde pude experimentar o fluxo de desenvolvimento de um infinite runner chamado As Aventuras de Hipsta, do zero à um jogo com recursos bem interessantes.

Abaixo você pode conferir o que eu fiz em cada dia.

Aula 1 - Primeiros passos do game

Na primeira aula já deu pra perceber que a imersão seria boa. Mesmo que eu tenha feito apenas na terça-feira, no mesmo dia que foi liberada a aula 2, ainda assim consegui aproveitar bem o conteúdo.

Não conhecia o p5.js, muito menos seu editor online, que é muito interessante para já sair fazendo o jogo, sem complicações. E por mais que a minha veia de querer configurar tudo à minha maneira sempre se manifeste, eu estava bem atarefado nessa semana. Por isso, para facilitar o andamento da imersão, optei em usar esse editor online que está dando muito bem pro gasto.

As primeiras tarefas foram bem interessantes: criar um cenário (plano de fundo) que se movimentasse horizontalmente; adicionar som no jogo; e, por fim, colocar a personagem do jogador com sua animação.

Bastante coisa para uma primeira aula, não?

Apesar de qualquer preconceito que eu poderia ter em relação à linguagem, o Javascript e o próprio p5.js conseguem fazer tudo isso sem muito trabalho, me causando uma boa impressão pela escolha deles para o jogo.

Uma coisa que eu gostei bastante durante a aula foi a organização do código dos instrutores, desde o início utilizando classes e funções, separando bem a lógica e já dando uma boa estruturada. Cada pedaço começou com sua responsabilidade, sem ficar aquele código "macarrônico". Chegou a dar aquele quentinho no coração.

Terminei a aula pilhado, empolgado com tudo o que vi e com muita vontade de fazer a próxima. Outro motivo que me deixou com essa sensação era estar atrasado no cronograma. Por isso, acabei parando apenas para realizar esse registro e já parti pra próxima aula.

Aqui o material produzido durante essa aula, com pequenas mudanças: https://editor.p5js.org/willbdw/sketches/GdGiwOGq2.

Aula 2 - Gravidade, saltos e colisões

Na segunda aula começamos a brincar com a parte que, pra mim, é mais interessante dos jogos: a física.

Antes disso, houve uma refatoração do código para que a nova classe do inimigo e a classe existente do personagem usassem uma mesma classe pai para centralizar todos os atributos de animação. Começando a aula com uma boa prática de organização de código.

Depois dessa adição e reestruturação, partimos para a implementação da movimentação do inimigo em direção à protagonista. Tive alguns problemas em mostrar a "super temida" gotinha a partir do material disponível no link do editor online do p5.js que a Alura disponibilizou como referência. Procurei na internet e consegui ajustar o problema, colocando os índices corretos na matriz do sprite da vilã.

Pronto, agora a animação da gotinha está funcionando e indo em direção à bruxinha.

Depois disso, demos início a implementação do pulo da bruxinha. E aqui teve um momento Flappy Bird: ao implementar a gravidade, não criamos um controle de pulos. Isso fez com que a bruxinha pudesse pular indefinidamente, tendo esse efeito parecido com o Flappy Bird. Talvez no futuro eu mude esse comportamento para apenas como pulo duplo.

Após ter criado o pulo, fomos para a parte da colisão. Aqui utilizamos mais uma parte da biblioteca do p5.js que lida diretamente com colisões. É bem interessante ver como essa biblioteca, e os jogos em geral, lidam com as colisões.

Por fim, adicionamos um som de "glob" ao pulo da protagonista. De longe, foi a parte mais fácil da aula. Não comentei antes, mas desativei o som do jogo porque achei enjoativo demais, além de atrapalhar nas explicações da aula. Pelo menos ficou bem legal apenas com esse som.

Mais uma aula que me deixa pilhado para seguir aprendendo sobre desenvolver jogos. Ao concluir essa aula, fiquei em dia com as atividades da imersão. Tive que esperar o próximo dia para fazer a aula seguinte.

Aqui o material produzido durante essa aula, com pequenas mudanças: https://editor.p5js.org/willbdw/sketches/foZ5mx14R.

Aula 3 - Adicionando novos inimigos e pontuação

Por mais que na aula anterior eu tenha ficado em dia com as atividades, não consegui fazer essa aula no dia certo. Por isso, acabei deixando para fazer no dia seguinte, junto com a aula 4.

Começamos com a adição de propriedades para controlar o delay de repetição e velocidade das animações dos inimigos, já mirando no ajuste para múltiplos inimigos.

Depois disso, adicionamos o inimigo troll e a gotinha voadora. Como o código ficou gigante na parte da declaração de variáveis e também para a manipulação dos comportamentos, todos esses inimigos foram adicionados num vetor de inimigos para facilitar na detecção de colisões para todos.

Também foi adicionado o banner de game over para quando houver a colisão do personagem com o inimigo. Ficou bem simples e bacana.

Após o game over, foi pedido para adicionar a parte de pontuação para contar o tempo corrido como score. Outra tarefa bem simples e interessante para o jogo.

Antes da aula começar, tinha me dado vontade de refatorar o pulo, para enfim colocar o comportamento do pulo duplo. Implementei o comportamento de uma forma que até o som do pulo seria parado, modificando o método que chamava o pulo para tocar o som apenas quando fosse um pulo válido. Me senti "hacker". Ao final da aula, acabei descobrindo que essa seria a última atividade do dia. Foi legal ver que o conteúdo apresentado nessa parte foi bem parecido com o que eu já tinha implementado.

Após concluir a aula, deu para ver que o jogo tá ficando bem robusto, mesmo com um código bem simples. O gosto para fazer jogos, assim como a confiança, só aumenta. Estou novamente ansioso pela próxima aula, que será feita após minha aula de Inglês (inception de aulas).

Aqui o material produzido durante essa aula, com pequenas mudanças: https://editor.p5js.org/willbdw/sketches/N7JiaRxnt.

Aula 4 - Estado do jogo com cenas diferentes

Essa aula eu consegui começar no dia certo, mas mesmo assim acabei deixando boa parte para concluir no último dia. Sim, minha rotina está me deixando na mão.

A aula começou com uma refatoração bem grande na parte de como chamar os eventos do jogo para uma nova classe. Aqui todo o conteúdo do jogo foi parar dentro da classe Jogo. Pro código ficar tinindo.

Depois disso, começamos a criar a estrutura para a tela inicial, e também para permitir a transição entre o jogo e a tela inicial. Nessa parte, foram carregados o fundo e a fonte da tela inicial, bem como a escrita do nome do jogo "As Aventuras de Hipsta".

Por fim, foi adicionado o botão que iria iniciar o jogo. Depois de pouco tempo e algum CSS, ele ficou bonitão.

Essa aula foi bem longa, apesar do relato curto, mas mesmo assim continuo com a sensação de que fazer jogos não é tão complicado assim. Minha empolgação segue crescendo.

Aqui o material produzido durante essa aula, com pequenas mudanças: https://editor.p5js.org/willbdw/sketches/ZSUoT6-oU.

Aula 5 - Vidas e mapa

Depois de uma semana corrida, enfim cheguei a última aula. Iniciei essa aula depois da anterior, o que já me deixou no embalo pra concluir a imersão.

Começamos implementando a estrutura das vidas, pensando na parte da exibição e também no gerenciamento. Para essa última parte, mexemos na implementação da colisão para tirar pontos do personagem.

Uma coisa que eu achei interessante é a forma como os jogos fazem para contornar o grande volume de detecção de colisões por frames: deixam o personagem invencível durante algum tempo. É algo super simples, mas que mesmo assim conseguiu me surpreender.

Depois disso, partimos para a criação de mapas de configurações para melhor controlar a frequência e velocidade dos inimigos. É legal ver como o código pode ficar organizado de uma forma interessante mesmo se tratando de um jogo, que eu sempre vi como algo complexo ou com uma alta necessidade de otimização na utilização dos recursos da máquina.

Para finalizar a aula, e a imersão, fizemos esse mapa ser carregado a partir de um arquivo json, tirando essa informação do código e, assim, dando mais flexibilidade na configuração do jogo.

Aqui o material produzido durante essa aula, com pequenas mudanças: https://editor.p5js.org/willbdw/sketches/U6xxMUWGr.-.

O que eu tiro dessa experiência

Ufa! Enfim, cheguei ao fim da imersão que, apesar dos altos e baixos, foi uma experiência incrível. Eu não imaginava que seria possível, mas saio muito mais pilhado do que entrei.

Tudo o que foi ensinado me tirou a impressão de que fazer jogos é algo complexo ou até mesmo impossível de fazer. Todas as aulas me mostraram que criar jogos é totalmente possível. E que a parte que parecia a mais complexa, na verdade é a mais tranquila: criar a lógica. O resto se consegue ou se adapta.

A partir de agora pretendo escrever mensalmente nessa série, que começou com essa experiência, detalhando o meu progresso no desenvolvimento de jogos. Meu primeiro projeto pós imersão será o jogo com o tema lançado no último Ludum Dare: Keep-it alive.

E se você ficou curioso para saber onde eu publiquei o jogo final, fique tranquilo. Ele está hospedado no meu novo site, que servirá como repositório para todos os jogos que eu criar a partir de agora. Sejam bem-vindos ao Brendaw Games.

Me conta nos comentários sobre o que você achou dessa minha primeira experiência no desenvolvimento de jogos.