Um roteiro pra te ajudar a guiar o aprendizado de uma criança em tecnologia, usando Scratch.
Módulo: 1 - Mais Scratch
Atividade: 2 - A Vida da Libélula
Projeto pronto: contém spoilers
⚠️ A partir dessa atividade, o material original não possui tradução pra português. Por isso, vamos passar a incluir mais detalhes nas atividades aqui no site pra suprir essa falta.
Vamos fazer um jogo onde o jogador controla uma libélula e a alimenta para que ela cresça o suficiente.
A seção “What you will make” do material tem um exemplo do jogo pronto pra você poder testar. Caso queira testar, aqui estão algumas instruções:
Decida qual vai ser a temática de seu jogo e escolha qual vai ser o plano de fundo. O material original utiliza o cenário Jurassic
(jurássico).
Depois disso, crie um novo ator que vai ser seu personagem principal. Pode ser a libélula (Dragonfly) como no exemplo, ou um outro ator que você escolher.
O código do personagem principal é o seguinte:
Quando testar seu jogo, vai ver que a libélula está andando “de lado” em direção ao mouse. A gente já teve que lidar com isso antes. Você lembra o motivo?
Acontece que todas as fantasias no Scratch que forem usufruir de direção, devem estar preparadas e apontar/olhar pra direita.
Por isso, vamos alterar a fantasia do nosso personagem principal pra garantir que ele olha pra direita:
Agora, vamos fazer uma ciência de sons pra construir o bater-de-asas da nossa libélula.
Primeiro, vamos adicionar um novo som à libélula, o som Crank
. Quando adicionar, dá um play e me diz: será que dá pra usar isso pra fazer som de libélula?
Vamos fazer uma operação! Selecionamos só um pedaço do som da libélula, e clicamos no “Copiar como novo” pra separar o recorte em outro som:
Ah, e nomeia o novo som criado para “asas” pra facilitar pro futuro.
Agora, adicione o novo bloco no código da libélula pra emitir o som e veja se o barulho das asas está bom. Caso não estiver, experimente brincar com os efeitos de som, ou selecionar partes diferentes do som:
Agora, queremos adicionar o que pode ser o alimento da nossa libélula. Vai ser a refeição que vai fazer a libélula crescer de tamanho.
Aqui no exemplo, vamos pegar emprestado uma mosca que está dentro da fantasia de um sapo. Procure o ator “Frog 2”, renomeie-o pra “mosca”.
Vá nas fantasias do sapo, deixe apenas uma, e utilize a ferramenta “Seta” pra selecionar apenas o sapo e apagá-lo.
Depois disso, use a seta pra mover a mosca que sobrou pro centro do ator (a “mirinha”):
Agora, vamos fazer o código da mosca para que ela fique andando e rebatendo nas bordas do cenário:
Pra ela não ficar sempre rebatendo na horizontal, mude ela pra uma posição diagonal.
Agora, finalmente chegou a hora de aprendermos um dos principais blocos no mundo da programação: O se ... então
.
Esse bloco funciona como um “detector de mentiras”: Ele abraça blocos dentro dele, mas esses blocos só são executados caso a condição
seja verdade.
A condição é essa forma de hexágono com pontas nas laterais. Ela é como se fosse uma frase, que pode ser verdade, ou mentira (verdadeiro/falso
).
Aqui estão alguns exemplos de condições que podem ser verdadeiras ou falsas:
No nosso projeto, precisamos saber se a mosca encostou na libélula pra podermos aumentar de tamanho. Nossa condição é a tocando em ...
, que é verdade quando o ator encosta no outro.
Pra usar o bloco se ... então
, vamos começar puxando nossa condição da área de Sensores - tocando em ...
e escolha o ator da libélula (lembre-se de nomear o ator da libélula pra facilitar pro futuro).
Combine os dois blocos encaixando a condição no espaço do hexágono do bloco se ... então
.
Tudo o que estiver sendo abraçado pelo se ... então
, só vai ser executável caso nossa condição seja verdade.
Pra causar o efeito da mosca sendo consumida, vamos usar o bloco esconda
. Adicione-o dentro do bloco se ... então
e teste seu jogo.
| 💡Se sua mosca sumir e você quiser testar mais, clica no ícone dos olhos no painel do ator próximo ao nome dele
Pra uma nova mosca aparecer depois, vamos usar o bloco espere ...
junto com o bloco vá para posição aleatória
e o mostre
, vai causar a ilusão de ser uma nova mosca aparecendo, mas na verdade é a mesma.
Esse aqui é o código da nossa mosca até agora:
Pra mosca sempre aparecer no começo do jogo, adicionamos um bloco mostre
no começo do código também.
Chegamos no mesmo dilema da atividade anterior: nosso código de capturar a mosca está no próprio ator da mosca, e agora precisamos fazer a libélula crescer - nossos atores precisam se comunicar!
No código da mosca, logo após o bloco esconda
, vamos adicionar um bloco transmita ...
, com uma nova mensagem chamada "alimento"
:
E assim que o ator da libélula receber essa mensagem, ele deve aumentar de tamanho, tocar um som, e finalizar o jogo caso esteja no tamanho máximo.
Pra começar, vamos iniciar um novo bloco no ator da libélula com o bloco quando eu receber ...
com a mensagem "alimento"
.
Adicione um novo som (“Chomp”) no ator da libélula e use o bloco toque o som ...
logo abaixo do primeiro bloco.
Depois desse, coloque o som mude ... no tamanho
e teste seu código:
E pra fechar, precisamos saber se o tamanho da libélula é grande o suficiente.
Pra isso, também vamos usar o bloco se ... então
, e nossa condição vai verificar o tamanho da libélula.
Na categoria Operadores (blocos verdes), conseguimos encontrar condições de comparação matemática, como maior
, menor
, igual
, etc.
Esses blocos possuem dois encaixes redondos, que podem conter valores como tamanho
do ator.
Vamos usar esses blocos e encaixá-los de forma com que nossa condição fique assim: tamanho > 100
. O valor tamanho
pode ser encontrado no fim dos blocos de Aparência.
Encaixe essa condição no se .. então, deixando assim:
O que deve acontecer se nossa libélula chegar ao tamanho máximo? Aqui no nosso exemplo, vamos falar uma frase e finalizar o jogo com o bloco pare todos
. Esses blocos devem ficar dentro do bloco se ... então
:
Não sei se você notou: ao parar o mouse, a libélula fica completamente maluca quando chega nele, tremendo e mudando de direção adoidada. Eu particularmente amo quando os bugs são engraçados desse jeito.
Apesar disso, temos que deixar o jogo polido pras pessoas que jogarem, então vamos corrigir isso.
O bug está acontecendo por que a libélula sempre vai andar em direção ao mouse, mesmo quando já estiver perto dele, causando esse efeito de “tremilique”.
Pra corrigir esse problema, vamos adicionar um bloco se ... então
pra garantir que só vamos andar pra frente, caso a libélula ainda não tenha alcançado o cursor:
Pra fazer isso no código da libélula, vamos usar o sensor tocando em ...
como condição pra detectarmos se já estamos tocando no mouse.
Dessa vez, vamos fazer algo um pouco diferente: queremos andar com a libélula caso não esteja tocando no cursor. Temos um operador com o nome não ...
que vai ajudar a montarmos nossa condição.
No final, a condição vai ser: se a libélula não estiver tocando no cursor
, ou na linguagem do Scratch, se não tocando em cursor do mouse?
:
Com esse bloco pronto, podemos colocar dentro dele todo o código que faz a libélula andar, ficando assim no final:
💡ao invés de utilizar o bloco
não tocando em ponteiro do mouse
, que tal tentar algo comodistância até ponteiro do mouse > 50
? Assim, a libélula pode parar até mesmo antes de chegar perto do cursor. Esses blocos estão em Sensores e Operadores.
Do jeito que o jogo está agora, a libélula consegue comer moscas com suas asas e corpo, não só com sua boca. Pra corrigir isso, vamos fazer a libélula comer a mosca só quando estiver tocando em sua boca.
Pra corrigir isso, vamos usar uma técnica do Scratch que nos permite dizer se o ator está tocando uma cor específica.
Primeiro, vamos escolher uma cor pra boca da libélula. Vá até a fantasia da libélula que está virada pra direita, selecione a ferramenta de balde, escolhar uma cor e pinte a boca da libélula, com atenção nos números da cor escolhida, pois vamos usar essa cor no código da mosca.
Agora, no código da mosca, na condição que diz se a mosca está encostando na libélula, vamos usar o operador ... e ...
pra combinar duas condições: tocando em libélula
e tocando na cor ...
.
💡Quando usamos o operador
... e ...
, dizemos pro “detector de mentiras” que as duas condições precisam ser verdade. Visite a explicação sobre condições pra saber mais sobre esse e outros operadores lógicos.
A cor que você colocar no bloco tocando na cor ...
deve possuir exatamente os mesmos números da cor que você usou pra pintar a boca da libélula.
O código final da mosca vai ficar assim:
Pra finalizar as sugestões do material original, vamos adicionar mais uma opção de banquete pra libélula.
Duplique o ator da mosca clicando nele com o botão direito do mouse e selecionando “Duplicar”. Pra deixar a nova mosca diferente da outra, você pode trocar coisas como:
E essa foi a atividade de hoje! Como desafio, será que você consegue adicionar mais funcionalidades no seu jogo?
Nos vemos na próxima atividade!
Variáveis são uma forma de guardarmos algo na memória pra não esquecermos.
Você já precisou anotar alguma coisa pra não esquecer? Nosso computador precisa fazer isso o tempo todo!
Uma variável no Scratch é como uma gaveta, mas é uma gaveta peculiar, já que ela só guarda uma coisa de cada vez.
Essa coisa pode ser um número ou texto, e podemos mexer nessa gaveta desde que sigamos a única regra: cada gaveta só guarda uma coisa:
Pra criar uma variável no Scratch, basta ir até a seção Variáveis
e clicar em Criar uma variável
:
Quando criar, você deve escolher um nome pra ela, e esse nome é como se fosse uma etiqueta que colamos pra identificar o conteúdo:
No exemplo acima, temos uma variável com o nome nome do jogador
e nela está guardado o nome Natalia
O Scratch nos permite gerenciar nossas gavetas com os seguintes blocos:
mude <variável> para ...
: substitui o que está dentro da gaveta por um valor novo;adicione ... a <variável>
: acrescenta (ou subtrai, com valores negativos) um valor ao número que está na gaveta;mostre/esconda a variável ...
: exibe ou esconde as variáveis no painel do jogoAs variáveis podem ou não ser vistas pelo jogador. Você pode usar os blocos de mostrar/esconder acima, ou interagir com as variáveis diretamente pelo painel. Experimente clicar com o botão direito sobre uma delas:
Você já deve ter visto alguns blocos ou encaixes com o formato de hexágono:
Nós chamamos esses blocos de condições, e essas condições podem ser mentira ou verdade.
Os encaixes hexagonais são como detectores de mentira: eles recebem uma condição e escolhem o que vão fazer com ela.
O bloco se ... então
, por exemplo, abraça seus blocos-filho e só os executa quando a condição for verdade. Ele é como uma mamãe-coruja protegendo seus filhos das mentiras do mundo.
No exemplo abaixo, temos uma condição com esse bloco, e os blocos de dentro só vão ser executados caso a tecla espaço esteja pressionada:
Ao longo das atividades, vamos ver juntos outras formas de usar nossos blocos detectores de mentira pra controlarmos a lógica dos nossos jogos.
Além disso, o Scratch também possui operadores lógicos, que nos ajudam a combinar condições ou manipular verdades.
O operador não ...
, por exemplo, transforma uma mentira em uma verdade:
Essa é a lista de operadores lógicos nas condições:
Operador | Descrição |
---|---|
não ... | Inverte uma condição |
... ou ... | Verdade se ao menos uma das condições forem verdade |
... e ... | Verdade apenas se ambas as condições forem verdade |
O Scratch tem um relógio interno que começa a contar quando você clica na bandeira verde pela primeira vez.
O valor desse cronômetro pode ser usado em inúmeros lugares em seu formato arredondado, na seção de “Sensores”:
Perceba o formato dele: esses cantos arredondados nos permitem colocá-lo em qualquer lugar onde podemos digitar um número ou texto.
Além disso, também podemos usar o bloco Zerar cronômetro
pra voltar o contador pra zero. Lembre de sempre adicioná-lo após o Quando a bandeira verde for clicada
.
Existe também um bloco de início (topete) que ativa blocos de código a partir de um determinado tempo: Quando ... > ...
Ele está na seção de “Eventos” e pode estar configurado para “ruído”.
Atores são todas as pessoas e objetos com algum tipo de comportamento dentro do jogo. Sem eles, nosso jogo seria apenas um palco vazio.
Os atores são feito de três coisas:
Um ator pode ter múltiplas fantasias e sons, e através do código, você pode manipulá-los da forma que quiser, por exemplo:
Código é o que dá vida a tudo. Ele serve para trocarmos de fantasia ou cenário - Também pode nos ajudar a emitir sons e movimentar atores.
Ele é composto por blocos de diferentes tipos, listados no painel esquerdo da aba código.
Blocos podem ser encadeados formando trechos de código (ou scripts), que são executados em sequência, de cima para baixo.
💡 Todos os trechos de código vão começar a partir de um bloco do tipo evento que começa com
quando...
.
Você pode testar o funcionamento de blocos ou trechos de código clicando sobre eles.
Fantasias são os visuais dos atores, que por sua vez, podem ter múltiplas fantasias.
Elas são gerenciadas através da aba fantasias, onde você pode criar, remover, editar e renomear fantasias.
Você vai precisar delas quando for fazer coisas como:
Esses são os blocos relacionados com fantasias de um ator:
mude para a fantasia
: troca a fantasia do ator para a fantasia selecionada. Você pode nomear fantasias pra facilitar o uso desse bloco;próxima fantasia
: troca a fantasia do ator para a próxima fantasia na sequencia de fantasias, seguindo a ordem. Pode ser útil para animar um ator;mude ... ao efeito ...
: aumenta ou diminui intensidade ao efeito de uma fantasia. Efeitos são como filtros de imagem de redes sociais e são controlados por intensidade, um valor de 0 até 200;defina o efeito ... como ...
: Ao invés de aumentar ou diminuir, define o a intensidade do efeito da fantasia selecionadoçremova os efeitos gráficos
: Remove todos os efeitos gráficos da fantasia💡 O ator sempre usará a última fantasia selecionada na aba fantasias, portanto, é uma boa prática você usar o bloco
mude para a fantasia [fantasia inicial]
pra garantir que o ator sempre terá a fantasia correta no início do jogo.
Sons representam todo o tipo de voz, barulho, efeito ou música que um ator ou cenário podem emitir.
São gerenciados através da aba Sons, onde podem ser adicionados, removidos, editados e renomeados.
Os sons são úteis quando você quiser fazer coisas como:
Esses são os blocos que controlam os sons:
toque o som ... até o fim
: Toca um som e aguarda até o fim antes de passar para o próximo bloco;toque o som ...
: Toca um som, mas ao invés de aguardar até o fim, passa imediatamente para o próximo bloco;pare todos os sons
: Para de tocar todos os sons que estão tocando imediatamente;mude ... no efeito ...
: Adiciona ou diminui a intensidade de um efeito no som. Efeitos de sons são controlados assim como os efeitos de fantasias;mude o efeito ... para ...
: Define a intensidade do efeito do som, de 0 até 200;remova os efeitos sonoros
: Remove todos os efeitos sonoros do som;mude o volume em
: Aumenta ou diminui o volume dos sons;mude o volume para ...%
: Ao invés de aumentar ou diminuir o volume, define para um valor de 0 até 100%.💡 O volume individual de um som pode ser alterado na aba sons. Se achar que os sons de seu jogo estão altos de uma forma geral, utilize o bloco
mude o volume para ...%
no início do jogo para um valor mais agradável.
A principal parte da nossa peça de teatro é o palco. Sem ele, não haveria lugar para os atores existirem.
Assim como atores, Palcos possuem:
Todos os jogos possuem um palco, mesmo que ele tenha apenas um cenário em branco.
A primeira coisa importante sobre cenários é que eles são exatamente como fantasias.
Como palcos não usam fantasias, usamos o nome cenário.
Você pode ter vários cenários em um palco para fazer coisas como:
Todos os atores o Scratch possuem uma posição. Ela diz qual lugar do palco nosso ator está.
Pra posicionar o ator horizontalmente, usamos o x
. Verticalmente, usamos o y
.
Quanto maior o x
, mais o ator fica à direita
Quanto maior o y
, mais o ator sobe
Pra facilitar o entendimento, podemos comparar esse conceito com outros jogos que usam o plano cartesiano:
y
e as letras são o x
;y
e os números são o x
;💡 Pensem em alguns
x
ey
e adivinhe onde eles ficariam no quadro acima
Alguns blocos de código que controlam o posicionamento:
mova ... passos
: anda passos na direção que o ator está olhandová para x: ... y: ...
: teletransporta o ator pra uma posição exatavá para ...
: teletransporta o ator pra outro ator, mouse ou aleatoriomude x/y para ...
: teletransporta o ator em apenas um eixoadicione ... a x/y
: acrescenta ou diminui a posição de apenas um eixoAtores podem ficar na frente ou atrás de uns aos outros, e esse comportamento pode ser controlado.
Um ator pode ser trazido pra frente (mais perto da câmera), ou enviado pra trás com os blocos do tipo Aparência:
vá para a camada ...
: coloca um ator em frente a tudová para ... ... camadas
: move camadas pra trás ou pra frenteOs atores não precisam sempre olhar pro mesmo lado, desde que a gente controle sua direção.
A direção de um ator pode ser controlada manualmente pelo painel de atores à direita, ou através de códigos.
Quando a direção é alterada, o ator vai mudar sua orientação de acordo com o estilo de rotação:
rotação completa
: o ator vai girar como se fosse o ponteiro de um relógioesquerda/Direita
: o ator não gira, ele apenas olha pra um lado, ou para outronão gire
: nada acontece ao mudar a direção💡 Você pode alterar o estilo de rotação com os ícones logo abaixo do círculo de controle da direção
Esses são os blocos de código relacionados à direção:
Dentro do código de atores, é possível usar um recurso de controle chamado repetição ou loop.
Esse bloco nos permite repetir trechos de código sem precisarmos adicionar mais blocos do mesmo tipo:
Além de simplificar nosso código, esse bloco também nos permitirá repetir blocos sem precisar inicialmente saber a quantidade de repetições a serem feitas.
Animações em jogos são feitas da mesma forma que animações eram feitas em papel:
As linhas do desenho se mexem um pouco de cada vez, nos dando a impressão de que estão em movimento.
Pra simular esse mesmo comportamento utilizando Scratch, vamos usar blocos de repetição.
Dentro dos blocos de repetição, vamos colocar blocos que fazem nosso ator se mover, por exemplo:
mova ... passos
adicione ... a X
próxima fantasia
Quando estiver animando, você pode controlar os valores dos blocos de repetição e movimento pra testar diferentes velocidades e distâncias:
O número no bloco mova ... passos
vai dizer a velocidade da animação. Se multiplicarmos os dois números, temos a distância total que o ator vai se deslocar.
Em algumas situações, você pode preferir definir o destino do movimento diretamente ao invés de repetir um movimento rapidamente. Nesses casos, use os blocos deslize por ... segs. até ...
.
Com ele, você pode escolher um destino através de coordenadas, ou até mesmo a posição de outro ator.
Esse bloco não exige o uso de blocos de repetição.
Há um tipo de bloco especial que determina o começo de um script (conjunto de blocos). Nós os chamamos carinhosamente de “Blocos de topete”.
Esses blocos têm um desenho especial curvado na parte de cima, identificando que não há outro bloco que ficará acima dele.
Eventos servem pra iniciarmos scripts quando coisas acontecem, por exemplo:
O evento de início de jogo (quando bandeira verde for clicado
) deverá aparecer em todos os jogos que você criar.