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

03 Mar 2021 | 6 minutos • Programação

Jogo da bruxinha no Scratch

De JavaScript para blocos coloridos

Ingrid Machado

Ingrid Machado

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

Image de capa do post Jogo da bruxinha no Scratch
Foto de Ravi Kumar, via Unsplash

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, acredito que o melhor é tentar reproduzir um jogo que eu já conheço. Além, é claro, de mexer em todos os blocos para entender o funcionamento. Sendo assim, vou fazer o jogo da bruxinha que foi desenvolvido na Imersão GameDev JavaScript da Alura dentro do Scratch.

O jogo é um infinite runner, onde uma bruxinha está andando pela floresta e precisa desviar dos vilões que vão aparecendo na tela. A implementação e o resultado final, feito no p5.js, está no post “Resultado da Imersão GameDev JavaScript da Alura”.

Incluindo os sprites

As imagens fornecidas para a imersão possuíam todas as diferentes posições do sprite dentro de um único arquivo. Para conseguir incluir um sprite e em seguida as costumes no Scratch, usei a ferramenta online Sprite Cutter para dividir as imagens.

Para incluir uma personagem, é necessário fazer o seguinte:

Tela para incluir sprite

Choose a Sprite -> Upload Sprite

Pasta com as imagens do sprite da bruxinha com a primeira imagem selecionada

Seleciona a primeira imagem do sprite para adicionar

Tela para incluir as costumes do sprite da bruxinha

Dentro da aba Costume: Choose a Costume -> Upload Costume

Pasta com as imagens do sprite da bruxinha com o restante das imagens selecionado

Seleciona o restante dos sprites

Fiz o mesmo processo para todos os inimigos e também incluí o coração e a mensagem de game over:

Área com todos os assets adicionados

Assets do jogo

A diferença aqui é que para o coração e a mensagem de game over não são necessários os passos dentro da aba Costume.

Agora precisamos adicionar os cenários:

Tela para incluir os backdrops

Choose a Backdrop -> Upload Backdrop

Área com os backdrops adicionados

Cenários na aba Backdrop após serem adicionados

Depois de adicionar todos os assets, o canvas fica uma bagunça:

Stage com todos os sprites

Canvas com todos os assets visíveis

Para ficar um pouco mais organizado, vou manter somente a Hipsta (a bruxinha) no canvas e marcar os outros sprites como não visíveis. Além disso, vou posicionar e redimensionar a Hipsta.

Campos com as configurações do sprite da bruxinha

Campos editáveis dos sprites

Mantive a Hipsta com o tamanho de 30%, na posição (-200,-80).

Para adicionar os sons, basta selecionar a aba Sound e clicar no menu:

Tela para incluir som

Choose a Sound -> Upload Sound

Área com o som de fundo de jogo adicionado

Sons do jogo adicionados no projeto

Até aqui já fizemos grande parte do que está no arquivo load.js no projeto original.

Fundo com scroll infinito

Aqui eu apanhei um pouco e decidi não me estressar com um detalhe no cenário que deixa a imagem sobreposta de forma errada de vez em quando. Eu incluí duas imagens do cenário como sprites, já que aparentemente não é possível fazer o cenário se movimentar usando o backdrop.

Script com a inclusão da primeira imagem de fundo

Fundo 1

Script com a inclusão da segunda imagem de fundo

Fundo 2

O fundo 1 inicia na posição (0,0) e, ao sumir na borda esquerda, reaparece na borda oposta do canvas. O fundo 2 se move na mesma velocidade, mas inicia na borda direita do canvas e, ao atingir a esquerda, retorna para a borda oposta para reaparecer. Estes blocos correspondem ao código no arquivo cenario.js.

Gif do fundo em movimento

Cenário em movimento

Movimento Hipsta

O passo anterior parece ter facilitado o trabalho feito no código, mas algumas peculiaridades do Scratch fizeram eu apanhar um pouco. Eis o motivo do trabalho extra:

Plano cartesiano do p5.js

Plano cartesiano do p5.js

Plano cartesiano do Scratch

Plano cartesiano do Scratch

O plano cartesiano do p5.js tem apenas um quadrante e o plano cartesiano do Scratch tem os quatro quadrantes. Sendo assim, o ponto (0,0) fica em lugares bem diferentes no canvas.

Depois de adicionar a Hipsta, tentar replicar o código com o pulo e falhar miseravelmente, eu entendi que a diferença era essa. Sendo assim, o bloco seguinte está com a mesma fórmula do arquivo personagem.js, mas com valores diferentes para funcionar no plano cartesiano do Scratch.

Scripts com o cálculo do pulo da bruxinha

Blocos para a movimentação da Hipsta

O bloco “define aplicaGravidade” é criado na categoria “My Blocks”. É basicamente a mesma coisa que declarar uma função que será utilizada posteriormente. Observe que eu chamo o “aplicaGravidade” no final do bloco que roda quando o jogo é iniciado.

Gif do fundo em movimento

Hipsta se movimentando e pulando ao clicar na seta para cima no teclado

Inimigos

Para adicionar os inimigos, inicialmente posicionei os 3 aparecendo na tela e ajustei a posição y de cada um. O x no print é um valor inicial apenas para poder visualizar todos na tela e fazer o ajuste dos 3 ao mesmo tempo.

Script com a posição inicial e animação do inimigo

Blocos para adicionar um inimigo

Stage com a bruxinha e os inimigos adicionados

Inimigos na tela

Assim como os blocos utilizados para adicionar a Hipsta, a animação de cada inimigo é feita utilizando o comando “next costume” para cada sprite.

Agora é necessário fazer cada inimigo aparecer na tela a partir da direita. Para isso, vou colocar o x inicial de cada inimigo para um valor maior do que o disponível no eixo x. Mesmo colocando esse valor em 450, o máximo permitido pelo Scratch foi 246, o que deixava a lateral do sprite aparecendo na direita, mas com a movimentação nem dá para perceber.

Script para a movimentação do inimigo

Bloco do inimigo

Para ficar com velocidades diferentes a cada aparição, adicionei um random no bloco “move”.

Colisão

Para a colisão, incluí somente um bloco que detecta quando o sprite está tocando em algo. O teste é se a Hipsta está colidindo em algum dos inimigos. Caso isso aconteça, o jogo para.

Script da bruxinha com a detecção de colisão com cada inimigo adicionada

Script da Hipsta com a detecção de colisão

Gif do fundo em movimento

Hipsta colidindo com a gota voadora

Como é possível perceber, precisei mudar o valor da altura do pulo para poder gravar a Hipsta passando por pelo menos um inimigo antes de morrer.


A minha intenção inicial era fazer a conversão de todo o jogo em uma tarde, mas perdi mais tempo do que eu imaginava com a questão do plano cartesiano. Como estou aprendendo, também fui parando para ler as referências e entender o que fazer para cada etapa do jogo. Mas acho que fiz o suficiente para ver como é mais simples fazer um jogo no Scratch. Não considero o p5.js difícil e reconheço que ele aparenta possuir mais recursos, mas é legal ver como a mesma mecânica de jogo é implementada em cada ferramenta.

Espero ter alguma ideia de jogo legal para fazer no Scratch e também estou procurando outras plataformas de desenvolvimento de jogo para estudar. Não pretendo desenvolver nada muito complexo, mas é um bom passatempo.

Caso queira reproduzir o jogo no Scratch ou tenha ficado com alguma dúvida, a caixa de comentários está sempre aberta.

Até a próxima.

O link do post foi copiado com sucesso!

Mais conteúdos de Ingrid Machado

Imagem de capa do post My First Game Jam

24 Fev 2021 • Programação

My First Game Jam

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 in...

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