Ícone do LinkedIn Ícone do RSS Ícone do Lnk.Bio

24 Fev 2021 | 6 minutos • Programação

My First Game Jam

Desafio para a criação do seu primeiro jogo

Ingrid Machado

Ingrid Machado

Engenheira de computação, especialista em engenharia de software. Autora deste querido blog.

Estava estudando mais sobre o Scratch quando vi por acaso o My First Game Jam no Itch.io. O My First Game Jam é um desafio para fazer um jogo em duas semanas, que foi de 9 a 23 de janeiro. Eu me inscrevi no dia 11/01 e esse post é o meu dev log.

Já adianto que o jogo não foi finalizado, mas como o processo foi documentado, estou publicando o que consegui fazer.

Planejamento

Para conseguir fazer um jogo em duas semanas, a minha primeira sugestão é se planejar. A segunda é não querer abraçar o mundo. Então, eu fiz um board no Trello com um planejamento bem alto nível:

Trello com as tarefas planejadas para a criação do jogo

E, para conseguir dar conta do desafio, já iniciei ele com a ideia de um jogo simples e que representasse apenas o conceito que pode ser evoluído no futuro. Também precisei levar em consideração o tema do Game Jam, que era “Locked”.

Desenvolvimento

Dia 1

No primeiro dia do desafio, fiz a definição do conceito do jogo. A intenção é criar uma descrição geral a respeito do jogo, um resumo onde quem lê já sabe o que esperar.

Meu resultado foi o seguinte:

Você acordou preso em um labirinto, sem saber como parou ali. A única coisa que você sabe é que não tem muito tempo e precisa ir embora. Como encontrar a saída? Como ter mais tempo? A sua missão é encontrar como escapar.

Dia 2

No segundo dia, defini a dinâmica do jogo. Já sabia que seria um labirinto, mas precisei definir melhor como seria a pontuação do jogo, personagens e condições para ganhar ou perder. Desse brainstorming, surgiram os seguintes itens:

Também fiz um protótipo, só para colocar no papel o que eu tinha imaginado de elementos para o jogo. Fiz um desenho bem simples, só para entender as telas que eu deveria criar e como as pontuações seriam exibidas:

Rascunho no papel com as telas do jogo

Dia 3

Neste dia selecionei os assets para o jogo:

Como dá para perceber, fiz algumas adaptações para usar os sprites do mesmo pack. As imagens para as telas de início e final do jogo acabaram ficando para depois. Nesse dia eu mexi no jogo bem tarde e não deu para fazer muita coisa.

Dia 4

Fiz 3 imagens no Paint para o início e o final do jogo, que tem a opção de vitória ou game over:

Tela inicial feita no Paint com o fundo preto e letras brancas

Tela inicial

Tela do final do jogo com vitória feita no Paint com o fundo preto e letras brancas

Tela após uma vitória

Tela do game over feita no Paint com o fundo preto e letras brancas

Tela após perder o jogo

A fonte é a “Fixedsys”.

Dia 5

Hoje iniciei a tarefa de implementação da lógica em alto nível. Foquei na movimentação da personagem dentro do labirinto e encontrei uma solução para detectar a colisão identificando a cor das paredes.

Dia 6

Para seguir na tarefa de implementação da lógica em alto nível, eu vi hoje qual seria a lógica necessária para fazer o zoom out do labirinto.

Dia 7

Hoje foi o dia de investigar como fazer a transição de backdrop, que nada mais é do que exibir a tela de início e depois fazer a transição para o jogo e para a finalização (ganhando ou perdendo).

Dia 8

Para facilitar, alterei as imagens dos labirintos para marcar com verde as saídas. Assim, quando a personagem encostar no verde, eu já considero como uma vitória.

Também estudei o uso do timer e finalizei a lógica de alto nível antes de partir para a implementação no Scratch.

Dia 9

Iniciei o dia incluindo todos os assets no projeto do Scratch: cenários, personagens e itens.

Sprites do jogo: personagem, itens e labirintos

O ator “char” foi incluído com todas as costumes disponíveis no pack: andar para baixo, para esquerda, para direita e para cima. E as telas de início e final de jogo foram incluídas como backdrops dentro do mesmo stage. Os labirintos estão como atores porque preciso testar a colisão, o que descobri não ser possível com backdrops.

Imagem dos backdrops (fundos) do stage

Backdrops do stage com todas as telas do jogo

O início do jogo é bem simples, ao clicar na tela ele inicia. Então adicionei o seguinte bloco no stage:

Imagem dos backdrops (fundos) do stage

Quando o jogo for iniciado, será exibido o backdrop com o início do jogo (start) e, ao clicar no mouse (if mouse down?), o backdrop muda para uma imagem em branco (backdrop1).

Para os testes de colisão funcionarem, precisei editar dentro do Scratch as imagens dos labirintos, alterando o preenchimento branco para transparente. E para contornar o limite do zoom que eu poderia aplicar no labirinto, segui este tutorial: Scratch Wiki - Overriding the Costume Size Limit.

Como queria um efeito de movimentação onde a personagem se mantivesse no centro da tela, fiz a lógica da movimentação em relação ao labirinto. Junto com o código da movimentação, também ficou o da colisão:

Imagem dos backdrops (fundos) do stage

O resultado desse dia foi um jogo com tela de início, cenário com o labirinto sendo exibido após o clique do mouse e a personagem se movimentando:

Imagem dos backdrops (fundos) do stage

Dia 10

Depois de algumas melhorias na movimentação da personagem, tive o seguinte script como resultado:

Imagem dos backdrops (fundos) do stage

Script de movimentação da personagem no labirinto

A personagem inicia o jogo oculta e é exibida somente após o clique na tela do jogo para iniciar. O primeiro if move a personagem até que ela não esteja encostando nas paredes do labirinto. Como estava considerando 3 labirintos diferentes, nem sempre a posição [0,0] será uma área livre. Também é feita a movimentação da personagem para a camada principal (front layer), assim ela não é exibida atrás do labirinto ou de algum elemento do jogo. Por fim, alterei a exibição da costume, de acordo com a tecla pressionada. O gif do dia 9 mostra alguns erros na costume quando mudo a direção da personagem, esse novo script corrige isso.

A partir daqui outras coisas surgiram e eu não consegui seguir adiante.


Referências

Discuss Scratch - How to make sprites move randomly in a maze?

Discuss Scratch - How to stop sprites from moving through walls in maze games

Discuss Scratch - How to zoom in and out project?

Scratch Wiki - Change Size by () (block)

Scratch Wiki - Backdrop

Scratch Wiki - Switch Backdrop to () (block)

Scratch Wiki - Next Backdrop (block)

Scratch Wiki - Timer (block)

Scratch Wiki - Move () Steps (block)

Sprite sheet cutter


Pretendo retomar esse desenvolvimento e mostrar o resultado em outro post, mas por enquanto ele está em espera. Mesmo não conseguindo concluir, achei que valeu muito a pena ter participado. O evento tem diversos conteúdos para os desenvolvedores e o fórum tem muita interação, além do servidor no Discord.

Obrigada por acompanhar e até a próxima!

O link do post foi copiado com sucesso!

Mais conteúdos de Ingrid Machado

Imagem de capa do post Jogo da bruxinha no Scratch

03 Mar 2021 • Programação

Jogo da bruxinha no Scratch

Escrevi esse post antes do O que é Scratch, então talvez algumas implementações tenham sido feitas porque ainda não estava sabendo muito a respeito da ferramenta. Para iniciar no Scratch, acre...

6 minutos

Imagem de capa do post Incluindo sprites no Scratch

17 Fev 2021 • Programação

Incluindo sprites no Scratch

Nos posts anteriores, apresentei o Scratch e falei sobre o stage, onde o resultado dos jogos pode ser visualizado. Agora chegou o momento de falar sobre os elementos que podem ser incluídos nos jog...

2 minutos

Imagem de capa do post Stage do Scratch

10 Fev 2021 • Programação

Stage do Scratch

No primeiro post sobre o Scratch, foquei nos blocos de código, que são utilizados para implementar a lógica do jogo. Neste post, vou focar no stage, que é a área onde o resultado do desenvolvimento...

1 minutos

linkedin icon
LINKEDIN
Twitter icon
TWITTER
RSS icon
RSS
Lnk.Bio icon
LNK.BIO

Ingrid Machado © 2019 - 2024

• Ingrid Machado © 2019 - 2024

• Layout por Victoria Facundes • Desenvolvido por Cristhian Rodrigues

VOLTAR AO TOPO

voltar para o topo