DEVjr M1 Prof

3 capítulo 1
94 capítulo 2
152 capítulo 3
240 capítulo 4
319 capítulo 5
378 capítulo 6
448 capítulo 7
533 capítulo 8
597 capítulo 9
índice
capítulo 1
desenvolvedor
de games júnior
daily
5 Min.
professor
// Professor(a), o objetivo do ‘Daily’ é realizar uma apresentação

dos temas da aula. Geralmente, esse momento será composto pela
revisão do conteúdo trabalhado na aula anterior e a correção rápida
de qualquer atividade que possa ter sido passada para casa no final
do encontro anterior.
Na primeira aula, não há revisão e também não há correção de
atividade, apenas a apresentação do curso e do tema.
Em todas as aulas, os objetivos serão apresentados em forma de
tópicos. Você pode ler para os alunos e explicar que todos esses
pontos serão explicados ao longo do encontro. Dessa forma, você
conseguirá controlar a ansiedade da turma quanto aos novos
termos mencionados. Aproveite o momento para realizar também os
combinados da aula, ou seja, o que poderá ou não ser feito durante
o encontro. Por exemplo:
“Pessoal, durante essa aula, vamos aprender muitas palavras
diferentes, mas não fiquem com receio de não saberem o significado
desenvolvedor de games júnior | módulo 1 | capítulo 1
delas, pois iremos aprender juntos, aos poucos. Se precisarem
perguntar alguma coisa, levantem a mão e esperem o seu momento
de falar. Combinado?” //
5
Seja bem-vindo(a) ao curso de Desenvolvedores de Games e Apps! Hoje,
você iniciará uma jornada para conhecer coisas incríveis do mundo STEAM
(Ciências, Tecnologia, Engenharia, Artes e Matemática)! Nesse primeiro
módulo, você conhecerá os principais conceitos de lógica de programação
e iniciará o desenvolvimento de um game com o tema ‘geolocalização’.
Você está preparado(a)?
Objetivos da aula
Nesta aula, você vai:
• Conhecer a ferramenta Gamefroot;

• Aprender sobre o conceito de ‘eventos’;
• Iniciar o desenvolvimento de um game;
• Utilizar elementos para criar a fase de um jogo:
• Inserir o personagem e realizar as primeiras programações;
• Aplicar o tema de geolocalização em um contexto.
6
back-end
7 Min.
professor
// Professor(a), em todas as aulas teremos o bloco ‘Back-end’,

que é a introdução da aula que iniciamos anteriormente. Por aqui
estará o enredo principal que trará os pontos que serão abordados
e trabalhados. Também estão concentradas nesse bloco as
explicações de termos novos que serão ensinados na aula.
Os textos do material didático do aluno podem ser usados por você
como base para a discussão. \\
Ei, você que está prestes a se tornar um fluente digital, me conta aí: você
usa conceitos de programação no seu dia a dia? Eu aposto que sim! Para
entender o conceito que será apresentado nessa aula, vamos começar
com algo bem simples: pense em sinais que ocorrem ao longo do dia que
te indiquem que algo precisa ser feito. Por exemplo, quando você observa
nuvem de chuva no céu, você fecha a janela. Quando o despertador toca,
você se levanta. E por aí vai! desenvolvedor de games júnior | módulo 1 | capítulo 1
Agora você deve estar se perguntando: “tá, mas e o que isso tem a ver com
tecnologia?”. Tem tudo a ver! Sabe por quê? Os computadores não pensam
como nós humanos, por isso, sempre que precisamos criar algum jogo,
resolver um problema ou desenvolver um programa, precisamos estipular
quando determinados passos devem ser executados. E, para isso, usamos
os ‘eventos’. Um evento é uma ação ou acontecimento que é detectado
por um computador e faz com que alguma coisa aconteça. Temos, por
exemplo, eventos que são ativados com o clique do mouse, o pressionar de
8
um botão e etc.
Agora que você conheceu este conceito, consegue pensar em mais eventos
que utiliza na sua rotina?
professor
// Faça um exercício rápido e questione os alunos sobre quais outros

possíveis eventos eles poderiam mencionar. Aproveite e amarre
o tema com o ‘Bugou?’, que descreve a importância em aprender
programação para desenvolver outras habilidades. //
bugou
Quando você aprende como programar, você desenvolve seu cérebro! Afinal, fica mais
fácil analisar situações e você pode desenvolver muitas outras habilidades importantes
como a melhoria da escrita, o pensamento crítico, o trabalho em equipe e o raciocínio
lógico! Então, vamos colocar essas habilidades em prática? desenvolvedor de games júnior | módulo 1 | capítulo 1
Referências:
https://bit.ly/FT_M1A1_1
9
front-end
68 Min.
professor
// O ‘Front-end’ é o momento dedicado para que os alunos possam

realizar as principais tarefas da aula. Após a introdução e o
aquecimento, que estão envolvidos com a apresentação da aula
e o conceito a ser trabalhado, o aluno será exposto ao conteúdo
prático relacionado ao tema. Nesse módulo, eles irão trabalhar com
a geolocalização e desenvolverão um game em que o objetivo do
personagem é explorar o desconhecido em busca de um pergaminho
para montar um mapa que auxilie futuros exploradores. É importante
que você esteja preparado(a) para as dúvidas relacionadas ao passo
a passo ou ao tema. As instruções, desta e das próximas aulas, estão
formatadas para que os alunos consigam ter autonomia na criação,
além de servirem para te ajudar na aula, caso os estudantes se
percam, durante o desenvolvimento. Apesar disso, há momentos em
que você precisará dar alguma orientação, principalmente quando
há um tempo específico disponível para a atividade.
Todos os lugares que precisarem dos direcionamentos diretos da
sua parte estarão comentados aqui no material.\\
Você já parou para pensar como era a vida antes da eletricidade e das
tecnologias digitais?
Pois é, na época dos Grandes Descobrimentos, entre os séculos XV e XVI,
as pessoas utilizavam navios movidos a velas para se locomover de um
continente a outro. Imagine só a dificuldade dos navegadores para velejarem
na direção correta. Para conseguirem essa façanha, eles utilizavam as
11
‘cartas náuticas’, uma espécie de mapa navegável, desenhado em papel
com linhas e ângulos que indicavam as direções a serem seguidas (latitude
e longitude). Além disso, eles se orientavam pela posição do sol e de
determinadas estrelas e também utilizavam alguns instrumentos (a
tecnologia daquela época) como: a bússola, que indicava a direção norte e
sul dos polos magnéticos da Terra, o sextante e o astrolábio, que mediam
os ângulos entre essas estrelas e o horizonte. Somando essas informações
com os conteúdos das cartas náuticas e fazendo um punhado de cálculos
à mão e sem calculadora, era possível determinar a localização atual do
navio e do ponto de chegada pretendido e, assim, traçar uma ‘rota de
navegação’. O problema é que o navio se movia e, de tempos em tempos
era necessário ‘recalcular a rota’ e fazer aquele montão de cálculos
novamente. A ciência foi evoluindo e hoje chegamos à geolocalização, isto
é, um recurso que permite determinar a posição geográfica de um dispositivo
com base em um sistema de coordenadas. Um exemplo de uso de
geolocalização está no GPS, Global Positioning System (sistema de
posicionamento global). Ele utiliza satélites para fazer cálculos muito mais
precisos e à disposição de qualquer pessoa, bastando dispor de um celular
e um aplicativo de localização. desenvolvedor de games júnior | módulo 1 | capítulo 1
12
Hoje, você iniciará o desenvolvimento de um game que envolve os conceitos
vistos na introdução dessa aula. Nele, o objetivo principal do personagem
será explorar o desconhecido em busca de um pergaminho para montar
um mapa que auxilie futuros exploradores. Então, chegou a hora de colocar
a mão na massa. Siga o passo a passo e divirta-se!
Referências:
professor
//Professor(a), os alunos começarão pela criação de uma conta na

plataforma utilizada para o desenvolvimento do game das duas
primeiras aulas. Não é possível fazer o login diretamente pelo botão
Google caso o estudante tenha menos de 13 anos. Mas ele(a) poderá desenvolvedor de games júnior | módulo 1 | capítulo 1
criar a conta com o e-mail do Google normalmente.
Para que o(a) estudante possa criar a conta, ele(a) precisará de um
e-mail. Caso não tenha, uma
conta única pode ser criada
para todos os alunos da sala. O
site suporta múltiplos acessos
simultâneos com o mesmo
login.\\
13
Passo 1 - Acesse o site: make.gamefroot.com . Assim que a página
carregar, clique no botão ‘Login’, no canto superior direito.
Passo 2 - Na tela de login, temos 2 opções: criar uma conta cadastrando

um e-mail particular, ou fazer o acesso com uma conta cadastrada.
14
Passo 3 - Para criar uma conta, leve o mouse até a opção ‘Create Account’
(criar conta).
Passo 4 - Na janela de criação da conta, clique no campo ‘Choose your

username’, para escolher o nome de usuário.
15
Passo 5 - Pense em um nome que você se lembre facilmente para criar
o usuário. O site não permite que você crie uma conta com um usuário já
existente. Se esse nome for aprovado, aparecerá uma confirmação visual
na tela.
16
Passo 6 - No campo ‘What best describes you?’ (o que melhor descreve
você?), escolha a sua preferência e o objetivo da sua conta no Gamefroot.
Passo 7 - Agora, insira o seu e-mail no campo ‘Your email’. Pode ser
qualquer conta (Google, Hotmail, Outlook etc.). É muito importante que
você se lembre de seu e-mail e senha para que consiga recuperar suas
informações de acesso, caso esqueça.
professor
//Professor(a), caso o aluno não se lembre do seu e-mail ou senha,

você poderá criar uma conta única e compartilhar com todos os
alunos. O site permite múltiplos acesso simultâneos, com um mesmo
login.\\
17
Passo 8 - Feito os passos anteriores, clique no campo ‘Your password’
para inserir a sua senha. Ela precisa ter, no mínimo, oito caracteres, sendo
que pelo menos um deles precisa ser numérico. Repita a senha no próximo
campo para certificar que são iguais. Caso sejam diferentes, aparecerá
na tela uma notificação com letras vermelhas. Repita o processo até que
a senha digitada seja igual nos dois campos, e clique no botão ‘Create
Account’, para criar a conta.
18
Passo 9 - Finalizado o cadastro, você será enviado para a tela de
‘Dashboard’ (painel) do Gamefroot. É nela que começaremos a criar os
projetos.
19
Passo 10 - Clique no botão ‘New Blank Game’ (novo jogo em branco) para
criar um game do início.
Passo 11 - A tela inicial do projeto será iniciada. Nela, temos algumas

faixas de opções importantes, que usaremos durante toda a construção do
nosso game. As explicações virão nos próximos passos.
20
professor
//Professor(a), é importante fixar os nomes das faixas de opções

juntamente com os alunos para facilitar a localização das ferramentas
durante o passo a passo.\\
Passo 12 - Na parte superior, temos a ‘barra de menus’. É nela que podemos

selecionar as principais funções do Gamefroot, como criar um novo modelo,
visualizar o projeto, ou testar o game atual.
Passo 13 - Do lado esquerdo, encontramos a ‘Faixa de Opções’. Nela

podemos criar personagens, animações e fazer upload de cenários. Também
é nesta faixa que selecionamos os blocos de código para a programação.
21
Passo 14 - Ao centro, encontramos a ‘Área de Trabalho’. É aqui que
projetamos visualmente nosso cenário, colocamos os personagens, os
inimigos e os obstáculos do game. Nela, temos um menu com alguns botões
importantes, como ferramenta para selecionar itens, pincel, borracha e caixa
de texto. Ao longo do projeto, você usará todas as opções disponíveis.
Passo 15 - No canto inferior esquerdo se encontra a ‘Janela do Zoom’,

responsável por ajustar a visualização da ‘Área de Trabalho’, que pode ser
usada sempre que for necessário aumentar ou diminuir o tamanho dessa
área. Com ela você pode visualizar melhor o projeto, de acordo com a sua
necessidade.
22
Passo 16 - Como este é o seu primeiro projeto, você usará componentes
que a própria plataforma disponibiliza gratuitamente, como cenário,
personagem, dentre outros elementos. Para começar, leve o mouse até a
‘Faixa de Opções’ e clique em ‘Explore Market’ (explorar o mercado).
Passo 17 - Na janela que surgiu, você pode visualizar todos os projetos

disponíveis. Procure por aquele intitulado ‘Nga Takaro’ e clique sobre ele
uma vez com o botão esquerdo do mouse.
23
Passo 18 - O pacote ‘Nga Takaro’ será aberto, e nesta tela será possível
observar todos os itens disponíveis que podemos utilizar em nosso game.
Desça a barra de rolagem do seu navegador até o final, observando todos

os objetos em ‘Tiles’ (ladrilhos) e ‘Game Objects’ (objetos do jogo).
24
professor
/Professor(a), utilize esse momento para explicar a diferença entre

‘Tiles’ e ‘Game Objects’:
‘Tiles’ (ladrilhos):
São pequenas imagens, normalmente quadradas ou retangulares,
que podem ou não formar uma imagem maior em um cenário. O
conjunto de ladrilhos de um cenário é chamado ‘tileset’.
https://pt.wikipedia.org/wiki/Jogo_eletr%C3%B4nico_baseado_em_
ladrilho
‘Game Objects’ (objetos do jogo):
Todo e qualquer elemento posicionado dentro de um game 2d ou 3d,
como personagens, inimigos, plataformas, partículas etc.
http://unity3d.wikidot.com/gameobject#:~:text=GameObject%20
%C3%A9%20a%20base%20de,ve%C3%ADculo%2C%20um%20
item%2C%20etc . \\
25
Passo 19 - Depois de observar todos os itens disponíveis para utilizarmos
no game, volte no topo da página, clique em ‘GET FOR FREE’ (obter
gratuitamente) e espere o pacote ser adicionado ao projeto.
Passo 20 - Note que, agora, na ‘Faixa de Opções’ estão todos os itens

do pacote selecionado, listados conforme sua categoria: ‘Characters’
(personagens), ‘Animals’ (animais) etc.
26
Passo 21 - Depois, leve o mouse até a barra de rolagem da ‘Faixa de
Opções’, e desça até o final para observar como os itens foram classificados
e ordenados.
27
professor
//Professor(a), a instrução abaixo tem caráter didático, e serve

apenas para contextualizar o aprendizado, não sendo necessário
que os estudantes sigam esse passo a passo:
Quando projetamos um game em 2D, precisamos observar a

quantidade de camadas que serão adicionadas. Uma camada é
como uma folha de vidro transparente sobre a qual os objetos são
colocados. Elas podem ser usadas para mostrar diferentes grupos
de objetos que estão na frente ou atrás uns dos outros, e permitem
organizá-los. Os objetos/personagens conseguem interagir se
estiverem na mesma camada. Quanto mais camadas, mais realista
poderá ficar a cena, melhorando o aspecto geral do jogo. Geralmente,
o personagem principal ocupa a camada ‘Main’ (principal).
A camada que compõe o cenário de fundo é a ‘Background’ e pode

ser adicionada clicando em +. Também é possível renomeá-la.
28
professor
Neste exemplo a seguir, adicionamos mais uma camada, denominada

‘Trees’ (árvores), para incluir as árvores no cenário. Lembre-se
de que quanto mais camadas, mais detalhes são adicionados e,
consequentemente, mais trabalho teremos para ajustar e programar
todo e qualquer item incluído.
//
29
Passo 22 - Chegou a hora de começar a criar e estruturar as ‘layers’
(camadas). Uma camada é como uma folha de vidro transparente sobre
a qual os objetos são colocados. Elas podem ser usadas para mostrar
diferentes grupos de objetos que estão na frente ou atrás uns dos outros,
e permitem organizá-los. Os objetos/personagens conseguem interagir se
estiverem na mesma camada. Normalmente, tudo o que fica no fundo irá
para a camada de trás ‘Background’ (plano de fundo). Os personagens e
os itens com os quais eles irão interagir ficam na camada central ‘Main’
(principal). E, por último, tudo o que faz parte da interface da tela, como as
barras de vida, textos e pontuação, por exemplo, ficam na camada da frente
‘Hub’. Assim, os objetos inseridos na camada principal não irão interagir
com os das outras camadas.
Para adicionar as camadas, comece levando o mouse ao lado direito da

‘Área de Trabalho’ e clique no botão ‘+’ do menu ‘Layers’.
30
Passo 23 - No submenu que surgiu, podemos criar uma nova camada vazia,
ou uma camada denominada ‘Tile Map’ (mapa de ladrilho). Essa camada é
usada especificamente para criar cenários, em que usaremos objetos/itens
denominados ‘Tiles’ (ladrilhos). Portanto, clique em ‘New Tile Map’ (novo
mapa de ladrilho).
31
Passo 24 - Perceba que uma camada foi adicionada ao painel de ‘Layers’,
denominada ‘Tilemap’. Note que sua tela está quadriculada; isso indica que
usaremos esses quadrados para posicionarmos os itens do cenário.
32
Passo 25 - Então, vamos entender como posicionar as plataformas que
farão parte do cenário que o jogador irá explorar. Queremos deixar esse
espaço similar aos lugares desconhecidos que os grandes exploradores
desbravavam. Para começar, na ‘Faixa de Opções’, clique no ‘Tile’ de sua
preferência. Nesta imagem, selecionamos o último disponível do pacote.
Clique com o botão esquerdo do mouse em cima do que você escolheu e
leve-o para a ‘Área de trabalho’. Perceba que o ‘tile’ acompanha o movimento
do mouse.
33
Passo 26 - Então, clique com o botão esquerdo em alguns lugares aleatórios
da ‘Área de Trabalho’. Perceba que o ‘Tile’ vai sendo inserido de acordo
com os cliques.
Passo 27- Experimente, agora, clicar, segurar o clique e arrastar o mouse

para o lado esquerdo ou direito. Note que são criadas plataformas maiores.
34
Passo 28 - Depois, experimente expandir o movimento para baixo: clique,
segure o clique e arraste o mouse. Perceba que as plataformas são
construídas conforme os movimentos que realizamos.
Passo 29 - Da mesma forma como fez anteriormente, escolha um novo

estilo de ‘Tile’ na ‘Faixa de Opções’. Leve o mouse até o item, clique com
o botão esquerdo, leve-o para a área de trabalho, clique e arraste o mouse
novamente para qualquer direção, inserindo uma nova plataforma no
cenário.
35
Passo 30 - Como estamos aprendendo a criar estruturas, fique à vontade
para explorar essa função.
36
37
Passo 31 - Agora que você já sabe como fazer para construir plataformas
do zero, vamos montar estruturas com um molde para criar um mapa.
Antes, vamos apagar os ‘tiles’ que foram inseridos na tela do game. Então,
procure pela borracha que está na parte superior esquerda, sobre a ‘Área
de Trabalho’.
38
Passo 32 - Depois, com o mouse na tela, clique com o botão esquerdo,
segure o clique e arraste a borracha para os lados, para cima e para baixo.
Perceba que as plataformas que haviam sido criadas começam a ser
apagadas.
39
Passo 33 - Apague todos os ‘tiles’ que foram inseridos, até deixar sua tela
vazia novamente.
Passo 34 - Como a tela está vazia, vamos escolher um plano de fundo.

Para utilizar um modelo preexistente, vá ao menu ‘Layers’ e clique em cima
da camada ‘Background’.
40
Passo 35 - Em seguida, leve o mouse até a ‘Faixa de Opções’, clique em
‘Tracer Maps’ (marcador de mapas) e movimente o mouse para a ‘Área de
Trabalho’.
41
Passo 36 - A estrutura que aparecerá faz parte do pacote que você baixou.
Ela mostra um modelo de como sua fase pode ser organizada e representará
o mapa que o personagem utilizará para sua exploração. Agora, clique em
qualquer lugar de sua ‘Área de Trabalho’ para posicionar essa estrutura.
Passo 37 - Para visualizá-la melhor, vamos mexer na ‘Janela do Zoom’ da

‘Área de Trabalho’. Clique em ‘-‘ (sinal de menos) até diminuir o zoom para
10%.
42
Passo 38 - Na parte superior esquerda da ‘Área de Trabalho’, selecione
a seta. Então, arraste a imagem para que ela fique no topo esquerdo da
tela. Com a tecla ‘SHIFT’ do teclado pressionada, aperte também o botão
esquerdo do mouse sobre a lateral inferior direita da imagem e arraste-a
para aumentar o mapa proporcionalmente até o outro lado.
43
44
Passo 39 - Vamos voltar o zoom para continuarmos a estruturar o game.
Na ‘Janela do Zoom’ da ‘Área de Trabalho’, leve o mouse até o botão ‘+’
(sinal de mais), e aumente para 40%.
Passo 40 - Utilize a mão indicada na imagem para arrastar a tela para o

topo esquerdo. desenvolvedor de games júnior | módulo 1 | capítulo 1
45
Passo 41 - Em seguida, vamos criar com os ‘tiles’ as plataformas, sobre
o modelo ‘Tracer Map’ que inserimos. Esse modelo funcionará como um
molde. Para isso, leve o mouse até a parte superior esquerda da ‘Área de
Trabalho’ e clique no ícone de pincel.
Passo 42 - Iremos desenhar a fase sobre a estrutura ‘Tracer Map’. Para

posicionarmos os ‘tiles’, vamos voltar para a camada ‘Tilemap’, clicando
nela com o botão esquerdo do mouse.
46
Passo 43 - Na ‘Faixa de Opções’, clique no ‘Tile’ de sua preferência. Nós
usaremos a última opção disponível no pacote. Então, direcione-o para
a ‘Área de Trabalho’, clique e arraste até cobrir todo o formato escuro
sugerido. Você pode aumentar ou diminuir o zoom para facilitar a criação
de todas as plataformas.
47
48
Passo 44 - Repetiremos esse processo até cobrir toda a área em cinza do
‘Tracer Map’. Clique na barra de rolagem para mover e visualizar todas as
plataformas, de toda a fase.
49
Passo 45 - Uma vez finalizada a cobertura de toda a estrutura, a camada
‘TileMap’ não será mais necessária. Por isso, iremos remover esse
componente que está localizado dentro da layer ‘Background’. Para isso,
vá até esta camada e clique na flecha ao lado direito para expandi-la (obs.:
não se preocupe ainda com os nomes das camadas, você irá renomeá-las
posteriormente).
50
Passo 46 - Um item chamado ‘joe’s-tracer’ irá surgir. Ele representa o
‘Tracer Map’ que inserimos. Passe o mouse sobre o item até aparecer três
pontinhos no canto direito. Clique sobre eles e escolha ‘Delete Layer’, para
deletar a camada.
51
Passo 47 - Pronto, perceba que aquele modelo de ‘Tracer Map’ foi deletado.
Passo 48 - Agora que as plataformas da fase estão prontas, podemos inserir

nosso personagem principal, o explorador. Ainda na camada ‘Background’,
leve o mouse na parte superior esquerda da ‘Área de Trabalho’, e clique
no ícone do pincel (não se preocupe com os nomes das camadas por
enquanto, posteriormente elas serão renomeadas).
52
Passo 49 - Já na ‘Faixa de Opções’, clique sobre um ‘Player’ (jogador) de
sua preferência.
Passo 50 - Por último, clique com o botão esquerdo na área de trabalho e

posicione o personagem na plataforma central superior.
53
professor
//Professor(a), é importante que o aluno posicione corretamente o

personagem neste local, visto que os próximos testes dependerão
deste posicionamento. \\
54
Passo 51 - Em seguida, iremos salvar o projeto. Na ‘Barra de Menus’, clique
no menu ‘File’ (arquivo) e, na sequência, em ‘Save Game’ (salvar jogo).
55
Passo 52 - Surgirá uma caixa perguntando qual é o nome do projeto a ser
salvo. Clique sobre a linha e escreva um nome para seu game. Ao final,
clique em ‘Save’ (salvar).
56
Passo 53 - Depois de salvar o projeto, vamos testar as funcionalidades.
Então, na ‘Barra de Menus’, clique no botão ‘Play’ (jogar).
57
Passo 54 - O game ainda não tem funções e o explorador ainda não se
move, mas você pode perceber que o personagem executa uma animação,
batendo os pés no chão, como se estivesse aguardando uma interação.
Nos próximos passos você programará os movimentos do personagem.
Depois de notar esses pontos, clique no botão ‘Close’ (fechar).
58
Passo 55 - Na ‘Área de Trabalho’, clique no ícone de seta, no painel da parte
superior esquerda. Na sequência, leve o mouse para cima do personagem
principal. Perceba que um retângulo envolve o personagem.
59
Passo 56 - Leve o mouse em cima do símbolo ‘< >’ que aparece ao lado
direito do personagem. Esse símbolo permite adicionar uma programação
nele. Clique uma vez com o botão esquerdo do mouse sobre o símbolo.
Passo 57 - Surgirá um menu de opções. Aqui podemos adicionar uma

programação, editar uma animação e deletar ou selecionar o objeto. Nesse
primeiro momento, você criará a programação, portanto, clique em ‘Add
Script’ (adicionar script).
60
Passo 58 - A tela de programação surgirá. Ao lado esquerdo dela há
uma ‘Barra de Opções’, em que se encontram os eventos e ações que
nosso personagem pode executar, permitindo a interação com todos os
componentes e elementos daquela camada.
professor
//Professor(a), ao longo das aulas conheceremos vários ‘eventos’ que desenvolvedor de games júnior | módulo 1 | capítulo 1
possuem características similares. É importante explicar isso para

a turma e enfatizar que é importante observar atentamente cada
‘evento’ apresentado, para que não se confundam posteriormente.
Utilize as informações do material do aluno como base para a
explicação.\\
61
Passo 59 - Na ‘Barra de Opções’, procure por ‘Events’ (eventos). Ao clicar
nele, uma janela surgirá ao lado direito, mostrando todos os ‘eventos’
disponíveis para o nosso personagem.
Passo 60 - Procure, então, pelo evento ‘When backspace/delete is pressed’,

que é responsável por executar a programação em seu interior quando a
tecla espaço ou delete é pressionada. Clique uma vez sobre este evento desenvolvedor de games júnior | módulo 1 | capítulo 1
para ele ser adicionado à tela de programação. Percebam que esse evento é
dinâmico, ou seja, ele pode ser alterado. Vale reforçar que todos os eventos
possuem algumas partes e funcionalidades que podem ser alteradas.
62
Passo 61 - Para executar o movimento do personagem principal,
precisamos alterar o botão que será pressionado pelo jogador. Clique na
seta ao lado de ‘backspace/delete’, para ver uma faixa de opções surgir na
tela.
63
Passo 62 - Procure por ‘right arrow’ (seta para a direita). Isso significa que
quando o jogador apertar a seta do teclado para a direita, o personagem
executará uma ação, que será programada no próximo passo.
Passo 63 - Vamos procurar a ação que irá definir a velocidade do movimento

do personagem na horizontal, isto é, para a esquerda e para direita. Para isso,
inicialmente, clique na ‘Barra de Opções’ e procure por ‘Physics’ (física). Os
blocos de física estão relacionados diretamente aos movimentos de nosso
personagem. Procure por ‘set velocity x 0’ (definir velocidade x 0) e clique
sobre este item uma vez com o botão esquerdo do mouse.
64
Passo 64 - Quando estamos programando games em 2D (duas dimensões),
dois aspectos precisam ser observados durante todo o desenvolvimento:
os eixos x e y - que representam os posicionamentos horizontais e
verticais de um personagem ou de qualquer elemento dentro do jogo.
Quando movimentamos para a direita ou esquerda, estamos deslocando o desenvolvedor de games júnior | módulo 1 | capítulo 1
personagem no eixo x, quando subimos ou descemos, estamos deslocando
o personagem no eixo y. Os eixos x e y podem assumir valores positivos
quando o personagem se movimenta para cima e para a direita, e valores
negativos quando o personagem se desloca para a esquerda e para baixo.
65
professor
//Nesse momento é importante você explicar com detalhes como

funcionam os posicionamentos x e y. Vale a pena dedicar um
momento de sua aula para que esse entendimento fique claro para
todos os alunos. \\

Passo 65 - Ao clicar no evento ‘set velocity x 0’, ele é adicionado na tela
de programação, ficando junto ao evento ‘When right arrow is pressed’,
inserido anteriormente.
66
Passo 66 - Para alterar a velocidade do movimento do personagem no
bloco ‘set velocity x 0’, precisamos mudar o ‘0’ para ‘200’ (zero representa
o estado de parado. Neste caso, o personagem não se movimentará).
Isso significa que nosso personagem se movimentará para a direita com
velocidade de 200 pixels por segundo, quando andar no eixo x.
Passo 67 - Em seguida, clique com o botão esquerdo sobre o evento ‘set

velocity x 200’, mantenha pressionado e arraste-o para dentro do evento
‘When right arrow is pressed’. Essa programação significa: ‘quando o
jogador pressionar a seta para a direita do teclado, o personagem irá andar
para a direita com velocidade de 200 pixels por segundo’.
67
Passo 68 - Agora precisamos programar o movimento do personagem
para a esquerda. Novamente, leve o mouse na ‘Barra de Opções’, clique em
‘Events’ e, na sequência, procure pelo evento ‘When backspace/delete is
pressed’. Clique uma vez sobre este evento e ele será adicionado à tela de
programação.
68
Passo 69 - Para executar o movimento do personagem principal para a
esquerda, precisamos alterar a tecla que será pressionada pelo jogador.
Clique na seta ao lado de ‘backspace/delete’ para abrir as opções.

Passo 70 - Procure por ‘left arrow’ (seta para a esquerda). O evento irá
detectar se a tecla para a esquerda foi pressionada.
69
Passo 71 - Da mesma forma, procure pelo bloco ‘set velocity x 0’, dentro
da aba ‘Physics’. Clique uma vez com o botão esquerdo do mouse para
adicioná-lo na área de trabalho.
Passo 72 - Arraste este bloco para dentro do último evento adicionado:

‘When left arrow is pressed’.
70
Passo 73 - Na sequência precisamos alterar a velocidade do eixo, que está
em ‘0’. Clique no campo e digite: ‘-200’. Afinal, para que o personagem possa
andar para a esquerda, precisamos desloca-lo no eixo x negativamente.
Passo 74 - Nosso personagem, até o momento, possui programação para

andar para a direita e para a esquerda. Para finalizar os movimentos básicos,
iremos fazer com que ele execute um pulo. Os passos necessários para
fazer o personagem pular são bem parecidos com os que já programamos.
Nesse caso, iremos duplicar o último evento criado. Para isso, basta
clicar com o botão direito do mouse na parte superior do último evento
programado e, na sequência, clicar em ‘Duplicate’ (duplicar).
71
Passo 75 - Note que uma cópia do último evento irá aparecer na tela de
programação. Você deverá mover esse bloco ao lado dos eventos criados
anteriormente.
72
Passo 76 - Precisamos alterar as configurações desse bloco que foi
duplicado. Clique na primeira seta para mudar a tecla a ser pressionada.
Escolha: ‘up arrow’ (seta para cima). No Gamefroot, as coordenadas de
y (vertical) são ao contrário! Isso significa que os valores acima do y
aumentam negativamente e os abaixo aumentam positivamente. Portanto,
em ‘set velocity’, troque ‘x’ (movimento na horizontal) para: ‘y’ (movimento
na vertical) e, no valor, defina: ‘-500’. Com essa alteração, o personagem
vai poder pular.
Passo 77 - Antes de testarmos o game, precisamos fazer com que a câmera

acompanhe o personagem. Isso porque a configuração nativa da câmera
faz com que ela fique parada. Com esse ajuste, o jogador poderá ter um
controle muito maior, já que vai poder ver o seu personagem em todos os
momentos do jogo.
Na aba de eventos, procure por ‘Constantly’ (constantemente). Posicione
esse bloco ao lado dos eventos anteriores. Todos as ações que colocarmos
dentro deste bloco serão executadas constantemente. Nesse caso, a
câmera irá acompanhar o jogador, constantemente.
73
Passo 78 - Ainda na ‘Faixa de Opções’, clique em ‘Looks’ (aparência),
procure por ‘center camera on myself’ (centralizar a câmera no personagem)
e encaixe essa ação no bloco ‘Constantly’ que acabamos de criar.
Passo 79 - Neste momento, vamos testar o nosso game! No menu superior,

clique no botão ‘Play’. Na sequência, clique em ‘Yes’ (sim), para confirmar a
ação de salvar o script.
74
Passo 80 - Surgirá uma tela perguntando qual nome vamos inserir no script.
Esse script será responsável pela movimentação do nosso personagem.
Portanto, defina um nome que remeta a isso. Ao final, clique em ‘Save’.
Passo 81 - A tela do game irá aparecer, nesse momento. Use as setas do

teclado para movimentar o personagem para a direta e para a esquerda,
e note o comportamento do personagem. Você deve ter percebido que,
quando você pressiona uma das teclas, para ele se mover, ele começa a
andar, mas não para mais! Isso porque, segundo a primeira lei de Newton:
“um corpo em movimento tende a permanecer em movimento”! Esse corpo
só para, porque temos a força da gravidade, que no caso do nosso jogo,
ainda não foi inserida.
75
Passo 82 - Sempre que precisar, reinicie o game para um novo teste. Você
pode fazer isso clicando uma vez com o botão esquerdo do mouse no
ícone de ‘Reload’ (recarregar) na base esquerda da tela.
Passo 83 - Tente fazer o personagem cair em um buraco e note que o

explorador não cai! Isso também acontece porque ainda não implementamos
a gravidade no game.
76
Passo 84 - O mesmo acontece caso você tente pular: o explorador sairá do
chão, mas como o game não tem gravidade, o personagem irá flutuar pelo
espaço e não voltará para o solo.
77
Passo 85 - Assim que você finalizar seus testes, implementaremos a
gravidade. Assim como na vida real, ela será fundamental em nosso game.
Então, na parte inferior da janela, clique no botão ‘Close’.
Passo 86 - Para implementar a gravidade no game, na ‘Faixa de Opções’,

clique em ‘Events’ e procure por ‘When the level starts’, que executará os
comandos em seu interior quando a fase iniciar.
78
Passo 87 - Arraste este último evento inserido de modo que fique
posicionado abaixo do evento que contém a seta para cima. Essa ordem
de posicionamento não influencia em nada os funcionamentos do nosso
game; é apenas uma forma de organização visual.
Passo 88 - Na sequência, procure pelo bloco ‘set gravity x 0’ (definir

gravidade x 0), na aba ‘Physics’, e arraste-o para dentro do último evento
adicionado: ‘When the level starts’. Vamos colocar a força de gravidade
influenciar apenas os movimentos do pulo, isso é, no eixo y. Altere o eixo ‘x’
para ‘y’ e troque o valor de ‘0’ para ‘800’, ou seja, a força da gravidade que
levará o personagem ao chão terá a aceleração de 800 pixels/s².
79
Passo 89 - Acabamos de definir a aceleração da gravidade, mas é importante
que o personagem reconheça esse valor. Para isso, clique novamente na
‘Faixa de Opções’, procure por ‘Physics’, selecione ‘set reacts to gravity
true’ (reagir à gravidade verdadeiro), clique e arraste encaixando-o ao último
evento criado.
80
Passo 90 - Agora sim podemos executar um novo teste e validar se nosso
personagem, ao dar um pulo, voltará ao chão posteriormente. Na parte
superior direita, clique no botão ‘Play’.
Passo 91 - Uma confirmação aparecerá na tela, questionando se você

deseja salvar todas as alterações realizadas no projeto. Clique em ‘Yes’
(sim).
81
Passo 92 - Agora na tela de teste de nosso game, execute movimentos
para testar o pulo ou tentar cair em algum buraco.
82
Passo 93 - Depois de realizar o teste dos movimentos, clique no botão
‘Close’. Observe que os movimentos do explorador ainda continuam. Isso
acontece porque colocamos a força da gravidade nos movimentos do
eixo y (vertical), mas nada foi feito no eixo x. Para que o personagem pare
assim que soltarmos as teclas das setas para a direita e para a esquerda, desenvolvedor de games júnior | módulo 1 | capítulo 1
não iremos utilizar a gravidade. Primeiro, clique com o botão direito do
mouse em cima do primeiro evento criado (da seta para a direita) e escolha
‘Duplicate’, para duplicá-lo.
83
Passo 94 - Na sequência, arraste todo o bloco de códigos para baixo e
troque: o x de ‘200’ para ‘0’, e o ‘pressed’ (pressionado) para ‘released’
(liberado). Isso fará com que o movimento em x vá para 0, isto é, o
personagem parará, assim que a seta para a direita for liberada.
84
Passo 95 - Realize, de forma semelhante, o procedimento para o movimento
da seta para a esquerda.

Passo 96 - E então podemos executar um novo teste! No menu superior,
clique no botão ‘Play’.
85
Passo 97 - A janela questionando se você gostaria de salvar as alterações
no projeto surgirá novamente. É importante entender que salvar nunca é
demais, e isso garante que mesmo acabando a energia, por exemplo, nosso
projeto ficará guardado. Clique em ‘Yes’.
Passo 98 - Note que quando andamos, o personagem executa a animação,

mas, quando soltamos as setas do teclado para a direita ou esquerda,
a animação para de executar o movimento e o personagem volta a ficar
parado.
86
Passo 99 - Para finalizar a aula, vamos salvar o game. Volte para a tela
inicial, clique no menu ‘File’ e escolha ‘Save Game’.
87
88
professor
//Professor(a), certifique-se de que o(a) aluno(a) deslogue de sua conta! \\
Passo 100 - Com o game salvo, você deverá fazer o logout do seu usuário
da conta. Sempre que as aulas terminarem, realize essa etapa para a
segurança do seu game e dos seus dados! Clique no seu usuário no topo
direito, e selecione logout.
89
backup
5 Min.
professor
// Professor(a), em todas as aulas teremos o bloco ‘Backup’. A ideia

central deste momento do encontro é relembrar termos e conceitos
que foram ensinados na aula.
Você pode usar algumas situações que aconteceram com os alunos,
durante o encontro, para exemplificar os conceitos expostos.
Relembre, nesse momento, que eles utilizaram a ferramenta
Gamefroot para iniciar o desenvolvimento de um game. Também
conheceram os conceitos de ‘eventos’ e de ‘geolocalização’. \\
Olha com quanta coisa você teve contato nessa aula! Você começou a
criar seu game utilizando plataformas incríveis para que o seu explorador
possa se movimentar! Além disso, conheceu o que é um ‘evento’ e a
maneira como as pessoas se localizavam antigamente! Na próxima aula,
você irá inserir um pergaminho, que vai comandar o objetivo do seu jogo!
Ele representará um possível mapa, que o seu personagem poderia criar,
após explorar o cenário, por exemplo, ajudando os próximos exploradores
a se localizarem!
91
level complete
5 Min.
professor
// O último bloco da aula, o ‘Level complete’, é usado para iniciar

um desafio que será finalizado apenas na aula seguinte, ou realizar
indicações de materiais e/ou passos que precisam ser feitos em
casa, pois serão discutidos/corrigidos ao longo do próximo encontro.
Na próxima aula, os alunos terão acesso a informações sobre jogos
de plataforma e vão inserir o personagem no game. Por isso, peça
para que, em casa, eles se lembrem de um game que gostam ou
já jogaram e pensem sobre qual é a tarefa e os obstáculos que os
personagens precisam vencer. Essas informações poderão ser
usadas no início do próximo encontro.\\
Para entendermos melhor como nosso jogo vai acontecer, que tal pensar
um pouco sobre quais obstáculos podemos adicionar em nosso game com
o objetivo de torná-lo mais desafiador?
Para isso, na próxima aula, traga as respostas para os tópicos:

1. Que tipo de obstáculos tornariam nosso game mais desafiador?
2. Inimigos são considerados obstáculos?
Até o próximo encontro!
93
capítulo 2
desenvolvedor
de games júnior
daily
5 Min.
professor
//Olá, professor(a)! O game que os alunos estão desenvolvendo está

ganhando forma. Na aula anterior, a turma entrou em contato com
o conceito de evento, utilizando a linguagem de programação em
blocos. Relembre os estudantes sobre o que já foi desenvolvido
até aqui e, para introduzir o assunto deste encontro, peça para que
compartilhem a atividade proposta no ‘Level Complete’ do último
encontro. Recomendamos que você não leve muito tempo durante
esse momento, para que seja possível que os alunos façam a
atividade do ‘Build and Run’ de maneira completa. Depois, apresente
os objetivos desta aula.\\
Olá, aluno(a)! Na aula anterior você conheceu o conceito de evento e

iniciou o desenvolvimento de um game no estilo plataforma, utilizando uma
linguagem de programação em blocos. Lembre-se de que nós começamos desenvolvedor de games júnior | módulo 1 | capítulo 2
escolhendo um pacote com vários elementos que nos ajudarão durante
todo o desenvolvimento do jogo. Na sequência, criamos as plataformas
do game e inserimos o personagem, que já está apto a se movimentar por
toda a fase. A partir de agora, você vai realizar os passos necessários para
continuarmos a nossa aventura! Vamos lá?
96
Objetivos da aula
• Configurar as animações do personagem;

• Aprofundar o uso de eventos;
• Conhecer o conceito de algoritmo;
• Inserir elementos de plano de fundo (background);
• Ajustar a câmera;
• Inserir os obstáculos.
bugou
Nas linguagens de programação

em blocos, os blocos, que são
mais visuais, substituem as
linhas de código escrita, que
são normalmente associadas
ao mundo da programação. O
formato e as cores específicas
ajudam a diferenciar os conceitos de variáveis, estruturas de repetição
(loops), expressões lógicas, entre outros. Assim, os usuários podem praticar
princípios de programação sem terem que se preocupar com a escrita, por
meio de uma experiência mais simples e interativa.
97
back-end
5 Min.
professor
// Professor(a), nesta aula os alunos continuarão o desenvolvimento

do game iniciado no encontro anterior. A partir de agora eles
trabalharão com o conceito de algoritmo. Então, converse com a
turma sobre esse conceito, utilizando como base o texto presente no
material do aluno. Tire quaisquer dúvidas que os estudantes possam
ter. \\
Ei, você que está prestes a se tornar um fluente digital, me conta aí: você
usa lógica no seu dia a dia? Eu aposto que sim! Para entender o conceito
que será apresentado nessa aula, vamos começar com algo bem simples:
pense sobre o que você faz desde o momento que você acorda, até sentar
para assistir à sua primeira aula do dia. Acredito que a primeira coisa que
você faz é abrir os olhos, não é? E depois você pode levantar da cama,
calçar os chinelos, ir ao banheiro e por aí vai. Essa sua rotina segue uma
sequência lógica. Ou seja, as tarefas podem ser executadas em uma ordem
que faz mais sentido. Afinal, você não levanta da cama de olhos fechados
ou veste a roupa antes de levantar, não é mesmo?
Agora você deve estar se perguntando: “tá, mas e o que isso tem a ver com
tecnologia?”. Tem tudo a ver! Sabe por quê? Os computadores não pensam
como nós humanos, por isso, sempre que precisamos criar algum jogo,
resolver um problema ou desenvolver um programa, precisamos estipular
quais são os passos que o computador deve executar.
99
Usamos esse tipo de raciocínio para programarmos os computadores de
uma forma com que eles ‘entendam’ o que está sendo pedido. Chamamos
de lógica de programação o modo como se escreve esse código! Essa
sequência de passos, em programação, chamamos de algoritmo. É como
se fosse uma receita de bolo!
O algoritmo está presente em diversas atividades do nosso dia a dia. Por

exemplo, como seria um algoritmo utilizado ao atravessar a rua?
Encontrar a faixa de pedestres;
Se o semáforo estiver verde para pedestres,
Olhar para a direita;
Se não estiver vindo nenhum carro;
Olhar para a esquerda;
Se não estiver vindo nenhum carro;
Caminhar até a outra calçada.
Os passos de um algoritmo devem estar sempre bem escritos. Afinal, os desenvolvedor de games júnior | módulo 1 | capítulo 2
computadores seguem fielmente o que escrevemos, então, não pode haver
frases com duplo sentido, certo?
Qual outro algoritmo do seu dia a dia você já seria capaz de escrever agora?
100
professor
//Professor(a), faça um exercício rápido e questione os alunos sobre

quais outros possíveis algoritmos eles poderiam escrever para
realizar tarefas do dia a dia. // desenvolvedor de games júnior | módulo 1 | capítulo 2
101
front-end
75 Min.
buil and run
professor
// Professor(a), dê início ao passo a passo do desenvolvimento do

game. Nesta aula, você perceberá inúmeros comandos que possuem
certas similaridades, e que mudam completamente o resultado final
da tarefa, caso não sejam observados com precisão. Explique para
os alunos a importância de executar fielmente todos os passos, para
que, ao final, eles consigam atingir todos os objetivos propostos. \\
Agora que você já teve contato com os conceitos importantes para

continuar o desenvolvimento do game, chegou a hora de colocar a mão na
massa. Siga o passo a passo e divirta-se!
Acesse o site: gamefroot .com. Assim que o site carregar, clique no botão
‘Login’ (conectar), no canto superior direito da tela. desenvolvedor de games júnior | módulo 1 | capítulo 2
Passo 1 - Assim que a tela de login surgir, digite no campo ‘Username

or Email’ (nome de usuário ou e-mail) a informação cadastrada na aula
anterior. No campo ‘Password’ (senha), digite a senha cadastrada. Ao
final, clique no botão ‘Log in’ para entrar. Caso tenha se cadastrado com as
contas do Google ou do Facebook, basta clicar no respectivo botão.
103
Passo 2 - Ao logar na sua conta, perceba que a tela de ‘dashboard’ (painel
de controle) surgirá. Nesta tela, existem alguns tutoriais e kits que facilitam o
desenvolvimento do game. Note que, na parte superior da janela, aparecerá
o jogo criado na aula anterior. Clique sobre ele com o botão esquerdo do
mouse.
104
professor
// Professor(a), nesse momento, explore rapidamente as opções

disponíveis na tela de dashboard. O objetivo é apresentar para os
alunos que tipos de tutoriais existem na ferramenta e o que podemos
aprender para o desenvolvimento de futuros games. Execute esta
atividade em, no máximo, 2 minutos. \\
Passo 3 - Hoje você ajustará os movimentos do personagem, para quando

ele estiver parado ou andando. Posicione o mouse sobre o personagem
principal, clique uma vez no ícone em que programamos os scripts do
personagem e, na sequência, escolha: ‘Edit Script “movement...’ (editar
script de movimento).
105
106
professor
//Professor(a), nesse momento, vamos reajustar o posicionamento

de todos os blocos a fim de visualizarmos melhor toda a programação
visual. Você pode conduzir esse posicionamento da melhor maneira
que definir.\\
Passo 4 - Ajuste o posicionamento dos blocos na interface, como mostra

a imagem abaixo. Isso não interferirá em nada na funcionalidade de nosso
game, mas essa reorganização facilitará as próximas programações que
realizaremos no jogo. Para mover os blocos, basta clicar na parte superior
de cada um e arrastá-los para os lugares indicados na imagem.
107
Passo 5 - Para ajustar os movimentos do personagem, leve o mouse
na ‘Faixa de Opções’, clique em ‘Animation’ (animação), procure por ‘play
animation “idle” ’ (executar a animação “parado”) e encaixe essa ação no
bloco ‘When right arrow is pressed’ (quando seta para direita é pressionada).
Na sequência, altere de ‘idle’ (parado) para ‘run’ (correr). Com isso, toda
vez que a seta para a direita for pressionada, o personagem executará a
animação como se estivesse correndo.
108
Passo 6 - Duplicaremos esta última ação criada, porque precisamos
colocar esta mesma animação para os movimentos da esquerda. Clique
com o botão direito em cima de ‘play animation “run”’ (executar a animação
“correr”), escolha ‘Duplicate’ (duplicar) e arraste essa ação para o ‘When
left arrow is pressed’ (quando a seta da esquerda é pressionada).
109
Passo 7 - Ajustados os movimentos do personagem quando ele estiver
correndo, precisamos ajustar a animação de quando o personagem estiver
parado. Para isso, duplique novamente a ação ‘play animation run’, arraste-a
para o bloco ‘When right arrow is released’ (quando a seta da direita é
liberada) e altere o ‘run’ para ‘idle’. Repita este processo e faça o mesmo
para o bloco ‘When left arrow is released’ (quando a seta da esquerda é
liberada). Note como ficará o algoritmo do jogo após essas inserções.
Passo 8 - Vamos executar o teste para saber se as animações estão

funcionando nos momentos em que o personagem corre e quando ele
fica parado. Clique em ‘PLAY’ (jogar) e depois confirme a ação de salvar,
clicando em ‘YES’ (sim).
110
Passo 9 - Note que as animações estão acontecendo corretamente, mas
nosso personagem, ao correr para a esquerda, permanece direcionado
para a direita. Vamos, então, ajustar esse espelhamento. Leve o mouse na
‘Faixa de Opções’, clique em ‘Transform’ (transformar) e procure por ‘set x
and y scale of myself to 1’ (definir a escala de x e y do personagem para
1). Encaixe essa ação no bloco ‘When right arrow is pressed’, usado para
detectar se a seta para a direita foi pressionada, e altere o ‘x and y’ para
apenas ‘x’. Usaremos o eixo ‘x’ pois, quando ele estiver espelhado (virado
para a esquerda), e pressionarmos a seta para a direita, queremos alterar
a imagem na horizontal. Escolhemos o valor 1, pois ele irá se virar para a
direita (o lado positivo do eixo).
111
Passo 10 - Repita o passo acima para o movimento para a esquerda.

Duplique o evento ‘set x scale of myself to 1’ e encaixe essa ação no bloco
‘When left arrow is pressed’, que detecta quando a seta da esquerda é
pressionada. Altere o valor do ‘x’, de ‘1’ para ‘-1’, pois ele irá virar para a
esquerda (o lado negativo do eixo).
112
Passo 11 - Agora podemos executar um novo teste, para verificarmos se
o personagem está virando para a esquerda e para a direita, corretamente.
Clique no botão ‘PLAY’ no topo direito da tela, depois confirme a ação de
salvar, clicando em ‘YES’. desenvolvedor de games júnior | módulo 1 | capítulo 2
113
114
Passo 12 - Vamos ajustar o nome da camada (layer) em que o personagem
está (‘Background’ – plano de fundo) para ‘Main’ (principal). Isso deve
ser feito, pois as interações entre o personagem e os outros elementos
acontecem na camada principal. Volte para a tela do jogo e, na aba ‘Layers’,
dê duplo clique com o botão esquerdo do mouse sobre o nome ‘Background’
e altere-o para ‘Main’.
115
Passo 13 - Agora que o personagem está na camada principal, vamos criar
uma nova para adicionar um fundo e deixar o cenário mais interessante.
No painel de ‘Layers’ clique no botão ‘+’ e em ‘New Layer’ (nova camada)
para adicionarmos uma nova layer. Clique 2 vezes na camada criada e
renomeie-a para ‘Background’.
116
Passo 14 - Em seguida, moveremos a layer ‘Background’ que acabamos
de criar. O background precisa ficar atrás de todas as camadas, pois ele
é um fundo que ilustra o nosso game. Isso quer dizer que esse fundo não
pode ficar na frente dos elementos principais. Portanto, clique com o botão
esquerdo do mouse e arraste a camada para baixo.
No painel de ‘Layers’, com o ‘Background’ que acabamos de criar

selecionado, vá até a ‘Faixa de Opções’. Clique com o botão esquerdo do
mouse sobre um ‘Background’ (fundo) de sua preferência e, novamente, em
qualquer lugar da ‘Área de trabalho’.
117
Passo 15 - Para facilitar o posicionamento do background sobre toda a

área do game, diminua o zoom e dimensione o ‘Background’ usando os
quadradinhos ao lado da imagem.
118
Passo 16 - Execute um teste clicando no botão ‘PLAY’, no canto superior
direito da tela. Atenção: é possível que o personagem consiga sair do
cenário, ou até mesmo derrubar o plano de fundo, caso consiga pular sobre
o background. Esses ajustes serão programados posteriormente.
119
Passo 17 - Então, colocaremos um objeto com formato de espinho, na
camada principal, para representar um obstáculo no jogo. Obstáculos
servem para dificultar o caminho do personagem. Os espinhos poderão
machucá-lo, caso encostem nele, sendo necessário saltar sobre os
obstáculos para continuar o caminho. Com a layer ‘Main’ selecionada, vá à
‘Faixa de Opções’, no menu de mídias na lateral esquerda da tela. Selecione,
como obstáculo, a opção ‘spikes’ (espigões) e, na sequência, clique em
qualquer lugar da fase.
120
Passo 18 - Agora que o obstáculo foi adicionado na fase, devemos criar
o algoritmo que o deixará fixo em sua posição, pois os espinhos não se
movimentarão pela cena. Para iniciar a programação, leve o mouse em
cima do obstáculo. O ícone de programação aparecerá; clique 1 vez com o
botão esquerdo em cima dele, depois em ‘Add Script’ (adicionar script).
121
Passo 19 - Perceba que a tela de programação dos obstáculos será aberta.
Passo 20 - Leve o mouse até a ‘Barra de Opções’, procure por ‘Events’

(eventos), depois busque pelo evento ‘When created’ (quando for criado) e
arraste-o para a área de trabalho. Esse evento será ativado quando o objeto
de obstáculo for criado.
122
Passo 21 - Ainda na ‘Barra de Opções’, procure por ‘Physics’ (física). Depois,
busque por ‘set immovable true’ (configurar imóvel como verdadeiro) e
encaixe-o no último bloco criado. Isso fará com que o objeto fique imóvel
(parado).
123
Passo 22 - Precisamos adicionar uma ‘tag’ (marcação) em nosso código,

para definir que os espinhos são obstáculos. Essa marcação será útil quando
começarmos a programar a colisão do personagem com os espinhos.
Ainda na ‘Barra de Opções’, procure por ‘Sensing’ (detectar), escolha ‘add
tag “tag name” on myself’ (criar uma marcação em mim mesmo), arraste
este bloco para dentro do último evento criado (‘When created’) e altere
‘tag name’ para ‘obstacles’ (obstáculos).
124
Passo 23 - Teste o game, para verificar se o obstáculo permanece imóvel.

Clique em ‘PLAY’ e salve o projeto. Uma tela pedindo o nome do script vai
aparecer, nomeie-o como ‘obstacles’ e clique em ‘SAVE’.
125
Passo 24 - Feito o teste, colocaremos mais obstáculos na fase. Volte para
o layout do jogo e, na ‘Faixa de Opções’, clique em ‘spike’ e posicione-os
pelo caminho.
126
Passo 25 - Ainda na ‘Faixa de Opções’, clique no menu ‘Code’. Note que
apareceram as duas programações que fizemos: ‘player_movement’
e ‘obstacles’. Isso significa que cada objeto tem a sua própria tela de
programação e o nome dela é definido no momento em que clicamos no
botão ‘PLAY’, para testar essa programação pela primeira vez.
127
Passo 26 - Vamos copiar o script que criamos para todos os obstáculos.
Para isso, clique 1 vez em cima da programação ‘obstacles’. Note que o
ícone do mouse ficou da mesma cor dessa programação. Deixe-o acima de
um dos espinhos que colocamos na tela e clique sobre o obstáculo 1 vez.
Passo 27 - Note, na imagem abaixo, que o ícone ficou com a mesma cor da
programação ‘obstacle’, pois o script foi atrelado/ligado ao objeto. Repita
esse mesmo procedimento para todos os obstáculos que você adicionou
na cena.
128
professor
//Atenção, professor(a)!
• As cores dos códigos da aba CODE podem variar dependendo da

versão do Gamefroot que você está utilizando.
• Todas as vezes que você copiar e colar (CTRL+C e CTRL+V) um

elemento que já tem um script, esse novo elemento também ficará
com o mesmo script. \\ desenvolvedor de games júnior | módulo 1 | capítulo 2
Passo 28 - Teste seu game novamente e perceba que todos os obstáculos

não se movem.
129
Passo 29 - Vamos implementar a colisão do personagem com o obstáculo.
Lembre-se: sempre que o jogador tocar nos espinhos, ele será destruído.
Leve o mouse sobre o personagem, clique no ícone da programação em
que aparece ‘player_movement’ e escolha ‘Edit script player_move...’.
130
Passo 30 - Surgirá a tela de programação em que desenvolvemos os
movimentos do personagem.
Passo 31 - Na ‘Faixa de opções’, escolha ‘Physics’, procure pela ação

‘When I am touched get toucher’ (quando eu for tocado) e posicione-a na
tela. Essa ação acontecerá quando o jogador colidir com algo.
131
Passo 32 - Na ‘Faixa de opções’, escolha ‘Control Flow’ (controle de fluxo),

procure pela condição ‘if do’ (se faça) e arraste-a para dentro do último
bloco inserido.
132
Passo 33 - Verifique se o objeto tocado tem a tag que inserimos para os

obstáculos, que é a ‘obstacle’. Na ‘Faixa de opções’, escolha ‘Sensing’ e
arraste a ação ‘myself has tag “tag name”’ (eu mesmo tenho a tag “nome
da tag”) para frente do if. Troque o valor de ‘tag name’ para ‘obstacle’.
133
Passo 34 - Precisamos realizar uma alteração na instrução ‘myself has

tag obstacle’, pois deve-se verificar se o objeto tem essa tag, e não o
personagem. Na ‘Faixa de opções’, escolha ‘Variables’ (variáveis) e procure
por ‘instance toucher’ (instância do tocador), substituindo o bloco ‘myself’.
134
Passo 35 - Na ‘Faixa de opções’, escolha ‘Control Flow, procure pela ação

‘destroy myself’ (destruir a si mesmo) e arraste-a para a frente do ‘do’, para
indicar a ação de destruição do personagem.
135
Passo 36 - Pronto, agora podemos testar nosso game, para saber se o
personagem, ao tocar no espinho, será destruído. Clique em ‘PLAY’ e salve
o script clicando em ‘YES’.
136
Passo 37 - Colida em um dos espinhos e verifique se o personagem será
destruído.
Passo 38 - Precisamos ajustar algumas configurações em relação ao

fundo do cenário (background). Mas antes, que tal aprender como substituir
seu plano de fundo, caso deseje alterá-lo? Com a camada background
selecionada, escolha a ferramenta ‘seta do mouse’ e, na sequência, clique
1 vez com o botão esquerdo do mouse no centro da tela em que aparece o
‘background’ e pressione a tecla delete do teclado.
137
Passo 39 - Na ‘Faixa de Opções’, selecione outro background e arraste-o
para a ‘Área de Trabalho’ em que estamos desenvolvendo o game. Amplie-o
para que ocupe todo o fundo do cenário, conforme você já fez anteriormente.
Passo 40 - Clique com o botão direito do mouse sobre o background

adicionado e escolha ‘Add Script’, para adicionar uma programação ao
plano de fundo.
138
Passo 41 - Vamos configurar para que o background não possua elementos
físicos. Desabilitaremos a gravidade, pois ele deverá ficar parado – ele não
cairá, caso o personagem consiga pular em cima dele! Então, clique em
‘Events’, procure por ‘When created’ e arraste-o para a tela. Na faixa de
opções, clique em ‘Physics’, procure pela opção ‘set physics enabled true’
(definir física habilitado verdadeiro), e arraste-a para dentro do bloco ‘When
created’. Troque ‘true’ (verdadeiro) por ‘false’ (falso), para que a física seja
desabilitada. Com isso, quando o plano de fundo for criado, os elementos
físicos serão desabilitados.
139
Passo 42 - Criaremos um algoritmo para ajustar a visualização da câmera

fazendo com que, quando nosso personagem andar pela tela, o fundo
(background) fique imóvel, causando um efeito de profundidade no jogo.
Clique em ‘Events’, procure por ‘Constantly’ (constantemente) e arraste-o
para a tela. Na faixa de opções, clique em ‘Transform’ (transformar) e
arraste o bloco ‘set x position of myself to 0’ (definir posição do eixo x do
fundo para 0) para dentro do ‘Constantly’.
140
141
Passo 43 - Como a movimentação da câmera no game utilizará os eixos
x e y, duplicaremos esse último comando para considerarmos também o
eixo y. Clique com o botão direito no bloco ‘set x position of myself to 0’,
escolha ‘Duplicate’ e encaixe a cópia logo abaixo. Troque o x por y.
142
Passo 44 - Feito isso, ajustaremos o posicionamento do fundo conforme
a câmera do game. Arraste os valores ‘0’ para a lixeira, conforme mostra
a imagem. Note que o ‘0’ fica aparecendo mais claro que o normal, pois a
ferramenta está mostrando que o valor foi deletado.
Passo 45 - Procuraremos o evento responsável por controlar a câmera

do game. Na ‘Faixa de Opções’, clique em ‘Looks’ (aparência) e arraste o
‘camera x’ (eixo x da câmera) para cima do primeiro valor ‘0’ que acabamos
de deletar. Repita o processo para o eixo y, alterando o ‘x’ por ‘y’. Isso dará a
impressão de que o fundo está imóvel, pois ele sempre ficará posicionado
de acordo com o posicionamento da câmera.
143
Passo 46 - Clique no botão ‘PLAY’. Aparecerá uma mensagem perguntando

se você deseja salvar o código. Clique em ‘YES’. Dê o nome de ‘background
image’ para este script e clique em ‘SAVE’.
144
Passo 47 - Assim que o game iniciar, percorra toda a fase. Note que nosso
background agora é fixo, ou seja, ele não se move junto com o personagem.
professor
//Professor(a), verifique com os alunos se o tamanho do background

está ideal. Você pode aumentá-lo ou diminui-lo e testar junto com a
turma. O objetivo é encontrar a melhor experiência.\\
145
atividade extra
professor
//Professor(a), incentive os alunos a inserirem outros obstáculos no

game. Aproveite esse momento final para deixá-los jogar, tentando
desviar de todos os obstáculos inseridos. Lembre-os de inserir o
script ‘obstacles’ em todos os espinhos adicionados.\\
Aproveite esse momento para testar outros obstáculos e tentar desviar

de todos eles, até o final do percurso. Lembre-se de que o jogador deverá
percorrer toda a cena, buscando compreender o mapa para ajudar futuros
exploradores. Não se esqueça de salvar seu jogo antes de finalizar!
146
147
backup
3 Min.
professor
//Professor(a), neste momento é importante realizar uma revisão

completa da aula. Relembre os alunos sobre o planejamento
estipulado no início do encontro e ajude-os a reforçar os principais
aprendizados obtidos. Utilize algumas situações que aconteceram
durante a aula para exemplificar e reforçar os conceitos mais
importantes. \\
Nesta aula, além de conhecer o conceito de algoritmo, você aprimorou

os movimentos do personagem, inseriu e programou os obstáculos e a
câmera do background.
149
level complete
2 Min.
professor
// Esta aula chegou ao fim! Diga para os alunos que, no próximo

encontro, eles irão inserir o mapa do local que ajudará o explorador
a finalizar o jogo! \\
O nosso encontro chegou ao fim! Por meio dos passos lógicos que você
tem seguido, durante as aulas, o game está se tornando uma jornada
de exploração incrível, não é mesmo? Na próxima, terminaremos essa
exploração, então, esteja preparado(a)!
Até lá!
151
capítulo 3
desenvolvedor
de games júnior
daily
5 Min.
professor
//Olá, professor(a)! O game que os alunos estão desenvolvendo está

ficando bem interessante! Nas duas aulas anteriores, os estudantes
começaram o desenvolvimento de um jogo no estilo plataforma,
utilizando a linguagem em blocos. Para isso, utilizaram a ferramenta
on-line Gamefroot. Para iniciar este encontro, recapitule junto com a
turma, todas as tarefas que foram feitas até aqui. Depois, apresente
os objetivos desta aula.\\
Olá, aluno(a)! Na aula anterior, você deu continuidade ao desenvolvimento

de um game no estilo plataforma, utilizando a ferramenta Gamefroot e a
linguagem em blocos. Nela, configuramos as animações do personagem,
inserimos o background (fundo) em nossa fase e adicionamos os obstáculos.
Ainda no encontro anterior, aprendemos o conceito de algoritmo e como
ele está presente em nosso dia a dia. Hoje, finalizaremos a programação do
nosso game e realizaremos os ajustes finais. desenvolvedor de games júnior | módulo 1 | capítulo 3
154
Objetivos da aula

• Criar a tela de abertura do game
• Desenvolver a tela de vitória
• Montar e programar a tela referente ao Game Over
• Inserir o mapa que será usado para finalizar o game
• Adicionar os coletáveis
• Realizar as últimas programações
• Finalizar o game
bugou
“Game over” é uma mensagem exibida

na tela do seu game todas as vezes que
você perde ou ganha o jogo. Ela pode
estar relacionada a um resultado ruim,
como a perda de todas as vidas, por desenvolvedor de games júnior | módulo 1 | capítulo 3
exemplo, ou pode aparecer quando você

finalizar ou ‘zerar’ todas as fases, vindo acompanhada da sua pontuação.
Essa frase foi usada inicialmente em equipamentos como máquinas de
pinball eletromecânicas no início dos anos 1950, que acendiam lâmpadas
incandescentes com texto. O que acha de adicionar essa mensagem no
seu game?
155
back-end
10 Min.
professor
// Professor(a), nesta aula, os alunos finalizarão o desenvolvimento

do game. Um dos passos mais importantes neste encontro será
a construção dos níveis (levels). É importante que os estudantes
compreendam efetivamente a criação e desenvolvimento de cada
nível. Outro conceito técnico trabalhado nesta aula é o de variáveis e
seu uso no contexto dos games. As variáveis, em programação, são
espaços reservados na memória de um videogame ou computador,
para guardar dados que são utilizados por um programa/jogo. No
contexto dos games, guardamos informações úteis ao jogo, como a
quantidade de vidas do personagem e dos inimigos, quantidade de
itens no inventário, tempo restante, etc. Utilize o material do aluno
para explicar também sobre a criação dos níveis: tela inicial, tela de
vitória e tela de game over, além do uso das variáveis no contexto
dos games. \\
O espaço disponível para os jogadores durante a busca pelo objetivo de

uma fase/etapa pode ter vários nomes, como level (nível), map (mapa),
stage (estágio), world (mundo) ou zone (zona), variando de jogo para jogo.
O termo level também pode se referir ao nível de dificuldade ou nível de
poder de um personagem.
O conceito de níveis em videogames foi aplicado pela primeira vez no game
Galaxian, lançado pela empresa Namco em 1979, durante a era de ouro dos
videogames.
157
Nesse caso, o termo nível representava uma fase de dificuldade ou seção
definida de um determinado jogo.
Outro exemplo de nível é o uso do termo masmorra, uma palavra comumente

encontrada na história dos primeiros jogos de RPG de tabuleiro. Ela deriva
do inglês dungeon, e serve para designar qualquer tipo de ambiente fechado
e hostil, tal como cavernas, calabouços e torres. Dependendo da temática
do game este nível era atingido em um determinado momento da narrativa.
Um dos primeiros RPGs, foi o Wizardry I (1981), uma adaptação de um jogo
de tabuleiro para os primeiros computadores pessoais da época.
Fonte: https://felipepepe.medium.com/1974-1989-a-hist%C3%B3ria-dos-primeiros-crpgs-dabad2f51f2b
158
O jogador tinha a missão de criar um grupo de seis heróis, entrar no labirinto
debaixo da cidade e derrotar o mago Werdna. Os níveis eram organizados
em andares e os mapas eram labirintos desafiadores.
Em nosso game, construído no Gamefroot, os levels podem representar

níveis ou telas. Cada tela será um level que estará representada por meio
de referências numéricas. Teremos a tela do jogo, a tela de game over, a
tela de vitória e aquela que será a de início do jogo.
Ao longo do desenvolvimento, você se deparará, ainda, com o conceito de

variável. Mas, você sabe o que significa este conceito?
Variável consiste em um espaço reservado, na memória do computador,

para guardar informações que serão utilizadas por um programa. Ela pode
ter valores de diversos tamanhos e tipos. Quando declaramos uma variável
podemos atribuir a ela um valor.
Nos games, guardamos em variáveis as informações úteis para eles, como
a quantidade de vidas, o nível de saúde, a quantidade de moedas ou de
itens coletados, o número de levels, a pontuação, o tempo de jogo, etc. desenvolvedor de games júnior | módulo 1 | capítulo 3
No game Fortnite, por exemplo, é possível notar várias informações escritas

na tela, como itens disponíveis e jogadores on-line. Todos esses dados
ficam guardados em variáveis.
159
Fonte: https://www.techtudo.com.br/listas/2018/03/fortnite-veja-os-requisitos-para-jogar-no-pc.ghtml
160
front-end
70 Min.
professor
// Professor(a), dê início ao passo a passo com os alunos. Reitere

a importância de se construir os níveis de maneira correta: eles são
essenciais para o funcionamento completo do game, pois todos são
interligados. A programação incorreta pode prejudicar o andamento
de todo o jogo. \\
buil and run
professor
tempo estimado 55 minutos
Agora que você já conheceu os conceitos de levels e de variáveis, chegou desenvolvedor de games júnior | módulo 1 | capítulo 3
a hora de colocar a mão na massa. Siga o passo a passo e boa diversão!
Passo 1 - Acesse o site: gamefroot.com . No canto superior direito, clique

no botão ‘LOGIN’, para acessar a sua conta.
162
Passo 2 - No campo ‘Username or Email’ (nome de usuário ou e-mail)
digite aquele que foi cadastrado. No campo ‘Password’ digite a senha e, ao
final, clique no botão ‘LOG IN’ (acessar a conta). Caso tenha se cadastrado
com as contas do Google ou Facebook, basta clicar no botão respectivo.
163
Passo 3 - Ao logar com sua conta, perceba que o ‘DASHBOARD’ (painel de
controle) surgirá. Nesta tela, existem alguns tutoriais e kits que facilitam o
desenvolvimento do game. Note que, na parte superior da janela, aparecerá
o jogo criado nas aulas anteriores. Basta clicar em cima dele com o botão
esquerdo do mouse.
Passo 4 - Na tela de desenvolvimento do game, vá até a ‘Faixa de Opções’

e clique na guia ‘LEVELS’.
164
Passo 5 - Perceba que nós já possuímos o primeiro level, que se refere
à fase que criamos para o nosso game. Agora, nós criaremos um novo
level, que conterá a tela de vitória que será acionada na programação do
mapa (a ser inserido posteriormente). Ou seja, quando nosso personagem
conseguir chegar ao fim da fase e pegar o mapa, a tela da vitória surgirá.
Portanto, clique em ‘Add New Level’ para adicionar um novo nível, e note
uma tela vazia surgir.
165
Passo 6 - Clique na engrenagem que está sobre o ‘Level -2’, que acabamos
de criar. Surgirão algumas opções deste nível, entre elas, o tamanho da tela
nos eixos ‘x’ e ‘y’. Iremos configurar para que o jogo exiba a tela toda de
maneira adequada. Para isso, no eixo ‘x’ digite ‘960’ e no eixo ‘y’ digite ‘540’.
Esses valores representam o tamanho total da nova tela.
professor
//Professor(a), vale lembrar que foi definido um valor bem maior para desenvolvedor de games júnior | módulo 1 | capítulo 3
a fase do jogo. Entretanto, a porção exibida (configurada na câmera

do jogo) mostrará apenas parte da fase. A parte exibida do game
tem o mesmo tamanho da área configurada aqui, na tela de vitória.
Explique também que o tamanho da tela do nosso game pode ser
configurado de acordo com as necessidades. \\
166
167
Passo 7 - Em seguida, volte para a guia ‘MEDIA’, clicando sobre ela uma
vez com o botão esquerdo do mouse.
Passo 8 - Ainda na ‘Faixa de Opções’, procure pelos elementos de

168
‘Backgrounds’ (imagens de fundo). Escolha o fundo com tons de degradê
(azul claro e escuro) e arraste-o para a tela que acabamos de criar. Encaixe
e note que a imagem tem o mesmo tamanho da tela.
Passo 9 - Ainda na ‘Faixa de Opções’ procure pelos elementos de ‘Interface’.

Escolha uma imagem que contém uma faixa da cor verde, escrita ‘You Win’
(você venceu). Arraste-a para a tela que acabamos de criar.
Passo 10 - Na sequência, ainda nos elementos de ‘Interface’, pegue um
169
botão denominado ‘TIMATA Start’ (iniciar) e encaixe-o abaixo da faixa ‘You
Win’.
Passo 11 - Caso a imagem fique escondida, altere a ordem das camadas,

conforme indicado nas figuras a seguir (para mover uma camada, basta
clicar em cima do nome dela em “Layers” e movime
ntá-la para cima ou para baixo).
170
Passo 12 - O ‘Level-2’ que representa a tela de vitória está finalizado.
Agora, criaremos um novo level para representar a tela de derrota, ou
seja, a de ‘Game Over’. Na parte superior da tela, clique no botão ‘+’
e, depois, em ‘Create New Level’. Esse botão é um atalho para criar
novos levels.
171
Passo 13 - Ao criar um novo nível, note (entrando em ‘LEVELS’) que apareceu

o ‘Level – 3’. Clique na engrenagem dele para alterarmos o tamanho desta
tela de level. Da mesma forma que fizemos com a tela de vitória, edite os
valores dos eixos ‘x’ e ‘y’ para ‘960’ e ‘540’, respectivamente. Na sequência,
clique no ícone que representa a cor de fundo do background e escolha a
cor vermelha.
172
173
Passo 14 - Volte para a guia ‘MEDIA’. Precisamos terminar de criar a tela de
‘Game over’. Na ‘Faixa de opções’, procure pelos elementos de ‘Interface’ e
arraste a imagem que contém a faixa escrito ‘Game Over’ para a tela.
174
Passo 15 - Na sequência, ainda nos elementos de ‘Interface’, selecione um
botão denominado ‘TIMATA Start’, da cor vermelha, e encaixe-o abaixo da
faixa ‘Game Over’. Faça qualquer ajuste que seja necessário na ordem das
camadas.
175
Passo 16 - Finalizado o nível ‘Level – 2’ que representa a tela ‘You Win’ e
o nível ‘Level – 3’ que representa a tela ‘Game Over’, iremos voltar para o
nosso game. Para isso, clique no ‘Level – 1’.
Passo 17 - Então, adicionaremos o mapa. Esse será um item coletável.

Inicialmente, precisamos selecionar a camada principal do game. Na aba
‘Layers’ (camadas), clique em ‘Main’ (principal).
176
Passo 18 - Na ‘Faixa de Opções’, procure pelo mapa entre os objetos
coletáveis (‘Collectables’). Ele representa o auxílio na localização das fases
futuras. Quando conseguir chegar até ele, o jogador vencerá o game e será
direcionado para a tela de vitória ‘You Win’. Ele deve ficar no ponto mais
desafiador do jogo, que pode ser no final da fase. Mas, para facilitar os
testes, por agora coloque-o próximo do jogador.
177
Passo 19 - Agora, programaremos o mapa. Precisamos criar uma marcação
neste objeto para que ele possa ser identificado por uma tag (rótulo). Esse
objeto será marcado como objeto de vitória, pois, ao tocarmos nele, seremos
direcionados para o ‘Level-2’. Para isso, clique com o botão direito do
mouse em cima do mapa e escolha ‘Add Script’ (adicionar programação).
Passo 20 - Na tela da programação do script, na ‘Faixa de Opções’, clique

em ‘Events’ (eventos) e arraste o elemento ‘When created’ (quando criado)
para a tela. Essa bloco será ativado assim que o objeto do mapa for criado.
178
Passo 21 - Na sequência, clique em ‘Sensing’ (detectar) e arraste o
elemento ‘add tag “tag name” on myself’ (adicionar tag “nome da tag” em
mim mesmo) para dentro do último evento criado. Clique em ‘tag name’ e
troque por ‘you win’. Com isso, estamos adicionando um rótulo (etiqueta)
chamado ‘you win’ para identificar o objeto.
179
Passo 22 - Na parte superior, clique no ‘PLAY’ para testar. Clique em ‘YES’
para salvar o game e dê um nome para o script que remeta à marcação
(you-win object). Durante o teste, observe que o mapa se desloca quando
o personagem toca nele. Note que, como o objetivo é coletá-lo, não será
necessário criar o script para que ele fique fixo no cenário, como fizemos
com os espinhos, por exemplo.
180
Passo 23 - Volte para a ‘Área de Trabalho’. Agora que o mapa contém a
marcação de vitória, criaremos a colisão por parte de nosso personagem.
Com o botão direito, clique em cima do personagem e escolha ‘Edit script
“player_movement”’ (editar script ‘movimento do jogador).
181
Passo 24 - Atualmente, ao tocar em um obstáculo, nosso personagem é
destruído. Nós duplicaremos esse evento para criarmos a condição: quando
o jogador tocar no mapa, ele vencerá o jogo. Clique com o botão direito em
cima do bloco ‘if do’ (se faça), no evento ‘When I am touched get toucher’,
e escolha ‘Duplicate’ (duplicar). Posicione o novo bloco duplicado no script.
Altere a tag ‘obstacle’ (obstáculo) para ‘you win’.
professor desenvolvedor de games júnior | módulo 1 | capítulo 3
// Peça para que os alunos se atentem: para que a programação

funcione, o nome da tag precisa ser exatamente o nome digitado na
tag do mapa. \\
182
183
Passo 25 - Agora, arraste o bloco ‘destroy myself’ (me destruir) para a
lixeira. Não queremos que o personagem seja destruído quando ele tocar
no mapa.

Passo 26 - Precisamos programar para que, quando o personagem encostar
em um objeto que tenha a tag de vitória (no caso, o mapa), ele deverá ser
direcionado para o level-2. Na ‘Faixa de opções’ escolha ‘Control Flow’
(controlar fluxo), procure pelo bloco ‘go to next level’ (ir para próximo level)
e arraste-o para dentro do ‘if do’, no lugar no último bloco que deletamos.
184
Passo 27 - Precisamos alterar esse útimo bloco que adicionamos. Na

‘Faixa de opções’ escolha ‘Operators’ (operadores), procure pelo bloco ‘0’,
arraste-o para cima do último bloco que adicionamos, em cima da opção
‘next’ (próximo). Note que o botão ficará com outro formato. No lugar de ‘0’,
digite ‘2’, pois a tela de vitória está no level 2. O pedaço de bloco ‘next’ que
se soltou pode ser jogado na lixeira.
185
professor
//Professor(a), aproveite para deixar claro para os alunos que os

levels possuem números, mas eles não são constantes, isto é, não
são todas as telas de vitória que terão o número 2. Esses números
podem variar conforme movimentamos ou de acordo com a ordem
em que criamos as telas. \\
186
187
Passo 28 - Feito isso, agora podemos fazer um teste: ao encostarmos no
mapa, devemos ser direcionados para o ‘Level – 2’, conforme especificado
no último comando. Clique em ‘PLAY’ e, na sequência, em ‘YES’ para salvar.
Passo 29 - No teste, pule sobre o mapa e note que a tela de vitória surgirá.
188
Passo 30 - Vincularemos, agora, a tela de ‘Game Over’ à ação de tocar nos
espinhos. Para isso, procure o bloco que determinamos que o personagem
é destruído quando toca no espinho. Clique na ação ‘destroy myself’ e
arraste-a para a lixeira.
189
Passo 31 - Duplique o comando que leva o personagem para a tela de
vitória, uma vez que tocamos no mapa. Clique com o botão direito e escolha
‘Duplicate’. Arraste o bloco duplicado no lugar do que acabamos de deletar.
Neste bloco ‘go to 2’ digite ‘3’, pois o jogador será direcionado para a tela
de Game Over (Level 3).
190
Passo 32 - Então, podemos testar nosso game. Na barra superior, clique
em ‘PLAY’ e, na sequência, salve clicando em ‘YES’. No teste, pule sobre os
espinhos e note que você será levado para a tela de ‘Game Over’.
191
Passo 33 - Uma vez que as telas de vitória e de derrota estão programadas,
programaremos os botões para que, quando clicados, o jogo inicie
novamente. Na barra superior, clique no level- 2 (tela de vitória).
192
Passo 34 - Precisamos observar com atenção. Vá até o botão, na aba de
camadas, e clique sobre ele. Então, leve o mouse sobre o botão ‘TIMATA
Start’ e escolha ‘Add Script’.
professor
//Professor(a), é importante deixar claro que se o aluno selecionar

um objeto errado e adicionar um script, o game não vai funcionar
corretamente. Essa confusão pode atrapalhar os próximos passos.
\\
193
Passo 35 - Na tela de programação que surgiu, clique na ‘Faixa de Opções’,
procure por ‘Events’ e arraste para a tela o bloco ‘When stage is pressed’
(quando o estágio é pressionado). Esse evento será ativado quando o botão
for pressionado.
194
Passo 36 - Na sequência, ainda na ‘Faixa de Opções’, procure por ‘Control
Flow’ e arraste para a tela o bloco ‘go to next level’ (ir para o próximo nível).
Então, altere o ‘next’ para ‘first’ (primeiro). Ou seja, quando clicarmos no
botão seremos direcionados para a primeira tela, a de início do game.
195
Passo 37 - Na barra superior, clique em ‘PLAY’ e confirme a ação de salvar

clicando em ‘YES’. Dê o nome de ‘play button’ (botão de jogar) para esse
script e, ao final, clique em ‘Save’ (salvar).
196
Passo 38 - Vamos testar! Encoste no mapa com jogador e verifique se o

objeto é coletado e o personagem é levando para a tela de vitória. Nesta
tela, clique no botão ‘TIMATA Start’ e note que o jogo começará novamente.
Portanto, nosso botão está funcionando perfeitamente.
197
Passo 39 - Em seguida, precisamos configurar, da mesma forma, o botão
da tela de Game Over. Volte à ‘Área de Trabalho’ e, na barra superior, clique
no ‘Level – 3’.
198
Passo 40 - Na ‘Faixa de Opções’, clique em ‘Code’ (código) para abrir o
código.
Passo 41 - Com o bloco do botão selecionado nas camadas, arraste o bloco

‘play button’ em cima do ‘TIMATA Start’ da tela de ‘Game Over’. Note que o
botão ficará no formato do ícone do script.
199
Passo 42 - Vamos testar novamente. Na barra superior, clique em ‘PLAY’.

Assim que o jogo iniciar, pule em cima dos espinhos e o jogador será levado
para a tela de ‘Game Over’. Na sequência, clique no botão ‘TIMATA Start’ e
perceba que esse botão também te levará para o início do game.
200
Passo 43 - Criaremos um novo level que será a tela de abertura do nosso

game. Na parte superior, clique no botão ‘+’ e, na sequência, clique em
‘Create New Level’.
201
Passo 44 - Perceba que o ‘Level – 4’ surgiu. Essa será nossa tela de abertura
do game. Para isso, precisamos fazer algumas configurações, como alterar
o tamanho da tela. No menu da esquerda, clique na opção ‘Levels’ e, depois,
na engrenagem do ‘Level – 4’. Ajuste o tamanho da tela inserindo, no eixo
‘x’, o valor de ‘960’ e, no eixo ‘y’, o valor de ‘540’.
202
Passo 45 - Vamos aproveitar que todas as telas foram criadas e vamos

renomeá-las para que possam ser identificadas mais facilmente. Inicie
renomeando o ‘Level – 4’ para ‘Start Screen’ (tela de início).
203
Passo 46 - Renomearemos os outros níveis de acordo com sua função.

Clique na engrenagem do ‘Nível – 3’ e digite: ‘Game Over’. Então, nomeie o
‘Nível – 2’ como ‘You Win’ (Você ganhou) e deixe o ‘Nível – 1’ como está,
pois este nível representa a fase 1.
204
Passo 47 - Reordene a posição das camadas, para que fiquem na ordem
que faça mais sentido: ‘Start Screen’, ‘Level – 1’, ‘You Win’ e ‘Game Over’.
Arraste o bloco pelos traços que ficam no início do level.
205
[
Passo 48 - Com essas alterações, precisamos mudar os valores dos levels
na programação da colisão. Então, volte no script principal em que fizemos
as movimentações do jogador. Clique na aba ‘Code’ e, na sequência, localize
o script ‘player_movement’. Clique em ‘Edit Code’ (editar código).
professor
//Professor(a), neste momento, ajude os alunos para que todos os

valores sejam alterados corretamente.\\
206
Passo 49 - Localize o trecho do script que faz referência aos níveis que
representam a tela da vitória e a tela do game over. Agora, com a alteração
da ordem dos levels, ao tocar nos espinhos, o jogador vai para o nível ‘4’. Ao
tocar no mapa irá para o nível ‘3’.
Passo 50 - Volte para a tela principal e selecione o level ‘Start screen’ (1)
para editá-lo.
207
Passo 51 - Volte para a aba ‘MEDIA’, procure pelo background que usamos
em nosso game e arraste-o para a ‘Área de Trabalho’, encaixando-o
perfeitamente no tamanho que definimos para a tela.
208
Passo 52 - Na sequência, procure pelo botão ‘TIMATA Start’ e arraste-o
para o centro da tela.
Passo 53 - Ainda na ‘Faixa de Opções’, procure pelos elementos ‘Trees’

(árvores) e arraste uma árvore do lado esquerdo da tela e outra do lado
209
direito. Arraste algumas gramas próximas às árvores inseridas; isso vai
deixar sua tela de abertura mais elegante.
professor
//Professor(a), incentive os alunos a arrastarem outros elementos

nesta tela inicial, para que ela fique mais bonita e cheia de elementos.\\
210
Passo 54 - Em seguida, programaremos o botão da tela inicial. Clique com
o botão direito em cima do botão ‘TIMATA Start’ e certifique-se de que ele
foi selecionado na camada. Depois, clique em ‘Add Script’.
Passo 55 - Na tela de script, procure por ‘Events’ e arraste para a ‘Área de

Trabalho’ o evento ‘When stage is pressed’ (quando o palco é pressionado).
Ainda na ‘Área de trabalho’ procure por ‘Control Flow’ e arraste a ação ‘go to
next level’ (ir para o próximo nível) dentro do último bloco adicionado.
Com isso, quando o jogador clicar em qualquer lugar da tela, ele será enviado
211
para o próximo nível. Lembrando que organizamos as camadas dos levels
para que o jogo estivesse no level seguinte da tela inicial.
212
Passo 56 - Execute um teste, para ver o botão funcionando. Na barra
superior, clique em ‘PLAY’, depois confirme a ação de salvar, clicando em
‘YES’. No nome do script, digite: ‘start button’ e clique em ‘Save’. Quando a
tela inicial surgir, clique em qualquer lugar da tela e perceba que o jogador
será direcionado para o início do game.
213
214
Passo 57 - Agora iremos inserir um elemento coletável em nosso game. Em
um jogo do tipo plataforma, os elementos coletáveis podem ser moedas,
diamantes, itens que envolvem ganho de vida ou poderes. Em nosso caso,
iremos inserir uma moeda rara. Inicialmente, volte para a tela de construção
do game, o ’Level – 2’.
215
Passo 58 - Na sequência, clique na camada ‘Main’ onde nosso personagem
está inserido. É na camada ‘Main’ que acontecem as principais interações
do game.
Passo 59 - Na ‘Faixa de ‘Opções’, procure pela categoria ‘Collectables’

(coletáveis). Pegue a moeda e arraste-a para a tela, próximo ao jogador.
Nós iremos inserir várias moedas no game, mas primeiro precisamos
programar uma moeda e, quando sua configuração estiver pronta, fazer
cópias por toda a fase.
216
Passo 60 - Criaremos agora uma tag (rótulo) na moeda para que ela possa
ser coletada. Essa marcação servirá para todas as moedas que forem
duplicadas posteriormente. Clique com o botão direito em cima do objeto
e escolha ‘Add Script’.
217
Passo 61 - Na tela do script que surgiu, clique em ‘Events’, procure por
‘When created’ e arraste-o para a tela, que será ativado quando esse objeto
for criado.
Passo 62 - Depois clique em ‘Sensing’, procure por ‘add tag “tag name” on
myself’ e arraste-o para dentro do último bloco adicionado. Então, clique no
campo ‘tag name’ e altere-o para ‘collectable’. Isso fará com que o objeto
seja marcado com a etiqueta chamada ‘collectable’.
218
Passo 63 - Vamos testar. Primeiro, salve esse script clicando em ‘PLAY’,
depois em ‘YES’. Dê o nome de ‘collectable’ para esse script. Durante o
teste, você verá que o personagem ainda não coleta a moeda. Para que
isso aconteça, primeiro você precisará desenvolver uma programação
que faça com que o personagem detecte a tag adicionada na moeda.
219
Passo 64 - Volte para a ‘Área de Trabalho’, clique com o botão direito em
cima do personagem e escolha ‘Edit script “player_movement”’.
Passo 65 - Localize o evento ‘When I am touched get toucher’. Este é o

evento relacionado à nossa ação de encostar nos espinhos e no mapa.
Na sequência, clique com o botão direito no último evento criado ‘if do’.
Depois, clique em ‘Duplicate’ para duplicá-lo.
220
Passo 66 - Encaixe o evento duplicado logo abaixo dos demais eventos já
criados.
221
Passo 67 - Precisamos realizar duas alterações. A primeira é trocar a
marcação ‘you win’ para ‘collectable’.
professor
// Professor(a), peça para que os alunos se atentem: para que a

programação funcione, o nome da tag precisa ser exatamente o
nome digitado na tag da moeda. \\
Passo 68 - A segunda alteração a ser feita é remover o ‘go to 2’ da moeda.
222
Passo 69 - Ainda na ‘Faixa de Opções’, clique em ‘Control Flow’ e procure
por ‘destroy myself’. Encaixe-o no lugar do evento que acabamos de deletar.
223
Passo 70 - Como não iremos destruir o próprio personagem (‘ele mesmo’),
delete o complemento ‘myself’ do bloco ‘destroy’.
224
Passo 71 - Então, precisamos criar a referência para destruir efetivamente
a moeda uma vez que ela for coletada. Para isso, na ‘Faixa de Opções’,
clique em ‘Variable’ (variável). Como você viu no Back-end, uma variável
consiste em um espaço reservado, na memória do computador, para guardar
informações que serão utilizadas por um programa. Aqui, destruiremos a
instância (cópia) da variável toucher para representar o objeto que é tocado.
Clique em ‘instance toucher’ e arraste-o para dentro do bloco ‘destroy’.
225
Passo 72 - Agora, podemos realizar um teste final em nosso game. Na
barra superior clique em ‘PLAY’. Ao iniciar o jogo, passe sobre a moeda e
verifique se ela sumirá.
Passo 73 - Você pode copiar a moeda e colá-la em vários pontos do seu

game. Para fazer isso, clique na moeda que você acabou de programar
e tecle Ctrl+C, apenas uma vez. Depois, dê vários Ctrl+V para ‘clonar’ as
novas moedas e posicioná-las nos locais desejados.
226
Passo 74 - Mova o mapa para o local do final de fase.
Passo 75 - Pronto, agora salve seu game e realize um teste completo.

Espalhe vários espinhos sobre a fase e posicione algumas moedas para
serem coletadas. Aproveite para usar mais itens e enfeitar toda sua fase.
227
offline
Variáveis
professor
//Professor(a), explique para os alunos que, nessa etapa, eles irão

aprimorar o conhecimento deles sobre o conceito de variável de uma
forma prática. Utilize o material do aluno para relembrá-los sobre o
que já aprenderam. \\
Nesta atividade offline, relembraremos, de forma prática, o conceito de

variáveis. Como você já estudou, uma variável é um espaço reservado
na memória do computador, que guarda dados que serão utilizados por
um programa. Essas informações podem ser letras, números, símbolos,
caracteres especiais ou estados, podendo ser verdadeiro ou falso.
Quando estamos desenvolvendo um game, podemos usar variáveis para
guardar as vidas restantes do jogador, o tempo restante disponível para
a fase, a pontuação adquirida, os mesmo os itens do inventário. Ou seja,
podemos guardar quaisquer informações que nos ajudarão durante todo o
game.
228
Os dados guardados em variáveis podem ser usados em outros momentos
e, também, podem sofrer alterações. No game do Super Mario Bros por
exemplo, as moedas são guardadas em variáveis e sempre que coletamos
mais moedas, podemos ver os valores sendo alterados na parte superior
da tela.
Para criar uma variável, é necessário informar um nome e determinar qual

valor ela deve armazenar. No exemplo abaixo vamos criar três variáveis
para guardar informações sobre uma fase do game Super Mario Bros.
Nome da Variável Valor

Moedas 0
Vidas 3
Tempo 300
Observando a tabela, podemos concluir que o personagem Mario está no

início da fase, pois ainda não coletou nenhuma moeda, está com 3 vidas e
300 segundos de tempo restante na fase.
229
Atividade Prática 1
professor
//Professor(a), nesta atividade mencione que utilizaremos um

texto para contar uma história. Nela, deixamos algumas lacunas,
representadas pelas variáveis, no lugar de algumas palavras.
Dependendo do que colocamos, o texto pode se transformar em
várias histórias diferentes. Explique para os alunos, caso julgue
necessário, o que são substantivos, adjetivos e verbos no gerúndio.
• Substantivo: palavras que nomeiam coisas, seres, lugares, pessoas,
objetos, sentimentos, entre outros. Antes deles normalmente se
encontram palavras como os artigos a(s) ou o(s) (ex: mesa, gato,
sol, relógio, amor, etc.).
• Adjetivo: serve para modificar um substantivo, acrescentando
uma qualidade (ex: feio, bonito, engraçado, etc.).
• Verbos no gerúndio: indicam que uma ação está em progresso
(comendo, correndo, estudando, rindo, etc.).
\\
Nesta atividade você utilizará um texto para montar uma história. Esse texto
possui lacunas, representadas por variáveis, para serem preenchidas. Você
pode seguir a dica entre parênteses para completar a história. Dependendo
do que você adicionar nesses espaços, criará uma história diferente. Ao
final, compartilhe a história com os seus amigos.
230
História do __________________ (nome).
Quando eu faço uma viagem para algum lugar __________________ (adjetivo)
com minha família, normalmente eu vou a um destino próximo a um / a
__________________ (substantivo). Um bom lugar de férias para mim é aquele
que eu posso jogar _________________ (nome do jogo) ou passar tempo
________________ (verbo no gerúndio). Meu melhor amigo ________________
(nome) gosta de passar seu tempo de férias ___________________ (verbo
no gerúndio) _____________________ ou ________________________ (verbo
no gerúndio). Meus irmãos normalmente passam suas férias comendo
_____________ (comida). Nas minhas últimas férias, meu irmão caiu em
um __________________ (substantivo) em cima de um(a) __________________
(substantivo) e ficou se coçando por horas. Não vejo a hora de poder ter
minhas férias novamente.
Lembre-se de que as lacunas vazias representam variáveis. Os diferentes

termos que usamos para preencher a história representam os valores que
atribuímos a essas variáveis.
professor
//Professor(a), deixe que alguns alunos compartilhem suas histórias.

Houve semelhanças ou diferenças entre elas? Alguém fez uma
versão quase idêntica a de outro aluno? Alguém fez alguma história
completamente diferente? As histórias semelhantes ou diferentes
representam o poder das variáveis assumindo diferentes conteúdos
em diferentes momentos. \\
231
Atividade Extra
professor
//Professor(a), nesta atividade extra vamos representar o conceito

de armazenar valores em uma variável e como podemos trocar seus
valores, sem perder os dados armazenados. Utilize quaisquer objetos
para representar as caixas e os objetos dentro das caixas. \\
Nessa atividade, você praticará como trocar os valores das variáveis sem
perder os dados armazenados. Para isso, você precisará de:
• 3 caixas pequenas (ou algo que as represente)
• 2 objetos pequenos (por exemplo, uma caneta ou lápis)
Comece nomeando as caixas: Caixa A, Caixa B e Caixa C.
Então, coloque um objeto na caixa A e um na caixa B.
232
O seu desafio será trocar os objetos de lugar, deixando o objeto que está
na caixa A, dentro da B, e o objeto que está na caixa B, dentro da A. Mas,
haverá algumas regras para seguir!
• Você pode utilizar a caixa C para armazenar objetos.
• Uma caixa pode guardar apenas um objeto.
• Você só pode mover um objeto de cada vez.
Depois, você deverá descrever o algoritmo para trocar os objetos entre as
caixas A e B.
professor
// Professor(a), abaixo temos os passos de um exemplo de resposta desenvolvedor de games júnior | módulo 1 | capítulo 3
que pode ser utilizado nessa atividade.

Troque o objeto da caixa B para a caixa C.
233
professor
Troque o objeto da caixa A para a caixa B.
Troque o objeto da caixa C para a caixa A.
Converse com a turma sobre a atividade e tire quaisquer dúvidas

que eles possam ter. Você poderá exemplificar para os alunos como
essa atividade funcionaria na programação de um jogo:
‘Essa lógica, que envolve uma variável auxiliar, pode ser usada de
234
professor
várias formas durante o desenvolvimento de um game. Por exemplo,

nas máquinas de pinball pode ser vista uma lista das três melhores
pontuações. Todas as vezes que alguém ultrapassa a pontuação de
uma das três primeiras posições, utiliza-se uma variável auxiliar para
remanejar a posição das pontuações, assim como vocês fizeram
com os objetos na caixa!’.
\\
235
backup
2 Min.
professor

completa da aula executada. Relembre com os alunos o planejamento
estipulado no início da aula. Esse momento de revisão ajuda a
reforçar os principais aprendizados que tiveram durante o encontro.
Utilize algumas situações que aconteceram durante a aula para
exemplificar e reforçar os conceitos mais importantes. \\
Nesta aula, você finalizou seu game, criando as telas de início de jogo,
vitória e derrota. Além disso, inseriu as moedas, o mapa final e realizou
suas programações, utilizando levels e variáveis. Aproveite esse momento
para tirar qualquer dúvida que tenha ficado.
237
level complete
3 Min.
professor
// A aula chegou ao fim! Caso não tenha sido possível realizar a

atividade desplugada durante o encontro, ela pode ser indicada para
ser feita em casa com os pais, irmãos ou amigos! \\
A aula chegou ao fim! Por meio de passos lógicos e uso de variáveis criamos
o nosso game. Aproveite para incrementar seu jogo em casa, adicionando
novos obstáculos e objetos de decoração.
pitch com o anjo
professor
// Professor(a), incentive os alunos a apresentarem o jogo para seus

familiares e amigos! \\
Compartilhe sua aventura com seus familiares e amigos. Explique para eles
tudo o que aprendeu sobre geolocalização e deixe-os jogar seu game!
239
capítulo 4
desenvolvedor
de games júnior
daily
Aprox. 5 Minutos
professor
//Olá, Professor(a)! Na aula de hoje, começaremos a desenvolver um

novo projeto, em uma nova plataforma. Neste momento, recapitule
junto com os alunos todo o desenvolvimento que aconteceu nas
últimas três aulas: os estudantes criaram um game na plataforma
Gamefroot utilizando linguagem de programação em blocos. Eles
também descobriram o conceito de eventos, de algoritmo e, na
última aula, trabalharam com as últimas programações do jogo.
Tente não levar muito tempo neste momento, para que seja possível
que os alunos façam a atividade do ‘Front-end’ de maneira completa.
Depois, apresente os objetivos da aula.\\
Olá, aluno(a)! Na aula anterior, você finalizou o game utilizando a plataforma

Gamefroot. No estilo de game em plataforma, desenvolvemos um jogo em
que o personagem principal precisava encontrar um mapa, desviando de
todos os obstáculos que foram inseridos. Conforme desenvolvemos o
projeto, aprendemos o conceito de eventos, de algoritmos, e como eles
estão inseridos em nosso dia a dia. Já na última aula, entendemos sobre as
variáveis e como elas funcionam no contexto dos games. Na aula de hoje,
começaremos um novo projeto, utilizando a plataforma Flowlab.
242
Objetivos da aula
Nesta aula, você vai iniciar o desenvolvimento de um projeto:

• Inserir o background (imagem de fundo);
• Adicionar blocos de grama para o chão da fase;
• Estruturar o layout/cenário da fase;
• Inserir o personagem;
• Configurar animação para o movimento;
• Iniciar a programação do personagem;
• Compreender as estruturas condicionais.
243
back-end
Aprox. 10 Minutos
professor
Professor(a), nesta aula, os alunos serão apresentados a uma nova
plataforma, que ainda não foi utilizada. No caso, é importante que,
nessa aula, os alunos possam conhecer e se familiarizar com a
ferramenta, bem como com o conceito de estrutura condicional. No
material do aluno será possível encontrar exemplos de estruturas
condicionais aplicadas aos filmes e jogos, para fazer escolhas.
Olá, aluno(a)! Seja muito bem-vindo(a) de volta. Você se lembra de tudo o

que já estudou até aqui? Para você não se perder sobre quantas aulas já
teve e o que já viu de informações novas, vamos te ajudar a se localizar:
nós chegamos na aula 4 do módulo 1.
Ficou mais fácil agora? Esperamos que sim, porque esse foi um exemplo
prático de como as coordenadas (aula 4 e módulo 1) podem nos ajudar a
encontrar nosso lugar, assim como na geolocalização, que é o assunto que
estamos desenvolvendo neste curso! desenvolvedor de games júnior | módulo 1 | capítulo 4
Desde o começo da nossa jornada, você já descobriu que a tecnologia, em

relação à geolocalização, evoluiu muito de algumas décadas para cá. Por
exemplo, antes usávamos bússolas e mapas para nos guiarmos pelos caminhos
e hoje contamos com a facilidade do GPS! Incrível como a tecnologia é nossa
parceira de desenvolvimento, não acha? Além disso, ela não contribui só com
a ciência e pode inovar até mesmo na forma com que produzimos cultura e
aproveitamos nossos momentos de lazer. É sério! Me acompanhe!
245
Você já ouviu falar em filmes interativos? Sim, eles existem! Hoje em dia,
assistir a alguns filmes não significa mais sentar-se com seu balde de
pipoca e aguardar a trama acontecer; você pode escolher o destino da
história e dos personagens! Funciona assim: em determinados momentos,
é pedido para o espectador escolher entre duas opções. Cada escolha leva
a trama por um caminho específico e, muitas vezes, parece até mesmo que
os personagens estão interagindo com quem assiste! Se você ficou
curioso(a), procure assistir “O Chefinho – Pega esse bebê” e divirta-se!
Outra forma de se divertir tomando decisões, é por meio dos games de

escolha, que são uma tendência ultimamente. Por meio deles, é possível
criar diversos finais para um mesmo jogo. Assim o player tem papel central na
narrativa e isso é muito atrativo para aqueles apaixonados por videogames.
A TellTale Games foi uma das primeiras a criar os games de escolha e já
desenvolveu jogos como Batman: Shadows Edition e Minecraft: Story Mode.
246
Tanto nos filmes interativos, quanto nos jogos de escolha, perceba que
o processo acontece assim: se escolhemos determinada opção, uma
determinada ação acontece. Se escolhemos outra opção, outra ação
acontece. Hum... Achamos que tem algo de programação envolvido
nessas tecnologias, o que você acha? Vamos continuar a nossa aula
para isso ficar mais claro! desenvolvedor de games júnior | módulo 1 | capítulo 4
Em nosso dia a dia, as pessoas tomam decisões a todo momento e hoje

compreenderemos como os computadores e sistemas tomam decisões,
dando a impressão que são inteligentes, mas, na verdade, estão cumprindo
regras pré-estabelecidas pelos programadores.
Por exemplo:
Vamos sair para passear no parque! Caso esteja chovendo, preciso de uma
capa de chuva.
247
A tabela abaixo mostra o mesmo exemplo escrito de duas maneiras. Do
lado esquerdo, temos blocos e imagens que representam o exemplo usado.
Note que é fácil entender que vamos ao parque e, se estiver chovendo,
devemos usar uma capa. Do lado direito, temos a mesma representação do
exemplo, agora usando um modelo de linguagem de programação. É assim
que nós, humanos, nos comunicamos com os computadores.
Program Ir_ao_parque {
Ir para o parque
if (estiver chovendo) {
SE Estiver chovendo print(“Use capa”);
}
}
USE
Nesse exemplo poderíamos incluir o comando ‘Senão’, e ficaria assim:

Vamos sair para passear no parque! Caso esteja chovendo eu preciso de
uma capa de chuva, caso não esteja chovendo, levarei uma bola.
Como funciona: desenvolvedor de games júnior | módulo 1 | capítulo 4
1. SE (condição).
2. ENTÃO (o que o programa deve fazer se a condição for atendida).
3. SENÃO (caso a condição não seja atendida, informe o que o programa
deverá fazer).
Os computadores são incríveis quando tomam decisões, mas perceba

que eles só tomarão as decisões que nós definirmos e farão isso numa
velocidade inacreditável.
248
Agora, imagine a seguinte situação: programaremos um game em que, na
primeira fase, duas coisas precisam acontecer para que a porta seja aberta
e o personagem possa passar para a próxima fase
1. O(a) personagem principal precisa puxar uma alavanca;

2. O(a) personagem precisa coletar uma bússola;
Se fôssemos escrever um código para que o computador pudesse entender,

ficaria mais ou menos assim:
Program Passar_de_Fase {
if (puxar alavanca){
if (coletar a bússola) {
print (“A porta se abrirá”);
}
}
}
professor
//Professor(a), explique que o conteúdo do bloco if é executado uma

vez que a condição seja satisfeita.\\
Note que no código que criamos, as duas condições precisam ser

verdadeiras: ele precisa puxar uma alavanca primeiro, para que, na sequência,
ele possa coletar a bússola e, somente depois, a porta será aberta.
Que tal programarmos um jogo de verdade com base nessas duas

condições?
Bora lá?
249
bugou
Saber tomar decisões é uma habilidade muito
importante para o século 21. Analisar as
situações e encontrar aquela que pode trazer
resultados mais interessantes para o seu
objetivo exige raciocínio, responsabilidade
e ética. Então, por que não treinar com as
escolhas em jogos e filmes?
250
front-end
Aprox. 70 Minutos
buil and run
professor
// Professor(a), dê início ao passo a passo com os alunos. Por ser
uma nova ferramenta, mencione com os alunos a importância de
conhecerem toda a sua interface. Também estimule a perguntarem
sempre que houver uma nova dúvida. \\
Passo 1 - Inicialmente, acesse o site: flowlab.io.
Flowlab é uma ferramenta de criação de jogos voltada para iniciantes, que

não exige - nem permite - que os usuários digitem um script ou códigos.
Em vez disso, os comportamentos dos objetos do jogo são criados com

uma interface de arrastar e soltar, no estilo fluxograma. Os desenvolvedores
utilizam blocos lógicos e o mecanismo do Flowlab interpretará essas
estruturas de maneira sequencial durante o processo. desenvolvedor de games júnior | módulo 1 | capítulo 4
252
Passo 2 - Como é a primeira vez que entramos no FlowLab, precisaremos
criar uma conta. Na parte superior direita do site, clique em ‘Sign Up Free’
para criar uma conta grátis.
Passo 3 - Agora, será necessário criar uma conta gratuita no Flowlab. É

importante anotar todas as informações para termos acesso à ferramenta
em outras aulas ou momentos.
O campo ‘Username’ precisa ser preenchido com um nome de usuário único.

Caso necessário, utilize números junto com nome. Ex: ‘happy123’. No campo
‘Email’, digite um e-mail válido, caso não tenha, solicite ajuda do professor.
No campo ‘Password’, digite uma senha. É recomendável que a senha seja
composta de letras, números e caracteres especiais. Ao final, ative a opção
‘I’m not a robot’, (Não sou um robô) e clique em ‘Sign up’ para inscrever-se.
professor
//Professor(a), caso necessário, ajude os alunos com a inserção de

uma conta de e-mail e também na criação de uma senha forte.\\
253
Passo 4 - Pronto, você está logado no site e está pronto para iniciar o
desenvolvimento do game. Note que, ao lado direito, na parte superior da
tela, aparecem duas informações importantes. A primeira é ‘My Games’
(meus jogos), que é a seção dos jogos criados, mas no momento ainda não
criamos nenhum game. O FlowLab permite a criação de três jogos gratuitos, desenvolvedor de games júnior | módulo 1 | capítulo 4
que ficarão on-line em sua conta pessoal. Ao lado de ‘My Games’ aparecerá
o seu nome de usuário, identificando que está logado corretamente.
254
Passo 5 - Clique no botão ‘New Game’ para criar um novo jogo.
Passo 6 - Ao clicar em ‘New Game’, a tela de desenvolvimento começará a

carregar. Espere alguns segundos até terminar o carregamento de todos os
módulos da ferramenta. Ao final, clique em ‘Empty Project’ para iniciar um
projeto em branco. Depois, clique em ‘OK’.
255
Passo 7 - A tela inicial do projeto vazio no FlowLab conta com uma área
central de cor branca. É nela que o game será desenvolvido. A área cinza
em volta pode ser usada para expandirmos a área do game. Agora,
expandiremos o tamanho do layout do game. Para isso, clique no botão
‘Settings’ (configurações), no canto inferior da tela.
256
Passo 8 - Dê um nome para o game, clicando no campo ‘Name’ e digitando:
‘Switches, Doors, & Compass’ (interruptores, portas e bússola). No
campo ‘Width’ (largura), aumente o tamanho da tela para ‘20’ e, depois,
clique em ‘OK’.
257
Passo 9 - O primeiro passo é inserir o background (imagem de fundo) do
game. Para isso, clique no item ‘Layer’ (camada), localizado na barra inferior
do nosso projeto. Na janela que surgir, clique em ‘Background’.
258
Passo 10 - Note que nada mudará na tela, mas perceba que surgirá uma
mensagem no rodapé da página, que afirma que estamos editando o
background no momento.
Passo 11 - Leve o mouse no centro da página, clique com o botão esquerdo

uma vez na tela, depois, clique em ‘Create’ (criar).
259
Passo 12 - Antes de inserirmos a imagem que representará o fundo
(background), precisamos definir o nome e o tipo do objeto. Na janela que
surgir, clique no campo ‘Type’ (tipo), digite ‘Background’ e, no campo ‘Name’
(nome), também digite ‘Background’. Essas informações ajudam o Flowlab
na identificação e programação dos objetos, caso necessário. Depois,
clique no botão ‘edit sprite’ para editar esse item (sprite).
260
Passo 13 - Perceba que na tela de edição de sprite surgirá um quadrado de cor
aleatória na tela. No exemplo, foi marrom, mas poderia ser de qualquer cor, a
cor não importa. ‘Ex: azul, vermelho, alaranjado… etc.’. Caso não mudemos a
imagem, o background será essa imagem aleatória que surgiu, mas ajustaremos.
Passo 14 - No lado direito, clique em ‘Upload’ para carregar uma imagem.

Na janela que surgiu, clique em ‘Browse for Sprite’ (Procurar uma Sprite).
Localize e abra a pasta de Assets, selecione o arquivo ‘Cartoon_Forest_
BG_01’ e, ao final, clique em ‘OK’.
261
262
Passo 15 - A imagem surgirá na tela para ajustarmos o tamanho e dimensão
da imagem que estamos inserindo. Note que, ao lado esquerdo e na parte
superior surgiram controles de tamanho com 32 blocos de largura e 32
de altura. Como o tamanho do nosso game foi definido com 20 blocos de
largura por 10 de altura, iremos enquadrar a imagem neste formato.
Passo 16 - Agora clique no canto diagonal inferior da imagem e arraste

para o centro. Precisamos diminuir o tamanho para ficar próximo aos 20
blocos de largura.
263
Passo 17 - Depois de diminuído o tamanho da imagem, vamos aos
ajustes finos usando as barras de controle superior. Diminua de 32 para
20 blocos. Repita o processo para a barra de controle ao lado esquerdo,
diminua de 32 para 10 blocos..
264
Passo 18 - Agora clique no canto diagonal inferior da imagem novamente,
clique e arraste para enquadrar a imagem perfeitamente no espaço definido.
265
Passo 19 - Terminado o ajuste de tamanho, clique no botão ‘OK’.
Passo 20 - A imagem surgirá na tela de edição de sprites. No lado esquerdo,

clique em ‘OK’. Perceba que a tela de criação do objeto surgiu novamente,
clique em ‘OK’ na tela. Depois, clique e arraste para posicionar a imagem
corretamente na tela do game, até cobrir todo o espaço em branco.
266
267
Passo 21 - Então, começaremos a programar o nosso game e precisamos
sair da camada background e ir para a camada principal. Clique em ‘Layer’
na barra inferior, depois, clique na camada ‘Game World’ (mundo do jogo),
que é a camada principal. Perceba que surgirá uma mensagem no rodapé
avisando que estamos editando a camada principal agora. desenvolvedor de games júnior | módulo 1 | capítulo 4
268
Passo 22 - Leve o mouse na parte inferior da imagem de background
que acabamos de adicionar e clique com o botão esquerdo na tela.
Na opção que surgiu, clique em ‘Create’. Vamos adicionar a grama
para ser a plataforma do jogo.
269
Passo 23 - Na janela que surgiu, clique no campo ‘Type’, digite: ‘Grass’
(grama), e faça o mesmo com o campo ‘Name’. Depois, clique em ‘edit sprite’
para editar esse componente. Na janela de edição de sprites, clicaremos
em ‘Browse’ para buscar uma imagem para associar com o componente.
270
Passo 24 - Na barra que surgiu ao lado direito, clique em ‘Select Category’
para selecionar uma categoria de busca. Então, vá em ‘pixel-blocks’. Depois,
clique uma vez no bloco que se parece com um bloco de terra e grama.
Passo 25 - Assim que o bloco de grama carregar na janela de edição de

sprites, clique em ‘OK’.
271
Passo 26 - Na janela de criação do objeto, clique em ‘OK’. Note que o bloco
de grama surgiu no exato ponto em que adicionamos o objeto. O bloco
de grama representará o chão por onde o personagem poderá caminhar.
Agora, criaremos ‘clones’ desse objeto por todo o chão da fase.
272
Passo 27 - Leve o mouse em cima do bloco de grama que acabamos de
adicionar, clique com o botão esquerdo, e escolha ‘Clone’ (clonar). Leve o
mouse ao lado do bloco de grama e clique com o botão esquerdo para criar
o objeto clone. Repita o processo até criar todo o chão do game.
273
Passo 28 - Depois de criar os clones em todo chão, leve o mouse na barra
inferior e clique em ‘Done Cloning’ (clonagem concluída).
Passo 29 - Em seguida, adicionaremos outro bloco em nossa fase, que

representa uma plataforma sólida, que não podemos ultrapassar. Usaremos
esse bloco para criar plataformas e barreiras em toda a fase. Leve o mouse
ao centro da tela, clique com o botão esquerdo e, depois, clique em ‘Create’. desenvolvedor de games júnior | módulo 1 | capítulo 4
274
Passo 30 - Na janela que surgiu, clique no campo ‘Type’ e digite: ‘Platform’
(plataforma). Faça o mesmo com o campo ‘Name’. Depois, clique em ‘edit
sprite’ para editar o componente.
Passo 31 Na janela de edição de sprites, clique em ‘Browse’, pois iremos

buscar uma imagem para associar com o componente. Depois, clique em
‘Select Category’ e escolha a categoria ‘pixel-blocks’. Então, escolha um bloco
de madeira da sua preferência. Ao final, clique em ‘OK’ e, novamente, em OK.
275
276
Passo 32 - Caso seu bloco não esteja no centro da tela, arraste-o para lá.
Duplicaremos esse bloco de modo a dividir a tela. Clique em cima do bloco
de madeira, escolha ‘Clone’, clique em cima desse bloco até criar uma linha
de divisão na tela do game, seguindo a imagem abaixo.
277
278
Passo 33 - Criaremos outras estruturas usando o mesmo bloco de
madeira. Essas estruturas têm propósito de serem plataformas em que
o personagem poderá subir.
279
280
Passo 34 - Clonaremos também o bloco de madeira para ser usado como
barreira. Esses blocos serão colocados nas laterais do game, fora da
área de visualização. Eles não podem aparecer para o jogador, por isso,
os colocamos fora da área de visualização (na parte cinza escura). Esses
blocos têm o propósito de impedir a passagem e bloquear, deixando o
jogador sempre dentro da fase.
281
Passo 35 - Na parte superior também será preciso criar blocos sólidos,
que impedirão o jogador de “escapar” para fora do layout. Na parte
superior, é interessante deixar um espaço acima das árvores. Caso o
jogador pule ali em cima, ele sairá do layout, mas ao bater na barreira, ele
cairá para dentro do layout novamente. O jogador não verá as barreiras,
mas saberá que não pode escapar. Ao final, clique em ‘Done Cloning’, na
parte inferior, para parar a clonagem.
282
Passo 36 - Então, testaremos o game. Para realizarmos o teste, basta clicar
no botão ‘Play’ (Jogar), na parte inferior. Perceba que, ao centro da tela, o
game que estamos desenvolvendo aparecerá.
Passo 37 - Agora que testamos a visualização completa do game, voltaremos

para a tela de edição e continuaremos o desenvolvimento. Para isso, clique
no botão ‘Edit Game’ (editar game).
283
Passo 38 - Adicionaremos o personagem principal do game. O
personagem que usaremos faz parte do pacote disponibilizado pelo
Flowlab. Leve o mouse no canto esquerdo do game, clique uma vez com
o botão esquerdo e escolha ‘Create’.
284
Passo 39 - Na janela de criação do objeto, clique no campo ‘Type’ e digite:
‘Py’. Então, clique em ‘Name’ e escreva o mesmo nome. Esse é o nome que
daremos ao personagem, se preferir, dê outro nome. Na sequência, clique
em ‘edit sprite’ para editar o componente.
Passo 40 - Na janela de edição de sprites, clique no botão ‘Browse’ para

escolhermos um personagem entre os existentes na ferramenta Flowlab.
285
Passo 41 - Na barra lateral que surgiu, clique em ‘Select Category’ e
escolha ‘pixel-chars’ (personagens em pixel-art). Note que surgirão vários
personagens. Perceba que alguns possuem outras imagens similares, que
configurarão as animações que criaremos.
Passo 42 - Para visualizar todos os personagens, posicione o mouse sobre eles

e desça até a barra de rolagem, para exibir todos os personagens disponíveis.
286
Passo 43 - O personagem que escolheremos para esse game será o de cor
amarela, que está mostrando a língua. Note que ele possui quatro imagens
similares, que juntas executam a animação do personagem andando. Primeiro,
precisamos escolher a imagem do personagem parado, ou seja, a imagem que
representa ele em repouso. Clique na primeira imagem do personagem.
professor
//Professor(a), caso ache necessário, explique para os alunos como

as animações quadro-a-quadro funcionam. A animação refere-se ao
processo, segundo o qual cada foto/imagem de um filme é produzida
individualmente, podendo ser gerada tanto por computação gráfica,
quanto fotografando uma imagem desenhada. Ao executar as
imagens individuais de forma rápida, dá-se a sensação de movimento,
ou seja, de animação.\\
287
Passo 44 - Agora, criaremos a animação que permitirá nosso personagem
andar. Na barra inferior, clique em ‘Animation Editor’ (Editor de animação).
288
Passo 45 - Note que surgiu uma barra inferior. Clique em ‘Pick
Animation’ (Escolher animação). Depois, clique em ‘Create New’ para
criar uma nova animação.
289
Passo 46 - Surgirá uma janela para salvar o nome da animação. Daremos
o nome de ‘walk’ (andar), já que ela representará o personagem andando.
Depois, clique em ‘OK’.
Passo 47 - O nosso personagem possui quatro imagens ao todo: a primeira

representará o personagem em repouso e as outras três representarão ele
andando. Então, clicaremos três vezes no botão ‘+’ para, assim, adicionarmos
três imagens (frames) para essa animação.
//Professor(a), mencione com os alunos que os frames são

conhecidos como os quadros de um vídeo ou animação e que cada
frame ou quadro é representado por uma imagem fixa.\\
290
Passo 48 - Selecionaremos as imagens corretas para cada um dos frames

criados. Primeiramente, clique com o botão esquerdo no segundo frame,
depois, selecione a segunda imagem na barra da esquerda.
291
292
Passo 49 - O frame 1 representa o personagem parado. O frame 2, que
acabamos de ajustar, representa o personagem dando um passo. Agora,
ajustaremos o frame 3.
Na barra superior, dê um clique no terceiro frame. Na sequência, escolha
a terceira imagem do lado esquerdo.
293
Passo 50 - Faremos o quarto e último frame. Na barra superior, dê um clique
no quarto frame. Na sequência, escolha a quarta imagem do lado esquerdo.
294
Passo 51 - Podemos testar a animação do personagem andando. Dê um
clique no botão ‘Play’ na barra superior. Note que a animação começará.
295
Passo 52 - Caso esteja achando a animação muito rápida, ou muito devagar,
é possível ajustar o ‘delay’ (atraso), no campo anterior. Adicionando ‘2’ no
‘delay’, a animação ficará bem rápida. Aumentando para ‘6’, ficará lenta.
Escolha uma velocidade que te agrade. Ao final, clique no botão ‘OK’.
296
Passo 53 - Na janela de desenvolvedor de games júnior | módulo 1 | capítulo 4
criação do objeto ‘Py’, clique

no campo ‘Reset’ (resetar)
e escolha ‘Keep between
levels’ (Manter-se entre os
níveis). Isso permitirá que o
personagem principal possa
terminar a fase 1 e ir para a
fase 2, por exemplo.
297
Passo 54 - Aplicaremos a física em nosso personagem principal. A ferramenta
Flowlab já possui princípios e bibliotecas que gerenciam a física do game.
Precisaremos apenas ativar e alterar alguns parâmetros. Para isso, clique

no botão ‘Physics’ (física). Na próxima tela, ative a opção ‘movable’ (móvel),
para que o personagem possa se mover. Note que a opção ‘affected by
gravity’ (afetado pela gravidade) é ativada automaticamente. Depois, altere
os parâmetros dos campos ‘Bounce’ (quicar) e ‘Friction’ (atrito). Os valores
definidos podem ser mudados, e isso impactará como o personagem reagirá
ao entrar em contato com outros objetos. Se definir um ‘Bounce’ mais alto,
os outros objetos tenderão a saltar ao colidir com este objeto. Um valor de
‘Friction’ alto significa que outros objetos ficarão mais lentos quando entrarem
em contato com o personagem. Ao final, clique em ‘Properties’ para voltar.
professor
//Professor(a), é interessante definir os valores padrões para

Bounce (8.5) e Friction (37.7). Execute alguns testes com os alunos,
depois, volte nesta tela para alterar os parâmetros conforme o desenvolvedor de games júnior | módulo 1 | capítulo 4
interesse de cada aluno. \\
298
299
Passo 55 - Ainda na janela de edição do personagem ‘Py’, clique em
‘Behaviors’ (comportamentos), já que precisamos realizar a programação
do personagem principal.
Passo 56 - Na tela de programação, dentro de ‘Triggers’ (gatilhos), clique

três vezes em ‘Keyboard’ (teclado). Organize os blocos conforme mostra a
imagem abaixo (eles estarão um em cima do outro). Nosso personagem
será controlado com três teclas: esquerda, direita e pulo.
300
Passo 57 - Programaremos a tecla ‘Left’ (esquerda), para movimentar o per-
sonagem para esse lado. Clique uma vez no primeiro bloco de cima. Na
sequência, clique em ‘Change Key’ (mudar tecla), depois, aperte no teclado
a seta da esquerda. Na sequ-
ência, marque a opção ‘Re-
peating’ (repetição). Isso ser-
virá para identificar quando
o jogador pressionar a seta
da esquerda por um tempo,
para que a movimentação
aconteça enquanto a tecla
estiver sendo pressionada.
Ao final, clique em ‘OK’.
Passo 58 - Para programar a tecla ‘Right’ (direita) e mover o personagem para

esse lado, clique uma vez no segundo bloco que adicionamos. Na sequência,
clique em ‘Change Key’ (mudar tecla) e, depois, aperte no teclado a seta da direita.
Em seguida, marque a opção ‘Repeating’ (repetição). Ao final, clique em ‘OK’.
301
Passo 59 - Agora, programa-
remos o pulo do personagem,
com a tecla ‘Backspace’ (bar-
ra de espaço). Clique uma vez
no terceiro bloco que adiciona-
mos, depois, em ‘Change Key’
(mudar tecla), e aperte no te-
clado a barra de espaço. O pulo
não terá repetição. Ao final, cli-
que em ‘OK’.
Passo 60 - Do lado esquerdo, procure por ‘Properties’ (propriedades),

depois, escolha ‘Animation’ para criar uma animação.
302
Passo 61 - Realizaremos uma ligação do bloco ‘Keyboard Left’. Para isso, clique
na bolinha ‘down’ (para baixo) e arraste-a até a bolinha ‘start’ (iniciar) do bloco
‘Animation’. Repita o processo interligando o bloco ‘Keyboard Right’: clique na
bolinha ‘down’ (para baixo), e arraste-a até o ‘start’ do bloco ‘Animation’.
professor
//Professor(a), neste ponto da aula, pergunte aos alunos se eles

notaram uma estrutura condicional envolvendo os três blocos
de programação (pausa para ouvir as respostas). Em seguida,
explique que existem uma estrutura condicional utilizando a porta
lógica OU implícitas aqui:
SE a seta para a esquerda (Left) do teclado for pressionada (down)
OU SE a seta para a direita (Right) do teclado for pressionada (down)
ENTÃO a animação (walk) será iniciada (start)//
303
Passo 62 - Do lado esquerdo, procure por ‘Logic & Math’ (lógica e matemática),
clique três vezes no campo ‘Number’ (número) e ajuste a posição de cada
bloco, conforme imagem abaixo.
304
Passo 63 - Configuraremos a velocidade que o personagem andará para a
esquerda. Clique uma vez no bloco ‘Number’ que adicionamos no topo. No
campo ‘Label’ (rótulo), escreva: ‘move left’ (mover para a esquerda), para
identificar esse bloco. No campo ‘Current value’ (valor atual), digite ‘-6’ ou clique
no símbolo ‘-‘ até chegar ao ‘-6’. O valor negativo representa o movimento para
esquerda no eixo X. Ao final, clique em ‘OK’.
Passo 64 - Então, precisamos configurar a velocidade que o personagem

andará para a direita. Clique uma vez no bloco ‘Number’ que adicionamos ao
centro. No campo ‘Label’ (rótulo), escreva: ‘move right’ (mover para a direita).
No campo ‘Current value’ (valor atual), digite ‘6’ ou clique no símbolo ‘+’ até
chegar ao ‘6’. O valor positivo representa o movimento para direita no eixo X
Ao final, clique em ‘OK’.
305
Passo 65 - Em seguida, configuraremos a força do pulo do personagem. Clique
uma vez no bloco ‘Number’ que adicionamos ao final (mais abaixo). No campo
‘Label’ (rótulo), escreva: ‘jump’ (pulo). No campo ‘Current value’ (valor atual),
digite ‘12’ ou clique no símbolo ‘+’ até chegar ao ‘12’. Ao final, clique em ‘OK’.
306
Passo 66 - Chegamos ao final da aula. O nosso projeto ainda não está pronto,
mas iremos continuá-lo na próxima aula. O Flowlab salva o projeto a cada ação
que realizamos, então, fiquem tranquilos, pois não perderemos nada ao sair da
tela do projeto.
Na lateral esquerda, clique no botão ‘OK’. Na tela de edição do personagem

‘Py’, clique em ‘OK’. Na tela do desenvolvimento, clique no botão ‘PLAY’. Note
que seremos levados para a tela de testes do game. Nosso personagem ainda
não será capaz de andar e executar pulos. Fique tranquilo, pois na próxima
aula vamos terminar toda a programação do jogo.
307
308
offline
Estrutura condicional
professor
//Professor(a), caso os alunos estejam participando da aula

presencialmente, aplique a atividade a seguir: \\
Você já ouviu falar na brincadeira do Detetive com cartas de baralho?
A lógica do jogo está repleta de estruturas condicionais, veja!
Primeiro, você precisa separar a mesma quantidade de cartas correspondente

às pessoas que estão jogando. Uma tem que ser o Rei, outra tem que ser o desenvolvedor de games júnior | módulo 1 | capítulo 4
Coringa, as demais podem ser números de qualquer naipe.
As cartas são embaralhadas e colocadas com a face virada para baixo.

Cada jogador retira uma carta sem mostrá-la para os demais. Quem tirou
o Rei será o Detetive, quem tirou o Coringa será o assassino e os demais
serão as vítimas.
309
Estrutura Condicional:
SE pegou a carta do Rei
ENTÃO você será o Detetive

SENÃO SE você pegou a carta do Coringa
ENTÃO você será o Assassino
SENÃO você será a vítima
Traduzindo: Se nenhuma das duas condições iniciais for verdadeira, então,

você será a vítima. Se a primeira for verdadeira, você será o Detetive, se a
segunda for verdadeira, você será o Assassino.
Agora, vamos para as regras:
1. Todos devem ficar atentos e se entreolhando.
2. O Assassino deverá piscar para as vítimas sem deixar que o detetive
o descubra. Se conseguir piscar para todas as vítimas e só sobrar o
detetive, ele ganha o jogo.
3. Se alguém te piscar e você for uma vítima, pode dizer: ‘Morri!’ e sair do
jogo.
4. Se alguém te piscar e você for o Detetive, você deverá dizer: ‘Você está
preso!’ e ganhará o jogo.
310
Estruturas Condicionais:
Para o Assassino:
SE (você piscou para alguém) E (ele é o detetive)
ENTÃO (o jogo termina)
SENÃO (o jogo continua)
Para os demais jogadores:

SE (alguém piscou para você) E (você é o detetive)
ENTÃO (você diz: ‘Você está preso!’)
SENÃO (você diz: ‘Morri!’)
professor
//Professor(a), caso os alunos estejam participando remotamente

da aula, você poderá aplicar, como alternativa, a atividade a seguir.
Avise os alunos que esse game deverá ser jogado em dupla. No jogo,
uma estrutura condicional deverá ser checada para que o jogador
possa pontuar.
Eles vão precisar de um dado, ou de um baralho, para poder jogar!

Caso não tenham um, poderão acessar o link: https://geranicks.com/
dados-online/.
Em cada jogada, será preciso observar o número que caiu no

lançamento do(s) dado(s). O algoritmo são as regras abaixo que o
jogador deverá seguir para ganhar ou perder pontos.
311
professor
Diga para os alunos desenharem uma tabela, como essa abaixo, para
registrarem os lançamentos do dado e os respectivos pontos. Cada
jogador participará de quatro rodadas. Mas caso queira, você pode
aumentar o número de rodadas. Eles também poderão utilizar mais
de um dado para dificultar o jogo!
Jogador A Jogador B
Rodada
Dado Pontos Dado Pontos
1
2
3
4
Total
Uma vez desenhada a tabela, apresente aos alunos as regras abaixo

e diga-lhes para preencher a tabela para jogar o jogo de pontos.
Mantenha as regras visíveis na sua tela para que eles possam
consultá-las.
Diga que o(a) jogador(a) que mais pontuar será o(a) vencedor(a). desenvolvedor de games júnior | módulo 1 | capítulo 4
IMPORTANTE: pode ser que a conta resulte em um número negativo.

Um exemplo é se você tiver 3 pontos em uma rodada e precisar
remover o número que tirou no dado. Se o número que tirou no dado
for 5, então 3 – 5 = -2 (menos 2).
Regras para 1 dado:

Se essa for a primeira rodada
Então escreva o valor do dado na pontuação da primeira rodada.
312
professor
Se o número sorteado é IGUAL a 3 e essa não for a primeira rodada.

Então dobre seus pontos da rodada anterior e coloque na pontuação
da rodada atual (multiplique por 2).
Se o número sorteado é MAIOR que 3 e essa não for a primeira

rodada.
Então some esse número aos pontos da rodada anterior e coloque
na pontuação da rodada atual.
Se o número sorteado é MENOR que 3 e essa não for a primeira

rodada.
Então subtraia esse número dos pontos da rodada anterior e
coloque na pontuação da rodada atual.
Regras para 2 dados:
Se essa for a primeira rodada

Então some os números sorteados e escreva na pontuação da
primeira rodada desenvolvedor de games júnior | módulo 1 | capítulo 4
Se a soma dos números sorteados for IGUAL a 9 e essa não for a

primeira rodada
Então dobre seus pontos da rodada anterior (multiplique por 2) e
coloque na pontuação da rodada atual
313
professor
Se a soma dos números sorteados for IGUAL a 4 e essa não for a

primeira rodada
Então divida seus pontos da rodada anterior ao meio (divida por 2)
e coloque na pontuação da rodada atual
Se a soma dos números sorteados for MAIOR que 10 e essa não for
a primeira rodada
Então adicione a soma dos números sorteados aos pontos da
rodada anterior e coloque na pontuação da rodada atual
Se a soma dos números sorteados for MENOR que 3 e essa não for
a primeira rodada
Então subtraia a soma dos números sorteados dos pontos da
rodada anterior e coloque na pontuação da rodada atual
Senão
Adicione a soma dos números sorteados na pontuação da rodada
atual\\
314
backup
Aprox. 2 Minutos
professor
//Professor(a), neste momento, é importante realizar uma revisão

completa da aula executada, relembrando com os alunos o
planejamento estipulado no início da aula. O momento de revisão
ajuda a reforçar os principais aprendizados que tivemos durante a
aula. Utilize algumas situações que aconteceram durante o encontro
para exemplificar e reforçar os conceitos mais importantes. \\
Nesta aula, você iniciou o desenvolvimento de um novo game, utilizando

a plataforma Flowlab. Também tivemos uma atividade offline, utilizando
as estruturas condicionais. Aproveite esse momento para tirar qualquer
dúvida que tenha com o(a) professor(a).
316
level complete
Aprox. 3 Minutos
professor
//A aula chegou ao fim! Caso não tenha sido possível realizar a
atividade offline durante a aula, ela poderá ser indicada para ser feita
com os pais, irmãos ou amigos em casa!\\
A aula chegou ao fim! Caso não tenha dado tempo para fazer a atividade
offline, é importante que você faça com seus amigos e familiares em casa.
Boa diversão!
pitch com o anjo
professor
//Professor(a), incentive os alunos a apresentarem o jogo para os

familiares e amigos!\\
Compartilhe sua aventura também com os familiares e amigos. Explique

para eles tudo o que vimos sobre estruturas condicionais e apresente o
novo jogo que estamos desenvolvendo!
318
capítulo 5
desenvolvedor
de games júnior
daily
Aprox. 5 Minutos
professor
// Olá, Professor(a)! Na aula anterior começamos o desenvolvimento

de um novo game, na plataforma Flowlab, e hoje vamos continuá-
lo. Neste momento, recapitule junto com os alunos todo o
desenvolvimento que aconteceu nas duas aulas anteriores e
apresente os objetivos desta aula. \\
Olá, aluno(a)! Na aula anterior você iniciou o desenvolvimento de um

novo game utilizando a plataforma Flowlab. Começamos inserindo o
background (imagem de fundo), depois, estruturamos o layout/design
da fase (paredes, chão), inserimos o personagem Py e iniciamos a
programação do mesmo. Ao final da aula, realizamos uma atividade off-
line utilizando cartas de um baralho, cujo objetivo era entender como
funcionavam as estruturas condicionais.
No encontro de hoje, terminaremos de programar as ações do personagem

Py e continuaremos a programação do desenvolvimento.
Objetivos da aula
• Finalizar a programação do personagem Py;

• Criar o sistema de alavanca;
• Entender sobre operações e portas lógicas;
• Executar uma atividade que envolve raciocínio lógico.
321
back-end
Aprox. 10 Minutos
professor
// Professor(a), neste momento, os alunos conhecerão os conceitos
relacionados à eletrônica digital e como isso impacta nossas vidas.
É importante que os estudantes possam compreender o conceito da
lógica computacional desenvolvida pelo matemático George Boole.
Portanto, utilize o material do aluno para explicar sobre o conceito
dos circuitos lógicos básicos. \\
bugou
O Google utiliza nos algoritmos de busca

um método inventado há mais de 150
anos pelo matemático George Boole.
A álgebra booleana é uma estrutura

que esquematiza as operações lógicas
e está presente em todas as partes: da desenvolvedor de games júnior | módulo 1 | capítulo 5
programação por trás dos videogames até

os códigos dos aplicativos e programas
de computador que usamos.
Pode-se dizer que os tijolos que formam

a programação, que são os comandos ou instruções dadas a um sistema
informático, são todos baseados na lógica de Boole.
Fonte: https://glo.bo/3bCfdTj
323
Os primeiros computadores foram construídos a partir de alavancas e
engrenagens. Ainda não existiam telas coloridas, nem teclado ou mouse.
Esses computadores utilizavam o sistema analógico, ou seja, todos os
valores e quantidades eram representadas por sinais elétricos, que podiam
ser lidos através de medidores e painéis de luzes.
Fonte: https://bit.ly/3BVKueJ
Com o avanço da tecnologia e computadores mais modernos, os mesmos

problemas começaram a ser solucionados através da eletrônica digital. Essa
história começou no século XIX, com o matemático inglês George Boole, que
desenvolveu uma teoria completamente diferente para a época chamada
de ‘Álgebra de Boole’. Ela se baseia em dois únicos estados possíveis dos
terminais dos componentes eletrônicos que fazem parte de um circuito,
ou seja, um (1), significando que um terminal tem corrente elétrica e zero
(0), significando que o terminal não tem corrente elétrica (está desligado).
324
Começava a surgir o que chamamos atualmente de eletrônica digital, que
é utilizada nos modernos computadores e smartphones que conhecemos.
A partir de combinações desses dois estados, tornou-se possível

desenvolver estruturas capazes de representar as operações lógicas E
(AND) e OU (OR), que passaram a ser chamadas de portas lógicas. Por
isso, os circuitos desenvolvidos com essas estruturas ficaram conhecidos
como circuitos lógicos.
Por exemplo, no game Minecraft é possível encontrar circuitos de redstone

que funcionam com esse mesmo princípio: ora estão ligados funcionando,
ora estão desligados e não funcionam. Uma das experiências mais legais
é realizar a construção de algum circuito utilizando redstone para ativar
uma porta, uma armadilha ou um canhão! Entender como construir e
usar os circuitos de redstone e os mecanismos que eles podem controlar
aumenta, e muito, o alcance do que é possível fazer no Minecraft.
325
Trazendo esse mesmo conceito para a programação do jogo, quando
precisamos que o personagem se mova pela fase, ele poderá pressionar a
seta da direita OU (OR) a seta da esquerda, ou seja, estamos utilizando o
conceito de portas lógicas.
A porta lógica OR é uma operação lógica entre dois ou mais operadores

que resulta em um valor lógico verdadeiro, se pelo menos um operador tiver
um valor verdadeiro:
Se pressionar a seta da esquerda (1) OU (OR) se pressionar a seta da direita

(1), a animação do personagem acontecerá (1). O OU também funcionará
quando as duas teclas forem pressionadas juntas! desenvolvedor de games júnior | módulo 1 | capítulo 5
Referências:
https://bit.ly/3EITOEh
https://bit.ly/3wgOBRl
https://bit.ly/3BJAQLO
326
front-end
Aprox. 70 Minutos
buil and run
professor
// Professor(a), dê início ao passo a passo com os alunos. Sempre

que notar a possibilidade, reforce os conceitos de estrutura lógica
durante a programação do game. \\
Chegou a hora de colocar a mão na massa e continuar o jogo do Py. Siga o

passo a passo e boa diversão!
Passo 1 - Para continuarmos o projeto iniciado na aula anterior, acesse o

site: flowlab.io. Na sequência, clique em ‘Log In’ (Conectar-se) para entrarmos
na conta que criamos na aula anterior. Na próxima tela, digite o e-mail e a
senha que foram cadastrados, depois, clique em ‘Sign in’ (Iniciar sessão).
328
329
Passo 2 - Depois de entrar, clique em ‘My Games’ (Meus Jogos). Localize o
projeto criado na aula anterior e clique no botão ‘Edit’ (editar).
330
Passo 3 - Precisamos continuar o projeto e terminar as configurações
do personagem principal. Clique uma vez sobre o personagem
‘Py’, depois, em ‘Edit’. Na tela de edição do personagem, clique em
‘Behaviors’ (comportamentos).
331
332
Passo 4 - Para continuarmos a configuração do personagem principal e
fazer com que ele execute o movimento de andar, precisamos interligar os
blocos que representam a seta do teclado e o valor, que adicionamos por
último. No bloco ‘Keyboard Left’, clique na bolinha ‘down’ (para baixo), e
arraste-a até o bloco ‘move left’, na bolinha ‘get’ (pegar). Com isso estamos
interligando os blocos que representam o movimento para a esquerda.
Passo 5 - Interligaremos os blocos que representam o movimento à direita. desenvolvedor de games júnior | módulo 1 | capítulo 5
No bloco ‘Keyboard Right’, clique na bolinha ‘down’ (para baixo), e arraste-a

até o bloco ‘move right’, na bolinha ‘get’ (pegar).
333
Passo 6 - Em seguida, ajustaremos o bloco usado para o pulo e a força que
definimos. No bloco ‘Keyboard Spacebar’, clique na bolinha ‘down’ (para
baixo), e arraste-a até o bloco ‘jump’, na bolinha ‘get’ (pegar).
334
Passo 7 - Precisamos criar um controle sobre o pulo do personagem
principal, para que o mesmo não pule infinitamente no game, ou seja, que
ele pule e, antes mesmo de cair no chão, pule novamente. Inicialmente,
para implementar esse controle, o personagem precisa estar no chão. Para
isso, leve o mouse até ‘Triggers’ (gatilhos), e clique em ‘Collision’ (colisão).
Posicione o bloco como indicado na imagem, depois, clique uma vez no
bloco ‘Collision’, no campo ‘Any Type’, e escolha ‘Grass’ (grama). Ou seja, o
personagem precisa estar colidindo com a grama. Ao final, clique em ‘OK’.
335
Passo 8 - No menu lateral esquerdo, clique em ‘Logic & Math (Lógica e
Matemática)’ e procure por ‘Switch’ (interruptor). O ‘Switch’ serve para
habilitar ou desabilitar determinadas programações, como se fosse um
interruptor de tomada, que pode ser ligada ou desligada. Posicione o bloco
como mostra a imagem.
336
Passo 9 - Realizaremos a conexão dos blocos inseridos. Clique na bolinha
‘hit’ do bloco ‘Collision Grass’ e arraste-a até a bolinha ‘on’ (ligado) do
‘Switch’. Isso serve para informar ao programa que o personagem está no
chão e pode pular (switch on/interruptor ligado).
Passo 10 - Uma vez que o personagem já estiver pulando, ele não poderá
pular novamente e precisará cair no chão. Então, clique na bolinha ‘up’ (para
cima) do bloco ‘Keyboard Spacebar’ e arraste-a até a bolinha ‘off’ (desligado)
do ‘Switch’. Isso serve para informar ao programa que o personagem já está
pulando e que não poderá pular novamente (switch off/interruptor desligado).
337
Passo 11 - Como já definimos a força do pulo, passaremos esse valor
para o bloco ‘Switch’, pois uma vez que o pulo acontecer, ele precisa ter a
força especificada. Clique na bolinha ‘out’ (saída) do bloco ‘jump’ (pular), e
arraste-a até o bloco ‘in’ (entrada) do ‘Switch’.
Passo 12 - Programaremos as ações que o personagem executará uma vez

que as condições de movimentação que programamos forem satisfeitas.
No painel lateral, clique em ‘Properties’ (propriedades), depois, clique em
‘Flip’ (giro) e posicione-o conforme a imagem. Esse bloco é usado para desenvolvedor de games júnior | módulo 1 | capítulo 5
espelhar a posição do personagem principal, ou seja, para mudá-lo de lado.

Caso o jogador aperte a seta para a esquerda no teclado, o personagem
andará para a esquerda e a imagem precisará ficar espelhada (isto é, ele
deverá ficar com o rosto virado para a esquerda). Para isso, clique na bolinha
‘out’ do bloco ‘move left’ e arraste-a até a bolinha ‘flip’ do bloco ‘Flip’.
338
Passo 13 - Caso o jogador esteja pressionando no teclado a seta para
a direita, a imagem do personagem não precisa ficar espelhada, pois a
imagem original já está com o rosto virado para a direita. Então, clique na
bolinha ‘out’ do bloco ‘move right’, e arraste-a até a bolinha ‘back’ (voltar) desenvolvedor de games júnior | módulo 1 | capítulo 5
do bloco ‘Flip’.
339
Passo 14 - Precisamos executar a ação de movimento do personagem.
Anteriormente já definimos a tecla e a posição da movimentação. Agora,
precisamos da ação que ocorrerá caso as condições aconteçam. Ainda
dentro de ‘Properties’, clique em ‘velocity’ (velocidade) e posicione o bloco.
professor
//Professor(a), reforce com os alunos o aprendizado sobre a porta

lógica (OR) que aprendemos no início da aula. O bloco ‘velocity’,
de velocidade, usará a porta lógica (OR), pois independente do
personagem andar para a esquerda ou para a direita, acontecerá o
movimento dele.\\
Passo 15 - Caso o personagem se mova para a esquerda, os parâmetros do

eixo X do game, que é o eixo horizontal, precisam ser alterados. Para isso,
clique na bolinha ‘out’ do bloco ‘move left’, e arraste-a até a bolinha ‘x’ do
bloco ‘Velocity’.
340
professor
//Professor(a), relembre os alunos que um game 2D possui dois eixos:

X (horizontal) e Y (vertical). No caso do plano bidimensional, temos
apenas os eixos x e y, sendo que os valores no eixo x se referem à
direita e a esquerda (sendo positivos para o lado direito e negativos
para o lado esquerdo) e no eixo y se referem para cima e para baixo
(sendo positivos para cima e negativos para baixo) .\\
Passo 16 - Caso o personagem se mova para a direita, os parâmetros do

eixo X também precisam ser alterados. Para isso, clique na bolinha ‘out’ do
bloco ‘move right’, e arraste-a até a bolinha ‘x’ do bloco ‘Velocity’.
341
Passo 17 - As ações dos movimentos para a esquerda e direita do
personagem estão prontas. Agora, finalizaremos colocando a ação do
pulo. Na barra lateral, clique em ‘Components’ (componentes), depois, em
‘Impulse’ (impulso), posicionando-o como indicado na imagem.
342
Passo 18 - Caso o jogador execute o pulo, a ação será um impulso no eixo
y do game, que é o eixo vertical. No bloco ‘Switch’, clique na bolinha ‘out’, e
arraste-a até a bolinha ‘y’ do bloco ‘Impulse’. Ao final, clique em ‘OK’.
Passo 19 - Na janela de criação do personagem, clique em ‘OK’. Precisamos

testar nosso game. Para testar a movimentação do personagem na tela, na
barra inferior, clique em ‘Play’.
343
Passo 20 - Você deverá testá-lo em todos os pontos programados. Ande

para a direita e a esquerda com as setas do teclado e note que o personagem
olha para o lado que está andando. Utilize a tecla de espaço e veja o seu
personagem pular.
344
345
Passo 21 - Você deve ter percebido que o personagem se movimenta
normalmente e pula quando apertamos a barra de espaço, mas, que ao
subir no bloco de madeira, ele não consegue executar o pulo. Isso acontece
porque a programação só estava relacionada com a grama. O bloco de
madeira é outro objeto, por isso, ele não realizará o pulo. Para ajustarmos,
é necessário voltar para a tela de edição do game. Para isso, clique no
personagem e, depois, clique em ‘Edit’.
346
Passo 22 - Na próxima tela, clique em ‘Behaviors’. Localize o bloco da
colisão com a grama.
347
Passo 23 - Clique uma vez no bloco ‘Collision Grass’ e troque para ‘Any Type’
(qualquer tipo). Isso significa que qualquer colisão que possa acontecer
com o personagem, indica que ele poderá pular. Ao final, clique em ‘OK’.
Saia da tela de programação e clique em ‘OK’.
348
Passo 24 - Teste novamente o game. Agora, nosso personagem poderá
pular quando estiver encostando em qualquer lugar.
349
Passo 25 - Volte na tela de edição do game. Leve o mouse no bloco
localizado abaixo, para criarmos um bloco de tijolo nesse espaço. Esse
espaço apenas será liberado após o personagem alcançar o interruptor que
você irá inserir posteriormente. Clique com o botão esquerdo uma vez e
escolha a opção ‘Create’.
350
Passo 26 - Na janela de criação do objeto, clique nos campos ‘Type’ e
‘Name’ e digite ‘Blocker’ (bloqueador), já que esse será o tipo e nome do
bloco. Depois, clique em ‘edit sprite’. Na janela de edição de sprite, clique
em ‘Browse’ para buscar uma imagem.
351
Passo 27 - Na barra lateral que surgir, clique em ‘Select Category’ e
escolha a categoria ‘pixel-blocks’. Leve o mouse em cima das imagens
que surgiram e mova para baixo até encontrar os blocos que simbolizam
os blocos de pedra ou tijolo. Ao encontrar, clique uma vez sobre o bloco
escolhido. Ao final, clique em ‘OK’.
352
353
Passo 28 - Execute um teste e veja se consegue passar pelo bloco. Todos
os blocos que adicionamos no Flowlab possuem característica sólida
por padrão, então, esse bloco será impossível de ser ultrapassado. Caso
precise ultrapassar, é necessário alterar a configuração sólida ou destruir o
bloco. É exatamente isso que faremos agora. Destruiremos o bloco, caso o
personagem toque no interruptor que inseriremos.
354
Passo 29 - Volte na tela de edição do game. Leve o mouse para cima da
plataforma que criamos no lado esquerdo. Adicionaremos um interruptor
que precisará ser tocado. Clique uma vez e escolha ‘Create’.
355
Passo 30 - Na janela que surgiu, clique nos campos ‘Type’ e ‘Name’ e

nomeie-os como ‘Switch’. Depois, clique em ‘edit sprite’. Na tela de edição do
componente, clique em ‘Browse’ para buscar uma imagem. Na barra lateral
que surgiu, clique em ‘Select Category’ e escolha a categoria ‘pixel-objects’.
Por último, mova para baixo e dê um clique no ícone da alavanca vermelha.
356
357
Passo 31 - Agora, criaremos a animação da alavanca sendo movida. Na
parte inferior, clique em ‘Animation Editor’ (Editor de animação).
Passo 32 - Na barra inferior, clique em ‘Pick Animation’ (escolher animação),

depois, clique em ‘Create New’ para criar uma animação. Na janela para
nomear essa animação, dê o nome de ‘on’ (ligado) e clique em ‘OK’.
358
Passo 33 - Na barra inferior, note que, por padrão, já aparece um frame
criado para a animação da alavanca, ou seja, já aparece uma imagem
estática. Esse frame bastará para a nossa animação, então, leve o mouse
do lado esquerdo e clique na alavanca de cor verde.
359
Passo 34 - Quando pressionada, a alavanca passará da cor padrão (vermelha)
para a cor verde, que representa que a alavanca foi ligada. Ela não ficará
executando a animação em sequência. Agora, basta clicar em ‘OK’.
Passo 35 - Precisamos ajustar a parte física da alavanca. O personagem

precisará tocar nela, mas ela não pode ser sólida, já que não impedirá a
passagem do personagem. Na janela de criação do objeto, clique na opção
‘Physics’ (física). Na janela que surgiu, desmarque a opção ‘is solid’ (é
sólido) e marque a ‘enable collisions’, para habilitar colisões. Então, clique
em ‘Properties’ para voltar.
360
361
Passo 36 - Realizaremos a programação da alavanca que acabamos
de inserir. Primeiramente, clique no botão ’Behaviors’. Na tela de
programação, na lateral esquerda, em ‘Triggers’, selecione ‘Collision’,
para programar a colisão.
362
Passo 37 - Quando a alavanca for tocada, ela precisará executar
a animação que criamos nos passos anteriores. Então, clique em
‘Properties’ (propriedades), depois, em ‘Animation’ (animação), e
posicione-o conforme imagem abaixo.
Passo 38 - Configuraremos a pausa na animação da alavanca. Quando ela for

acionada, a animação acontecerá, mas a imagem ficará fixa no último frame
da animação acionada, isso é, na imagem verde. Para isso, clique uma vez no
bloco ‘Animation’. Na janela que surgir, marque a opção ‘Stay on last frame
when done’ (Ficar no último quadro quando terminar). Depois, clique em ‘OK’.
363
Passo 39 - Realizaremos a interligação dos blocos adicionados. Ligue a
bolinha ‘hit’, do bloco ‘Collision’, até a bolinha ‘start’, do bloco ‘Animation’,
para que a animação seja acionada após a colisão.
Passo 40 - Criaremos um som, que será executado quando a alavanca for

acionada. Na barra lateral esquerda, clique em ‘Components’, depois em
‘Sound’ (som) e arraste-o acima do bloco anterior. Para escolhermos o som
que será acionado, clique dentro do bloco ‘SoundEffect’. Na sequência,
clique em ‘Choose Sound’ (escolher som).
364
Passo 41 - Na janela que surgir, clique em ‘effects’ (efeitos), depois em
‘switch’ e escolha um som da sua preferência entre os disponíveis. Para
ouvir, basta clicar uma vez sobre o elemento. Depois de escolhido, clique
em ‘OK’ e em ‘OK’ novamente.
365
366
Passo 42 - Clique na bolinha ‘hit’ do bloco ‘Collision’, ligue-a até o ‘play’ do
bloco ‘SoundEffect’. Ou seja, quando a alavanca for acionada, ela executará
a animação no mesmo momento em que o som é tocado.
367
Passo 43 - Clique em ‘Ok’, faça o teste no seu jogo e veja a animação
da alavanca funcionar, assim como o som que você acabou de inserir.
Lembre-se que a liberação da passagem ainda não foi programada; ela
será feita na próxima aula!
368
offline
professor
// Professor, nessa atividade os alunos farão uma atividade de

lógica que envolve três personagens, três meios de transporte e
três animais. Cada um dos três personagens anda em um meio de
transporte cada e têm um animal cada. Um aluno deverá escolher
uma das histórias e ler as primeiras três informações. Os demais
alunos deverão utilizar as cartas disponíveis no anexo para desvendar
as respostas para as questões elencadas abaixo da história. Para
cada informação que o aluno lê, os outros posicionam as cartas na
mesa buscando a informação que está faltando. Quando aquela
369
professor
história for desvendada, outro aluno poderá ser o narrador de outra
história. Utilize as cartas disponíveis no anexo. O jogo ficará mais
interessante utilizando as cartas impressas.
Assista ao vídeo abaixo para ver o jogo de Boole ser realizado.
bit.ly/JOGO-DE-BOOLE //
Nesta atividade, você desenvolverá a capacidade de raciocínio lógico

através de histórias construídas sobre estruturas lógico-matemáticas, sob
a forma de enigmas ou problemas. desenvolvedor de games júnior | módulo 1 | capítulo 5
O jogo consiste em solucionar histórias com estruturas lógicas. Um

aluno lê a história e os outros participantes organizam as cartas para
desvendar a peça que falta. As cartas são dispostas em linhas verticais
e o jogo estará completo quando a história for desvendada, com as
cartas dispostas corretamente.
Neste jogo usaremos nove cartas, sendo três personagens, três meios de
transporte e três animais.
370
371
Um aluno do grupo de participantes deverá escolher uma história e ler
cada instrução. Os demais alunos deverão utilizar as cartas e representar
as instruções. Ao final, deverão responder as perguntas que estão
marcadas em negrito.
Histórias lógicas:
História 1 História 2
Instruções: Instruções:
• Juca viaja de navio. • Quem viaja de navio tem um cão.
• Lalá tem um gato. • Lalá tem um gato.
• O galo viaja de metrô. • Péti viaja de metrô.
Perguntas: Perguntas:
• De quem é o cão? • Juca viaja em qual meio de
• Quem viaja de avião? transporte?
• Qual o animal de Péti? • Quem viaja de avião?
• De quem é o galo?
História 3 História 4
Instruções: Instruções:
• Juca tem um cão. • O galo partiu no metrô, mas
• Se Péti anda de metrô, ela tem Péti não.
um gato. • O navio chegou trazendo o cão.
• Lalá anda de navio. • O gato partiu com Juca.
• Péti não tem um gato. Perguntas:
Perguntas: • Qual o meio de transporte
• Quem tem um galo? utilizado por Lalá?
• Quem anda de avião? • Quem viajou de avião?
372
Como exercício, vocês deverão usar as cartas para encontrar as respostas
das histórias. Também precisarão registrar as histórias e as respostas nos
cadernos. Siga as orientações do seu professor e bom jogo!
373
backup
Aprox. 2 Minutos
professor

completa da aula executada. Relembre com os alunos os objetivos
estipulados no início do encontro. O momento de revisão ajuda a
reforçar os principais aprendizados da aula. Utilize algumas situações
que aconteceram na aula para exemplificar e reforçar os conceitos
mais importantes. \\
Nesta aula, você continuou o desenvolvimento do game. Aprendemos

sobre as estruturas lógicas e realizamos uma atividade offline em que
aprendemos a resolver enigmas através de constatações. Além disso,
demos continuidade às programações do game, inserindo e programando
novos objetos. Aproveite este momento para tirar qualquer dúvida que
tenha com o(a) professor(a).
375
level complete
Aprox. 3 Minutos
professor
// A aula chegou ao fim! Incentive os alunos a aprimorarem o game

desenvolvido, em casa. Lembre-os que todos os jogos desenvolvidos
na plataforma Flowlab ficam públicos; basta entrar em qualquer
computador, acessar a conta criada e melhorar ainda mais o game.\\
A aula chegou ao fim! Na plataforma Flowlab estamos criando um game

onde o personagem Py precisa cumprir duas tarefas para poder passar de
fase. A primeira tarefa envolve puxar uma alavanca para que a pedra que
está obstruindo seja destruída. A segunda tarefa, é coletar uma bússola
para abrir a porta e seguir para finalizar o game. Estas tarefas vão ser
desenvolvidas nas próximas aulas!
pitch com o anjo
// Professor(a), incentive os alunos a jogarem o jogo de Boole em casa

e desafiarem seus familiares nesse desafio de lógica. Disponibilize
as cartas utilizadas para eles, caso seja possível. \\
Sua missão, nesta semana, será jogar o jogo de Boole em casa. Desafiem
seus familiares e amigos nesse desafio de lógica, eles vão adorar!
377
capítulo 6
desenvolvedor
de games júnior
daily
Aprox. 5 Minutos
professor
// Olá, Professor(a)! Nas duas aulas anteriores desenvolvemos um

novo game, usando a plataforma Flowlab. Hoje, terminaremos a
programação dele. Neste momento, recapitule junto com os alunos
todo o desenvolvimento que aconteceu nos encontros anteriores e
apresente os objetivos desta aula. \\
Olá, aluno(a)! Preparado para continuarmos as aventuras de Py? Nas aulas

anteriores, você iniciou e desenvolveu um game utilizando a plataforma Flowlab.
Recapitulando os passos executados nas aulas anteriores, você aprendeu

a inserir um background (imagem de fundo), estruturou o layout/design
da fase (paredes, chão), inseriu o personagem, iniciou e terminou a
programação do mesmo.
No encontro de hoje, terminaremos de programar os elementos necessários

para passarmos de fase, usaremos alavancas e portas para conseguirmos
avançar de nível.
Objetivos da aula
• Criar o sistema de alavanca;
• Programar a passagem para a segunda parte da fase;
• Configurar o sistema de abertura de porta;
• Entender sobre o conceito de envio de mensagens;
• Conhecer os protocolos de rede;
• Executar uma atividade que envolve o envio de mensagens.
380
back-end
Aprox. 10 Minutos
professor
// Professor(a), neste momento, os alunos conhecerão os con-
ceitos relacionados aos protocolos de rede, utilizados em toda
comunicação que está por trás da internet. Utilize o material do
aluno para a explicação. \\
Você já ouviu falar em rede de computadores?
Podemos dizer que redes de computadores são grupos de dois ou mais com-
putadores interconectados para compartilhar recursos e trocar informações.
As redes de computadores estão cada vez mais presentes no dia a dia das
pessoas, em nossas casas, escolas, nas pequenas e grandes empresas.
Um exemplo de rede de computadores é a Internet, que é caracterizada por

uma rede descentralizada, ou seja, que não possui um computador central.
Na verdade, são milhares de equipamentos, servidores e cabos, espalhados desenvolvedor de games júnior | módulo 1 | capítulo 6
em todas as partes do mundo. Esse emaranhado de equipamentos permite

que os usuários troquem informações pela internet.
Durante a década de 60, as primeiras redes foram criadas com o propósito

de trocar dados entre dois computadores. No período entre 1970 e 1973,
com a criação da Arpanet (precedente à Internet), foi possível interligar
universidades, instituições militares e empresas.
https://olhardigital.com.br/2019/10/24/noticias/mae-da-internet-faz-50-anos-conheca-
a-historia-da-arpanet/
382
Ainda na década de 70, o programador Ray Tomlinson criou um software
que permitia a troca de mensagens entre usuários conectados no mesmo
PC. Nascia aí o que conhecemos hoje por e-mail.
No início, o e-mail teve a função de trocar mensagens simples entre

usuários da ARPANET, como se fosse o SMS de hoje. Conforme o
sistema evoluiu, a possibilidade de mandar mensagens maiores
aumentou cada vez mais. E assim, o e-mail começou a ser mais visto
como, de fato, um correio eletrônico.
O e-mail, assim como todos os outros serviços disponíveis na internet

utilizam um conjunto de regras e convenções que definem a comunicação
de todos os dispositivos das redes de computadores. Esse conjunto de
regras é chamado de protocolo de rede.
Podemos citar o protocolo SMTP (Simple Mail Transfer Protocol) que tem
a função de somente enviar e-mails (a um destinatário ou mais), fazendo
a transmissão do mesmo. Para recebimento das mensagens de um
servidor utiliza-se outro protocolo, o POP3 (Post Office Protocol) que tem
a função de receber as mensagens do servidor para o programa cliente de
e-mail do usuário (como o Outlook, entre outros).
No mundo do desenvolvimento de jogos, usamos a todo momento o

princípio e a característica principal dos e-mails: o envio e recebimento
de mensagens. Dessa forma, conseguimos abrir e fechar portas, iniciar e
concluir missões, passar ou não de uma fase.
Os jogos no estilo RPG são conhecidos por inúmeras quests (missões)

que acontecem durante o jogo, podendo ser principais ou secundárias.
383
Muitas vezes em jogos de RPG on-line, jogadores executam missões
diferentes e, em determinado momento, é possível perceber que alguns
jogadores conversam com o mercador (NPC - personagem não jogável).
Dependendo do game, os NPC’s podem possuir inteligência artificial e
conseguem mudar o diálogo conforme a quest que é executada pelo
jogador. Imaginem a seguinte situação:
• O jogador escolhe fazer a missão principal. No diálogo com o NPC, a

missão principal possui ‘código 1’, ou seja, a mensagem que estamos desenvolvedor de games júnior | módulo 1 | capítulo 6
enviando para o NPC é a 1. A partir daí, o NPC receberá a mensagem e
executará o diálogo da missão principal.
• Caso o jogador escolha fazer missões secundárias, a mensagem que

passa mos para o NPC é a 2. A partir daí, o NPC receberá a mensagem
e executará o diálogo da missão secundária.
É através do envio e recebimento de mensagens que algumas ações de

jogos são executadas.
384
Entendido o conceito de envio de mensagens, bora enviar mensagens e
terminar a programação do nosso game?
bugou
Todos os e-mails são constituídos de um nome + @ + o serviço de e-mail +

.com ou .com.br, mais ou menos assim: nome@serviçodeemail.com.
Sabe o porquê do @ ?
A nomenclatura vem dos primórdios do e-mail. O @ em inglês é

lido como “at” que significa ‘em’. Portanto, um endereço de e-mail
se constitui de um nome seguido de onde o e-mail será enviado
(geralmente o serviço de e-mail).
Referências:
https://www.opservices.com.br/protocolos-de-rede/
https://www.tecmundo.com.br/web/2763-a-historia-do-email.htm desenvolvedor de games júnior | módulo 1 | capítulo 6
385
front-end
Aprox. 70 Minutos
offline
professor
//Professor(a), neste momento, faremos uma dinâmica para mostrar

a importância do conceito de envio e recebimento de mensagens.
A reflexão da atividade é conseguir fazer o envio de mensagens de
forma clara, para que o receptor consiga entender, tomar uma ação
ou reencaminhar a mensagem a partir dela. Professor, é interessante
que todos os alunos participem da brincadeira. Se possível, convide
as outras pessoas do hub educacional para participarem também.\\
Vocês já brincaram de telefone sem fio?
Nessa brincadeira, uma pessoa fala uma palavra ou frase (o “segredo”) ao

ouvido de outra pessoa ao seu lado, de modo que os demais participantes
não escutem ou descubram imediatamente qual é o “segredo”. Quem ouviu
o segredo tentará repeti-lo para o próximo participante, e assim por diante,
até chegar ao último, que deverá contar o segredo em voz alta.
Neste momento, brincaremos de telefone sem fio, mas faremos uma

pequena modificação: o segredo não será falado! O participante precisará
fazer os gestos do segredo, sem dizer uma palavra.
O objetivo da brincadeira é mostrar a importância do envio e do recebimento

de mensagens, de forma clara, mesmo que por gestos.
387
Regras da dinâmica:
1. Todos os participantes precisam ficar em fila, olhando para frente da
sala, um atrás do outro.
2. O professor irá até o final da fila, tocará no ombro de um aluno e executará
o gesto a ser enviado como mensagem.
3. A partir daí, todos precisarão receber e enviar a mensagem para o
próximo da fila.
4. Ao final, o professor verificará se a mensagem recebida na frente da fila
é igual à mensagem enviada no início da dinâmica.
professor
//Professor(a), você poderá criar gestos com base em frases do game

que estamos desenvolvendo, ou outras quaisquer, por exemplo:
1. Para abrir uma porta, preciso pressionar uma alavanca;
2. A bússola guia sempre para o norte;
3. O coelho esperto está próximo à porta;
Ao final da dinâmica, diga qual foi a mensagem enviada e se ela desenvolvedor de games júnior | módulo 1 | capítulo 6
sofreu ruídos ao longo do caminho, até o final.
Exemplos da dinâmica sendo realizada:
https://youtu.be/Dbub_2UCcyQ
https://youtu.be/e3YtWL5p1_4
\\
Ao final, cada participante poderá relatar como foi a experiência de

receber e enviar uma mensagem, e também apontará se a brincadeira
foi fácil, difícil ou divertida.
388
build and run
professor
// Professor(a), dê início ao passo a passo com os alunos. Sempre
que notar a possibilidade, reforce os conceitos já trabalhados durante
a programação do game. \\
Chegou a hora de colocar a mão na massa e finalizar o jogo do Py. Siga o

Passo 1 - Para continuarmos o projeto, acesse o site: flowlab.io. Na sequência,

clique em ‘Log In’ (Conectar-se) para entrarmos na conta que criamos. Na
próxima tela, digite o e-mail e a senha que foram cadastrados, depois, clique
em ‘Sign in’ (Iniciar sessão).
389
Passo 2 - Depois de entrar, clique em ‘My Games’ (Meus Jogos). Localize o

projeto criado na aula anterior e clique no botão ‘Edit’ (editar).
390
Passo 3 - Na última aula você testou seu game e viu que a animação da
alavanca e o som estão funcionando, mas a passagem de um lado para o
outro não foi liberada ainda, certo? Então, faremos essa programação agora.
391
Passo 4 - Todas as vezes que o jogador colidir com a alavanca, uma
mensagem deverá ser enviada para que o bloco cinza seja destruído. Vá
até a programação da colisão, clique sobre a alavanca e selecione ‘Edit’.
Então, entre em ‘Behaviors’.
392
Passo 5 - Dentro de ‘Components’, clique em ‘Message’, depois, no bloco
‘Message’, pois queremos que uma mensagem seja enviada, e coloque o
bloco na posição indicada. Clique sobre o bloco e, na janela que surgir,
clique no campo superior, digite ‘open’ (abra), então, marque o campo
‘Choose objects to send to’ (Escolher objetos para enviar a mensagem). No desenvolvedor de games júnior | módulo 1 | capítulo 6
campo abaixo, clique e escolha o objeto ‘Blocker’ que adicionamos. Esse

objeto é o tijolo cinza que está impedindo a passagem do jogador para o
lado direito da fase. Ele receberá a mensagem para abrir quando o jogador
tocar na alavanca. Ao final, clique em ‘OK’.
393
Passo 6 - Ligue a bolinha ‘hit’ do bloco ‘Collision’ até a bolinha ‘send’

do bloco ‘Message’. Então, quando a alavanca for tocada, ela executará
a animação, emitirá o som e enviará uma mensagem para o bloco de
tijolo que criamos. Esse princípio de enviar mensagem é a função dos
métodos de uma classe. Ao final, clique em ‘OK’. Na janela de criação da
alavanca clique em ‘OK’.
394
395
Passo 7 - Finalizada a programação da alavanca, programaremos o bloco
de pedra que está impedindo a passagem do personagem principal. Ao
tocar na alavanca, uma mensagem é enviada diretamente para o bloco
de pedra. Nosso papel agora, assim que o bloco de pedra receber a
mensagem ‘open’, é fazer com que uma ação seja realizada. Clique uma
vez em cima do bloco de pedra, escolha ‘Edit’ nas opções que surgiram
e clique em ‘Behaviors’.
396
Passo 8 - Precisamos programar a mensagem que será recebida quando a
alavanca é acionada. Na tela de programação do bloco, clique em ‘Triggers’
na aba lateral esquerda, depois, em ‘Mailbox’ (caixa de e-mail). Clique no
bloco ‘Mailbox’ para configurarmos a mensagem recebida. Na janela que
surgiu, renomeie a mensagem para ‘open’. Essa é a mensagem que será
enviada pela alavanca.
Atenção! Para que essa ação funcione, você deverá escrever a palavra
exatamente igual a que foi escrita na hora de enviar a mensagem, inclusive
se atentando ao uso de letras maiúsculas ou minúsculas.
397
Passo 9 - No nosso game, uma vez que a alavanca é acionada, o bloco
de pedra será destruído. Quando a mensagem ‘open’ for recebida,
definiremos a ação para destruir o bloco de pedra. Na aba esquerda, clique
em ‘Components’ e escolha ‘Destroyer’ (destruidor). Na sequência, realize
a interligação dos blocos que acabamos de adicionar. Clique na bolinha
‘out’ do bloco ‘Mailbox’ e arraste-a até a bolinha ‘destroy’ (destruir) do bloco
‘Destroyer’. Ao final, clique em ‘OK’.
398
Passo 10 - Na janela de edição do bloco de pedra, clique em ‘OK’. Agora,
testaremos nosso game. Na barra inferior, clique em ‘Play’.
399
Passo 11 - No teste do game, precisamos verificar se a alavanca está
funcionando. Ela precisará destruir o bloco de pedra para que possamos ir
para o lado direito da fase.
400
Passo 12 - Perceba que a alavanca ficou acionada e o bloco de pedra foi
destruído, liberando a passagem para o personagem.
401
você sabia?
Games do tipo ‘puzzle’ possuem esses desafios de abrir portas, ligar
chaves e mover alavancas, com o objetivo de resolver problemas
ou enigmas. Podemos citar um game bem famoso no estilo. O Goof
Troop, game lançado pela ‘Capcom’ para o Super Nintendo.
402
Passo 13 - Agora que o personagem pode ir para o outro lado da fase,
adicionaremos dois objetos ao game. O primeiro será uma bússola, que
será um coletável. O segundo objeto será uma porta, usada para passar de
nível. O jogador só poderá atravessar a porta se pegar a bússola. Pegar a
bússola é a condição que precisa acontecer para seguirmos com o game.
Então, volte para a tela de edição. Depois, clique acima da plataforma
superior à direita e, então, escolha ‘Create’.
403
Passo 14 - Nos campos ‘Type’ e ‘Name’, digite ‘Compass’ (bússola), para
definir o tipo e nome do objeto. Depois, clique em ‘edit sprite’.
404
Passo 15 - Como a plataforma Flowlab não possui um item similar a uma
bússola, faremos o upload de uma imagem. No lado direito, clique em ‘Upload’.
Na próxima tela, clique no botão ‘Browse for Sprite’ (Procurar Sprite). Acesse a
pasta de Assets, clique no arquivo ‘compass’ e selecione ‘Open’ (abrir). Depois
de carregar a imagem da bússola na tela de edição de sprite, clique no controle
superior para ajustar a largura do objeto, altere para 1, clique em ‘OK’.
405
406
Passo 16 - Antes de realizarmos a programação da bússola, precisamos
adicionar a porta final que usaremos para passar de fase. Então, clique em
‘OK’ na janela de criação da bússola.
407
Passo 17 - Leve o mouse na parte inferior direita do game, clique com o
botão esquerdo e escolha ‘Create’.
408
Passo 18 - Na janela de criação da porta, clique nos campos ‘Type’, ‘Name’
e digite ‘Door’, para especificar o tipo e o nome do objeto. Na sequência,
clique em ‘Physics’.
Passo 19 - Desmarque a opção ‘is solid’, pois a porta não será sólida e desenvolvedor de games júnior | módulo 1 | capítulo 6
não poderá impedir a movimentação do personagem. Ative a opção ‘enable

collisions’, pois o Flowlab precisa detectar quando o personagem encostar
na porta (colidir com ela). Depois, clique em ‘Properties’ para continuarmos
a configuração do objeto da porta.
409
Passo 20 - Clique em ‘edit sprite’. Na janela de edição, clique em ‘Browse’
para escolhermos a porta do game. No painel direito que surgiu, clique
em ‘Select Category’ para escolher a categoria e, depois, clique em ‘pixel-
blocks’. Perceba que algumas imagens de portas aparecerão.
410
411
Passo 21 - A primeira imagem que precisamos é a da porta fechada. Note
que temos dois tipos de portas: uma de madeira e outra de metal. Fique
à vontade para escolher uma delas. Quando escolher, clique uma vez na
porta fechada. Configuraremos a animação da porta se abrindo, uma vez
que pegarmos a bússola. Do lado esquerdo, clique no ícone de animação.
No painel superior da animação, clique em ‘Pick Animation’, depois, em
‘Create New’ para criar uma nova animação. Na janela que surgiu, renomeie
a animação para ‘open’ e, depois, clique em ‘OK’.
412
Passo 22 - Note que a animação ‘open’ já vem com um frame/imagem
padrão. Trocaremos essa imagem de porta fechada por ela aberta. Para
isso, basta clicar do lado direito na imagem da porta aberta.
413
Passo 23 - Feito isso, clique em ‘OK’ na tela de edição de sprites e, também,
em ‘OK’ na criação do objeto da porta.
414
Passo 24 - Programaremos, primeiro, a nossa bússola. Leve o mouse em

cima do objeto bússola, clique com o botão esquerdo e escolha ‘Edit’. Na
janela de criação da bússola, clique em ‘Behaviors’.
415
416
Passo 25 - Na janela de programação, leve o mouse na lateral esquerda,
em ‘Triggers’, e clique em ‘Collision’. Agora, adicionaremos dois blocos
que serão executados quando tocarmos na bússola (isto é, quando o
personagem colidir com ela). Dentro de ‘Components’, dê um clique em
‘Message’ e em ‘Destroyer’. Posicione os blocos como indicado.
417
Passo 26 - Definiremos a mensagem que será enviada para a porta
quando a bússola for tocada. Clique uma vez no bloco ‘Message’. Na
parte superior, clique e renomeie a mensagem para ‘unlock’ (destrancar).
Depois, marque a opção ‘Choose objects to send to’, para escolher o
objeto para o qual a mensagem será enviada e escolha o objeto ‘Door’.
Isso é feito para que, ao tocarmos na bússola, a porta destrave ao receber
a mensagem. Ao final, clique em ‘OK’.
Passo 27 - Clique na bolinha ‘hit’ do bloco ‘Collision’ e arraste-a até a bolinha

‘send’ do bloco ‘Message’. Repita o processo, ligando a bolinha ‘hit’ do bloco
‘Collision’ à bolinha ‘destroy’ do bloco ‘Destroyer’. Ou seja, quando a bússola
for tocada pelo personagem principal, ela será destruída, ao mesmo tempo
em que a mensagem ‘unlock’ será enviada para a porta. Ao final, clique em
‘OK’ e, na janela de criação do objeto bússola, clique em ‘OK’ novamente.
418
419
Passo 28 - Configuraremos a porta para que receba a mensagem ‘unlock’ e
possa executar a animação de ‘open’, abrindo-se e liberando a passagem do
personagem. Leve o mouse em cima da porta, clique com o botão esquerdo,
escolha ‘Edit’ e, na janela de criação da porta, clique em ‘Behaviors’.
420
Passo 29 - Na tela de programação da porta, na barra lateral esquerda,

dentro de ‘Triggers’, clique uma vez em ‘Collision’ e outra em ‘Mailbox’,
posicionando os blocos conforme a imagem. Depois, clique uma vez dentro
de ‘Mailbox’. No campo da mensagem, renomeie para ‘unlock’, igual ao
nome dado anteriormente, e clique em ‘OK’.
421
Passo 30 - Adicionaremos o elemento de som ao abrir a porta. Dentro de

‘Components’, clique em ‘Sound’. Depois de adicionado, clique uma vez em
‘SoundEffect’, então, clique no botão ‘Choose Sound’ para escolhermos o
efeito de som que soará ao abrirmos a porta.
422
Passo 31 - Na janela que surgir, clique em ‘effects’. Dentro da pasta, clique

em ‘adventure’ (aventura) e, então, em ‘doors’ (portas). Surgirão vários sons
de porta se abrindo. Para ouvi-los, basta clicar uma vez neles. Escolha um
som da sua preferência, depois, clique em ‘OK’. Na janela de configuração
do som, clique em ‘OK’ novamente.
423
424
425
Passo 32 - Adicionaremos o bloco da animação, que será executado
quando pegarmos a bússola. Na barra lateral esquerda, dentro de
‘Properties’, clique em ‘Animation’. Uma vez adicionado, clique no bloco
‘Animation’ e marque a opção ‘Stay on last frame when done’. Isso fará
com que a imagem da porta aberta fique visível na tela.
426
Passo 33 - Precisaremos criar um controle em que duas coisas precisam
acontecer para podermos passar de fase. A primeira será que a bússola
precisa ser coletada. A segunda é que o personagem precisa encostar na
porta. Para criar esse controle de condição, dentro de ‘Logic & Math’, clique
em ‘Switch’ (interruptor).
Passo 34 - Interligaremos os blocos que foram adicionados. Clique na

bolinha ‘out’ do bloco ‘Mailbox’ e arraste-a até a bolinha ‘play’ do bloco
‘SoundEffect’. Repita o processo, clique na bolinha ‘out’ do bloco ‘Mailbox’, e
arraste-a até a bolinha ‘start’ do bloco ‘Animation’. Ao final, clique na bolinha
‘out’ do bloco ‘Mailbox’ e arraste-a até a bolinha ‘on’ do bloco ‘Switch’. Isso
fará com que, ao receber a mensagem, o som toque, a animação ocorra e o
interruptor seja avisado de que a mensagem chegou. Isso ainda não fará a
porta se abrir, pois o personagem ainda precisará encostar nela.
427
428
Passo 35 - Agora, ligue a bolinha ‘hit’ do bloco ‘Collision’ e arraste-a até a
bolinha ‘in’ do bloco ‘Switch’.
429
Passo 36 - Pronto, agora o interruptor saberá quando o personagem
encostar na porta. Precisaremos fazer com que o jogo reinicie. Para isso,
vá até ‘Game Flow’ (fluxo do jogo) e clique em ‘Restart Game’ (reiniciar o
jogo), posicionando-o conforme a imagem.
430
Passo 37 - Ligue a bolinha ‘out’ do ‘Switch’ ao ‘go’ do ‘Restart Game’.
Passo 38 - Pronto, o seu jogo chegou ao fim! Vamos testá-lo por completo.
Clique em ‘OK’ e, depois, pressione ‘Play’ para jogar.
431
Atividade Extra
professor
// Professor(a), o desenvolvimento do game chegou ao fim. Explique

para os alunos que é possível que eles continuem o desenvolvimento
dos games que eles fazem durante as aulas. Essa atividade extra os
ensinará a criar um novo nível e a redirecionar o game para a fase
2, que eles poderão continuar construindo. Essa fase 2 não será
realizada em sala.\\ desenvolvedor de games júnior | módulo 1 | capítulo 6
O seu game já está finalizado! Essa atividade irá ensiná-lo como criar e
vincular seu jogo a uma nova fase, para que depois você possa se desafiar
a continuar desenvolvendo o jogo em casa.
Passo 1 - Como você viu, a porta é o nosso objeto final, que reinicia o
jogo, mas poderia, por exemplo, levar à segunda fase, que você poderá
criar depois, em casa, para desafiar-se e melhorar ainda mais seus games.
Vamos ajudá-lo a criar o layout dessa fase agora. Leve o mouse e clique em
432
‘Game Levels’ (níveis do game), na barra inferior. Depois, clique no botão
‘New Level’ para criar um novo nível.
Passo 2 - Surgirá um novo nível, abaixo do nível atual. Clique para renomear o
‘New Level’. Dê o nome de ‘Level 2’, depois, clique no botão ‘Load’ (carregar)
na frente deste nível. Ao abrir o ‘Level 2’, uma tela branca aparecerá
juntamente com o personagem principal, que transita entre os níveis.
433
Passo 3 - O objetivo não será criar essa fase agora, mas vamos adicionar
apenas um chão para o nosso personagem poder caminhar. Na barra inferior,
clique em ‘Library’ (biblioteca). Na janela que surgir, clique em ‘Grass’. Na
próxima janela, clique no botão ‘Add to Level’ (adicionar à fase).
434
Passo 4 - Leve o mouse abaixo do personagem principal, clique e
arraste até preencher toda a parte inferior da tela com chão de grama.
Ao final, clique em ‘Done Cloning’ para finalizar a clonagem (ou seja, o
preenchimento do chão).
435
Passo 5 - O layout do nível 2 está pronto. Voltaremos até o nível 1 para
direcionarmos o final daquela fase para esse novo layout. Leve o mouse
e clique em ‘Game Levels’. Na janela que surgiu, clique no botão ‘Load’ do desenvolvedor de games júnior | módulo 1 | capítulo 6
‘Level 1’, para carregar o nível 1.
436
Passo 6 - Programaremos a ação final, que é passar de nível, ao invés de

reiniciar a mesma fase. Clique na porta, depois, em ‘Edit’.
437
Passo 7 - Selecione o comportamento (‘Behaviors’), para podermos editar
o final do jogo.
Passo 8 - Atualmente, após terminar a fase, o jogo reinicia. Para que você
possa fazer com que o novo layout seja carregado, comece apagando esse
bloco de recomeço do jogo (‘RestartGame’). Clique sobre ele e pressione
‘Delete’ para deletar.
438
Passo 9 - Dentro de ‘Game Flow’ (fluxo do game), clique e escolha ‘Load

Level’ (carregar nível). Depois, basta interligar a bolinha ‘out’ do bloco
‘Switch’ até a bolinha ‘go’ do bloco ‘Load Level’. Ao final, clique em ‘OK’.
439
440
Passo 10 - Na janela de edição da porta, clique em ‘OK’ novamente. O próximo
passo será testar o game por completo. Na barra inferior, clique em ‘Play’.
441
442
Passo 11 - Perfeito, concluímos a transição para o segundo layout do game.
Desafie-se construindo uma nova fase nesse novo layout. Caso deseje
enviar o game para algum amigo ou familiar, compartilhe a URL do site.
443
backup
Aprox. 2 Minutos
professor

completa da aula executada. Relembre com os alunos os objetivos
estipulados no início do encontro. O momento de revisão ajuda a
reforçar os principais aprendizados da aula. Utilize algumas situações
que aconteceram na aula para exemplificar e reforçar os conceitos
Nesta aula, você finalizou o game. No início do encontro, aprendemos so-

bre os protocolos de rede e quais eram os responsáveis pelo envio e rece-
bimento de mensagens. Também realizamos uma atividade offline em que
fizemos a dinâmica do telefone sem fio. Na sequência, terminamos as pro-
gramações do game. Aproveite este momento para tirar qualquer dúvida
que tenha com o(a) professor(a).
445
level complete
Aprox. 3 Minutos
professor
// A aula chegou ao fim! Incentive os alunos a aprimorarem,

em casa, o game desenvolvido. Lembre-os que todos os jogos
desenvolvidos na plataforma Flowlab ficam públicos; basta entrar
em qualquer computador, acessar a conta criada e melhorar
ainda mais o game.\\
As aventuras de Py chegaram ao fim! Na plataforma Flowlab criamos um

game em que o personagem Py precisa cumprir duas tarefas para poder
passar de fase. A primeira era puxar uma alavanca para que a pedra que
estava obstruindo o caminho fosse destruída. A segunda, era coletar uma
bússola para abrir a porta e seguir para a próxima fase.
pitch com o anjo
Com o jogo finalizado, apresente o mesmo para os seus pais, responsáveis

e amigos. Aproveite para coletar feedbacks para melhorar e incrementar o
jogo! Você poderá criar uma nova fase, com mais obstáculos e objetos a
serem superados. Bons estudos!
447
capítulo 7
desenvolvedor
de games júnior
daily
Aprox. 5 Minutos
professor
// Olá, professor(a)! Na aula de hoje começaremos a desenvolver

um novo projeto na ferramenta Flowlab. Esse jogo tem início com
a escolha do personagem do game. Neste momento, relembre
os estudantes sobre o que já foi desenvolvido até aqui e, para
introduzir o assunto do encontro, peça para aqueles que quiserem,
que compartilhem a atividade proposta no ‘Level Complete’ da aula
anterior. Tente não levar muito tempo durante este momento, para
que seja possível que eles façam a atividade do ‘Build and run’ de
maneira completa. Depois, apresente os objetivos desta aula. \\
Olá, aluno(a)! Nas aulas anteriores, você desenvolveu um game utilizando

interruptores, bússolas e portas usando a ferramenta Flowlab. Naquele
game, o personagem ‘Py’ precisava acionar uma alavanca, pegar a bússola
para destrancar a porta e avançar de nível. No início do desenvolvimento,
definimos a imagem de background (cenário de fundo). Depois, criamos as
plataformas sólidas do game, inserimos o personagem ‘Py’ e realizamos a desenvolvedor de games júnior | módulo 1 | capítulo 7
programação dos movimentos dele, bem como a criação dos desafios do

jogo. O primeiro desafio do jogador era acionar uma alavanca e destruir um
bloco de tijolo, liberando a passagem para a segunda parte da mesma fase.
Na sequência, o jogador precisava coletar um item representado por uma
bússola. Ao coletá-la, a porta destravava e o nosso personagem poderia
passar de fase.
450
Na aula de hoje, aprenderemos a utilizar o princípio da escolha. Uma vez
acessada a tela principal do game, o jogador poderá escolher um entre três
personagens disponíveis e jogáveis. Esse é o mesmo princípio que está por
trás dos games de combate, em que podemos escolher um entre dezenas
de personagens disponíveis.
• Começar o desenvolvimento de um novo game na plataforma FlowLab;

• Configurar o background (fundo) utilizado na tela principal;
• Inserir a logo;
• Criar o level (fase) para a escolha dos personagens;
• Inserir os três personagens jogáveis;
• Criar HUD (elemento gráfico exibido na tela para mostrar informações
ao jogador) com informações para a escolha;
• Programar a tela inicial;
• Estudar abstração e os princípios de programação orientada a objetos.
451
back-end
Aprox. 5 Minutos
professor
// Professor(a), nesta aula, os alunos começarão a desenvolver um
game que envolve escolhas dos personagens, um processo que
demanda atenção por parte da lógica envolvida. Utilize o material
do aluno para explicar sobre a programação dos níveis que serão
utilizados no game. \\
Antes de começarmos a desenvolver nosso novo projeto, abordaremos

sobre um dos princípios mais importantes na programação dos
computadores, de sistemas de software e até da criação de jogos
profissionais: a ‘Programação Orientada a Objetos’. Esse é um modelo
baseado na composição e interação dos objetos, ou seja, quase tudo
dentro do princípio é transformado em um objeto. Atualmente, existem
várias linguagens de programação baseadas nesse princípio, como
Java, C#, Python e C++.

Podemos citar como exemplo o game Monument Valley, desenvolvido na
ferramenta Unity e que utiliza o princípio da programação orientação a
objetos. Monument Valley é um jogo em que o jogador conduz a princesa
Ida pelos labirintos de ilusões de ótica e objetos impossíveis, enquanto
manipula o mundo ao redor para chegar às várias plataformas.
453
Fazendo uma analogia desse princípio de programação, a personagem
principal do game, a ponte, os botões e as alavancas são objetos virtuais.
Qualquer objeto do mundo real pode se transformar em objeto virtual se
aplicarmos a ideia da abstração. A abstração é um dos conceitos mais
importantes da programação orientada a objetos, que concentra os
aspectos essenciais e ignora características menos importantes.
Imagine o seguinte exemplo: você deseja construir um game de simulação a

bordo de imponentes embarcações, durante a época das grandes navegações.
https://unsplash.com/photos/1bVorj9iV30
454
A primeira coisa que precisamos fazer é um estudo das embarcações do
mundo real que serão usadas no jogo e, para transformar um navio do
mundo real em um navio virtual, usaremos o conceito de abstração. Para
abstrair um objeto do mundo real, precisamos observar as características
e ações mais importantes do objeto, por exemplo:
• Um navio possui como características o tamanho, peso, cor e quantidade

de tripulação, e a sua função é transportar objetos/pessoas.
• Uma caneta possui como características o tamanho e a cor, e a função

dela é escrever.
• Um smartphone possui como características o peso e tamanho da tela,

e a sua função é acessar aplicativos e navegar pela Internet.
• Uma tesoura possui como característica o tamanho da lâmina, e a sua

função é cortar.
bugou desenvolvedor de games júnior | módulo 1 | capítulo 7
Desde que a tecnologia da geolocalização foi implantada, milhares de pes-

soas são beneficiadas no mundo todo, pois, qualquer dispositivo conecta-
do à internet pode ser facilmente localizado, com informações do país, es-
tado, cidade, rua e até o fuso horário em que esse dispositivo se encontra.
455
O Foursquare é um exemplo de
aplicativo de busca que utiliza dados
do próprio usuário para mostrar novos
lugares/estabelecimentos ao redor
de possíveis pontos de interesse.
Baseando-se em gostos, avaliações
passadas, escolhas feitas por amigos
e especialistas de confiança, ele faz
indicações dos mais diversos locais,
como lojas e restaurantes.
456
front-end
Aprox. 76 Minutos
professor
// Professor(a), dê início ao passo a passo da construção do game
com os alunos, mas antes realize a atividade desplugada sobre
abstração. Será necessário que você conduza a aula de forma muito
cuidadosa, para que todos os passos sejam realizados com sucesso
e os conceitos sejam fixados. \\
Agora que você já entendeu os conceitos importantes da programação

orientada a objetos e da abstração, chegou a hora de colocar a mão na
massa. Começaremos o desenvolvimento de um game de escolhas. Siga o
offline

Aluno(a), você seria capaz de fazer a abstração para os seguintes itens do
mundo real? Lembre-se que para fazer a abstração temos que pensar nas
características e ações mais importantes dos objetos do mundo real.
Entidade Características Ações

Carro
Elevador
Bússola
Mapa
458
professor
// Professor(a), instigue os alunos a pensarem e realizarem essa
atividade de abstração. Segue uma possível resposta para a
questão elaborada:
Entidade Características Ações

Tamanho, peso, Acelerar, parar, ligar, desligar e
Carro
altura deslocar passageiros
Tamanho, peso Subir, descer, escolher o andar e
Elevador
máximo transportar pessoas
Tamanho da Orientar, apontar em direção ao
Bússola
agulha, polos polo positivo da Terra
Representar a localidade em uma
Mapa Localização
área do espaço
\\
build and run desenvolvedor de games júnior | módulo 1 | capítulo 7
Agora que você já entendeu o conceito de abstração, vamos começar a

programar o game! Siga os passos abaixo e bom desenvolvimento!
459
Passo 1 – Inicialmente, acesse o site: flowlab.io. Flowlab é uma
ferramenta de criação de jogos voltada para iniciantes. O Flowlab não
exige - nem permite - que os usuários digitem um script ou códigos. Em
vez disso, os comportamentos dos objetos do jogo são criados com uma
interface de arrastar e soltar, no estilo fluxograma. Os usuários vinculam
as declarações e o mecanismo de jogo interpreta essas estruturas de
maneira linear durante o processo.
Passo 2 – Na parte superior direita do site, clique em ‘Log In’ para entrar
no Flowlab com a conta que já foi criada anteriormente e inserir o email e
password (senha).
460
Passo 3 – Agora você está logado no site, pronto para iniciar o
desenvolvimento do game. Note que, ao lado direito, na parte superior da
tela, aparecem duas informações importantes. A primeira é ‘My Games’
(meus jogos), que é o repositório dos jogos criados. Lembre-se que o
Flowlab permite a criação de três jogos gratuitos que ficarão online na conta
pessoal. Ao lado de ‘My Games’ aparece o nome de usuário, identificando
que você está logado corretamente. Agora, clique em ‘My Games’.
Passo 4 – Dentro da tela ‘My Games’, clique no botão ‘New Game’ para
iniciar a criação de um novo jogo.
Passo 5 – Ao clicar em ‘New Game’, a tela de desenvolvimento começará

a ser carregada. Espere alguns segundos até terminar o carregamento de
todos os módulos da ferramenta. Em seguida, clique em ‘Empty Project’
para iniciar um projeto em branco e, depois, clique em ‘OK’.
461
Passo 6 – É possível que surja uma janela, mencionando as últimas
atualizações da ferramenta ‘Flowlab’. Caso apareça essa janela, clique no
botão ‘OK’.
462
Passo 7 – Na sequência, surgirá a tela inicial do projeto vazio. É nela
que o game será desenvolvido. A área cinza em volta pode ser usada
para expandirmos nosso game. Para isso, clique no botão ‘Settings’
(configurações), no canto inferior da tela.
Passo 8 – No balão que surgiu na barra inferior, faremos algumas

configurações. Clique no campo ‘Name’, digite o nome ‘Game of Choice’
(jogo da escolha), altere o campo ‘Width’ (largura) para ‘32’, mude o campo
‘Height’ (altura) para ‘17’ e clique em ‘OK’.
463
Passo 9 – Note que a área de desenvolvimento do game aumentou e ocupa
boa parte da tela. Criaremos a tela inicial do game. Leve o mouse no centro
da página, clique uma vez com o botão esquerdo e escolha ‘Create’ (criar).
464
Passo 10 – Na tela que surgir, clique no campo ‘Type’ (tipo) e escreva
‘background’, pois iremos adicionar o fundo do jogo. Depois, clique no
botão ‘edit sprite’ (editar sprite).
465
Passo 11 – Ao clicar no botão, surgirá a tela de edição de sprites. Nós
precisamos carregar a tela de fundo do game. Do lado esquerdo, clique
em ‘Upload’ (carregar do computador), então, clique em ‘Browse for Sprite’
(Procurar por sprite) Choose File’ para escolher um arquivo de imagem.
466
Passo 12 – Procure a pasta ‘GameOfChoice’, depois, a pasta ‘sprites’, localize
e selecione o arquivo ‘background’. Clique em ‘Open’ (abrir), na próxima
tela clique no canto inferior direito da imagem para ajustar a proporção da
imagem, depois clique em ‘OK’.
467
Passo 13 – Após carregar a imagem de fundo, no canto inferior esquerdo,
clique no botão ‘OK’. Na próxima tela, clique em ‘OK’. Será preciso arrastar a
imagem de fundo para enquadrá-la no espaço definido. É necessário cobrir
todo o espaço em branco.
468
Passo 14 – Adicionaremos o título do game. Leve o mouse ao canto

esquerdo da tela, fora da imagem que acabamos de adicionar, clique com
o botão esquerdo e escolha ‘Create’. Na janela que surgir, clique no campo
‘Type’, digite ‘title’ (título) e clique em ‘edit sprite’.
469
470
Passo 15 – Na janela que surgir, clique em ‘Upload’, pois queremos carregar
a imagem referente ao título. Depois, clique em ‘Browse for Sprite’ para
escolher o arquivo que está na pasta ‘sprite’, dentro de ‘GameOfChoice’.
Então, clique no arquivo ‘title’ e em ‘OK’.
471
Passo 16 – Depois de carregar a imagem do título do game, clique no botão ‘OK’.
Passo 17 – Antes de clicarmos no próximo ‘OK’, precisaremos organizar a

ordem dos elementos na tela. Para isso, clique no campo ‘Display Order’,
aperte o ‘+’ até aparecer o dígito ‘2’ e clique em ‘OK’. Isso porque queremos
que a imagem de título fique na frente da que representa o fundo do cenário.
472
Passo 18 – Então, basta clicar com o botão esquerdo no meio do título e
arrastá-lo para o centro da tela.
473
Passo 19 – Nossa tela inicial já está criada! Criaremos a segunda tela do
game, com a escolha dos personagens. Para iniciar, clique em ‘Game Levels’
(níveis do jogo).
Passo 20 – Na janela que surgir, será exibido o ‘Level 1’. Essa é a tela que
acabamos de criar, representando a abertura do game. Clique uma vez
sobre ‘Level 1’ e renomeie essa tela para ‘begin’ (começar).
474
Passo 21 – Criaremos a segunda tela do game, isto é, a de escolha dos

personagens. Para isso, clique em ‘New Level’ (novo nível). Assim que a
nova tela for criada, clique sobre ela e renomeie-a como ‘Choice Screen’
(tela de escolha).
475
476
Passo 22 – Agora que a nova tela foi criada, precisamos carregar o layout.
Então, na mesma janela, clique no botão ‘Load’ (carregar) respectivo à tela
‘Choice Screen’.
477
Passo 23 – Note que uma mensagem será exibida no layout: ‘Now Editing
Game Layer’ (agora editando a camada do jogo). Quando clicamos no botão
‘Load’, a tela será carregada para começarmos a trabalhar com ela. Como
acabamos de cria-la, ela estará vazia (em branco).
Passo 24 – A tela de escolha dos personagens utilizará a imagem de fundo

que usamos no primeiro layout. Então, para carregarmos esse fundo, leve
o mouse no centro da tela, clique com o botão esquerdo e escolha ‘Create’.
478
Passo 25 – Clique no campo ‘Type’, digite ‘background2’, então clique no
botão ‘edit sprite’ para fazer a edição.
Passo 26 – Na próxima tela, clique no botão ‘Browse’ (navegar).
479
Passo 27 – Note que, do lado direito, aparecerá a miniatura do background
que adicionamos na tela anterior. Leve o mouse em cima da miniatura, clique
uma vez com o botão esquerdo e a imagem será carregada na tela toda.
Passo 28 – Uma vez que a imagem for carregada na tela do game, na parte
inferior esquerda, basta clicar no botão ‘OK’.
480
Passo 29 – Ao final, clique no botão ‘OK’, arraste a imagem e enquadre-a
no espaço branco do layout.
Passo 30 – Inseriremos os “personagens”. O jogador poderá escolher um

entre os três “personagens” jogáveis do game, que são pequenos barcos de
pesca, com cores distintas.
481
Para adicionar o primeiro personagem, leve o mouse do lado esquerdo da tela,
fora da imagem, clique com o botão esquerdo e em ‘Create’. Na janela que
surgiu, clique no campo ‘Type’, digite ‘ship1’ e, então, clique em ‘edit sprite’.
482
Passo 31 – Carregaremos a imagem do primeiro barco. Então, clique em
‘Upload’ e em ‘Browse for Sprite’, depois, no arquivo ‘blue’, em ‘Open/Abrir’
e, ao final, em ‘OK’.
483
Passo 32 – Com a imagem do barco azul carregada, clique em ‘OK’.
Passo 33 – Ajustaremos a posição do barco na cena. No campo ‘Display

Order’, clique no botão ‘+’ até aparecer o dígito ‘2’ e clique em ‘OK’, para que
ele fique na frente da imagem do cenário.
484
Passo 34 – Leve o mouse no centro do barco azul, clique com o botão esquerdo
e arraste-o para o centro da cena na vertical, no lado esquerdo da tela.
485
Passo 35 – Inseriremos o segundo personagem na tela de seleção. Para
isso, leve o mouse ao lado esquerdo da tela, fora da imagem e clique com o
botão esquerdo, depois, em ‘Create’. Na janela que surgiu, clique no campo
‘Type’, digite ‘ship2’ e clique em ‘edit sprite’.
486
Passo 36 – Carregaremos a imagem do segundo barco. Para isso, clique
em ‘Upload’ e em ‘Browse for Sprite’, depois, no arquivo ‘red’, clique para
abrir e, ao final, em ‘OK’.
487
Passo 37 – Com a imagem do barco vermelho carregada, clique em ‘OK’.
488
Passo 38 – Ajustaremos a posição do barco no layout, no campo ‘Display
Order’. Clique no botão ‘+’ até aparecer o dígito ‘2’, depois, clique em ‘OK’.
489
Passo 39 – Agora, leve o mouse no centro do barco vermelho, clique com
o botão esquerdo e arraste-o para o centro do layout.
Passo 40 – Adicionaremos o terceiro personagem na tela de seleção. Para

isso, leve o mouse ao lado esquerdo da tela, fora da imagem, clique com o
botão esquerdo e em ‘Create’. Na janela que surgiu, clique no campo ‘Type’,
digite ‘ship3’ e clique em ‘edit sprite’.
490
491
Passo 41 – Carregaremos a imagem do terceiro barco. Para isso, clique em
‘Upload’ e em ‘Browse for Sprite’. Procure pela pasta ‘GameOfChoice’, abra a
pasta ‘sprites’, clique no arquivo ‘yellow’ e para abrir. Ao final, clique em ‘OK’.
492
Passo 42 – Com a imagem do barco amarelo carregada, clique em ‘OK’.
Passo 43 – Ajustaremos a posição do barco na cena. No campo ‘Display

Order’, clique no botão ‘+’ até aparecer o dígito ‘2’, depois, clique em ‘OK’.
493
Passo 44 – Leve o mouse no centro do barco amarelo, clique com o botão
esquerdo e arraste-o para o lado direito da cena.
494
Passo 45 – Criaremos as informações de HUD, que é a sigla para Heads-
Up Display. De maneira bem simples e direta, o HUD é qualquer elemento
gráfico exibido na tela para transmitir informações ao jogador.
Essas informações que criaremos instruirão o jogador a escolher um dos
três personagens jogáveis que temos no game. Para começar, leve o mouse
na barra inferior e escolha ‘Layer’ (camada).
495
Passo 46 – Na janela que surgir, clique em ‘User Interface’ (interface do
usuário). É nessa tela que precisam ficar todas as informações de HUD.
Note que ao clicar, surgirá a informação: ‘Now editing user interface layer’
(agora editando a camada de interface do usuário).
Passo 47 – Leve o mouse ao centro da tela, clique com o botão esquerdo

e escolha ‘Create’. Na sequência, clique no campo ‘Type’, digite ‘hud_info’ e,
depois, clique no botão ‘behaviors’ (comportamentos).
496
497
Passo 48 – Note que uma tela diferente surgirá, com os comportamentos.
É nela que poderemos realizar as programações do game e de todos os
objetos inseridos. Para conhecer esta tela, leve o mouse na barra localizada
no lado esquerdo, clique em alguns itens e verifique as opções disponíveis
na programação do game.
professor
// Professor(a), neste momento, apresente e comente superficial-

mente para os alunos a barra localizada à esquerda, com as prin-
cipais opções de programação, sendo elas: ‘Triggers’ (gatilhos),
‘Logic & Math’ (lógica e matemática), ‘Components’ (componentes)
etc. Você pode clicar em algumas das opções e mostrar os recur-
sos disponíveis. \\
498
Passo 49 – Do lado esquerdo, clique uma vez com o botão esquerdo
em GUI. A sigla GUI refere-se à denominação ‘Graphical User Interface’
(Interface Gráfica do Usuário). Na sequência, algumas opções surgirão;
escolha ‘Label’ (rótulo).
499
Passo 50 – Note que um bloco de texto surgiu no meio da tela. Ele representa
o rótulo que estamos inserindo. Para definirmos o texto do rótulo, basta
clicar uma vez com o botão esquerdo do mouse em cima do bloco.
500
Passo 51 – Perceba que um painel surgiu ao lado direito do bloco. Clique no

campo ‘Label’ e digite ‘Choose Your Player’ (escolha o seu personagem).
Note que o texto digitado aparecerá ao fundo da tela. Na sequência, clique
no retângulo que representa a cor e escolha uma de sua preferência, depois,
clique no campo ‘size’ e ajuste o tamanho das letras para ‘21.0’. Ao final,
clique em ‘OK’ na parte inferior da janela.
501
Passo 52 – A primeira informação de HUD já está feita. Inseriremos mais

três informações, os números de 1 a 3, que serão colocados abaixo de
cada barco. Se o jogador clicar em algum dos barcos, ele será escolhido.
Essa escolha também acontecerá se ele digitar os números, de 1 a 3. Ainda
na tela, do lado esquerdo, clique três vezes em ‘Label’.
502
Passo 53 – Ao clicarmos três vezes em ‘Label’, 3 novos blocos de ‘Label’
foram inseridos. Acontece que um estará sobre o outro e precisamos
organizar essa visualização. Leve o mouse em cima do bloco que ficou no
topo e arraste-o para o lado esquerdo. Faça o mesmo até organizar todos
os blocos, de modo semelhante ao mostrado nas imagens abaixo.
503
504
Passo 54 – O primeiro ‘Label’ posicionado acima representará o número 1.
Então, clique sobre ele uma vez com o botão esquerdo. No campo ‘Label’,
digite ‘1’. Na cor, clique e escolha uma de sua preferência (vamos repetir a
mesma escolhida anteriormente). No campo ‘size’, de tamanho de fonte,
altere-o para ‘20’. Depois, clique em ‘OK’.
505
Passo 55 – Repita o mesmo processo, agora com o bloco ‘Label’ localizado

no centro esquerdo. Clique sobre ele uma vez com o botão esquerdo. No
campo ‘Label’, digite ‘2’. Na cor, clique e escolha uma de sua preferência
(vamos repetir a mesma escolhida anteriormente). No campo ‘size’, altere-o
para ‘20’. Depois, clique em ‘OK’.
506
507
Passo 56 – Agora, selecione o terceiro bloco adicionado, localizado
abaixo. Clique sobre ele uma vez com o botão esquerdo. No campo ‘Label’,
digite ‘3’. Na cor, clique e escolha uma de sua preferência (vamos repetir
a mesma escolhida anteriormente). No campo ‘size’, altere-o para ‘20’.
Depois, clique em ‘OK’.
508
Passo 57 – Terminamos de colocar todos os elementos de HUD. Agora,
precisamos ajustar o posicionamento de cada elemento. Para isso, clique desenvolvedor de games júnior | módulo 1 | capítulo 7
no botão ‘OK’ da tela de comportamento em que estamos. Na última tela,

também clique em ‘OK’.
509
510
Passo 58 – Perceba que as informações de HUD foram inseridas, mas elas
estão sobrepostas do canto superior esquerdo e, ao centro, ficou o bloco
‘hud_info’ que criamos para adicionar as informações de HUD.
Primeiramente, mova o bloco ‘hud_info’ para fora da tela do game. Como

esse bloco só tem a função de criar as informações de HUD, não será
necessário exibi-lo no meio do game. Portanto, clique nele e arraste-o para
fora da área do jogo.
511
Passo 59 – Perfeito, agora ajustaremos as informações de HUD. Clique em
cima dos números que criamos e arraste-os para as respectivas posições.
512
Passo 60 – Por fim, clique no texto ‘Choose Your Player’ e arraste-o para o
centro, na parte superior da tela.
Passo 61 – Até o momento, temos dois layouts finalizados no game. Dê um

clique com o botão esquerdo do mouse em ‘Game levels’, na parte inferior
da tela, para abrir a janela que apresenta os dois layouts já criados, isto é,
a tela de abertura do game que definimos como ‘begin’ e a tela de escolha
de personagem ‘Choice Screen’, que acabamos de criar inserindo os três
barcos. Para criarmos a programação inicial do game, precisamos abrir a
tela de ‘begin’, então, leve o mouse no botão ‘Load’ da tela de ‘begin’.
513
Passo 62 – A tela de abertura será carregada. Leve o mouse em qualquer

lugar fora da imagem, clique com o botão esquerdo uma vez e escolha
a opção ‘Create’.
514
Passo 63 – Na janela que surgir, clique no campo ‘Type’, digite ‘Start’

(iniciar) e, depois, clique em ‘Behaviors’. Na tela de programação que surgiu,
procure pela opção ‘Triggers’ e, depois, clique em ‘MouseClick’, pois iremos
programar o clique do mouse.
515
516
Passo 64 – Note que o bloco ‘MouseClick’ (clique do mouse) foi
adicionado. Ainda no painel da esquerda, clique em ‘Keyboard’, pois
iremos programar o teclado também.
517
Passo 65 – Ainda na barra da esquerda, procure e clique em ‘Game Flow’ (fluxo
do jogo). Nas opções que surgiram, clique em ‘Load Level’ (carregar nível).
518
Passo 66 – Reorganize os blocos como indicado abaixo: ‘MouseClick’,
‘Keyboard’ e ‘LoadLevel’. Esses blocos não têm nenhuma relação uns com
os outros e, por enquanto, não possuem interligação, desse modo, não
funcionarão ainda.
Passo 67 – A ideia é que, quando o jogador iniciar o game, na tela ‘begin’, ele
possa dar um clique ou apertar a tecla ‘espaço’ no teclado e, caso qualquer
uma dessas opções aconteça, o jogador seja levado para a tela de escolha desenvolvedor de games júnior | módulo 1 | capítulo 7
do personagem (os barcos). Para criar essa programação, note que no
bloco ‘MouseClick’ existem algumas bolinhas da cor branca que podemos
interligar com outros objetos. Dê um clique e permaneça pressionando na
opção ‘down’ (para baixo). Na sequência, arraste o mouse até a opção ‘go’
do bloco ‘LoadLevel’.
519
Passo 68 – Clique uma vez no bloco ‘MouseClick’ e, na janela que surgiu,

ative a opção ‘capture clicks anywhere’. Isso fará com que qualquer tipo de
clique no botão esquerdo do mouse seja capturado. Depois, clique em ‘OK’.
520
Passo 69 – Perceba que uma linha foi criada interligando os dois
blocos. Isso significa que, ao clicar com o botão esquerdo do mouse, a
ferramenta Flowlab nos levará para o próximo level, ou seja, na tela de
escolha dos personagens.
521
Passo 70 – Configuraremos, agora, o teclado. Clique uma vez com o botão
esquerdo no bloco ‘Keyboard’ e, na janela que surgiu, clique no botão ‘Change
Key’ (mudar chave). Na sequência, aperte a tecla ‘espaço’ no teclado e,
depois, clique em ‘OK’.
522
Passo 71 – Leve o mouse na opção ‘down’ do ‘Keyboard’, clique, mantenha
pressionado e arraste o mouse até a opção ‘get’ do bloco ‘LoadLevel’. Ou
seja, caso o jogador clique ou se ele apertar a tecla espaço, será levado
para a tela de escolha dos personagens.
professor
// Professor(a), é importante deixar claro para os alunos que o fluxo

da programação do Flowlab funciona interligando essas linhas,
que são as ações que precisamos. Caso um bloco não esteja
interligado ou ligado de forma errada, a programação poderá não
funcionar corretamente.\\
523
Passo 72 – Terminada a programação, clique no botão ‘OK’. Por fim, clique
em ‘OK’ novamente.
Passo 73 – Realizaremos um teste no game. Precisamos testar essas

duas condições que acabamos de programar: o clique do mouse e a tecla
‘espaço’ do teclado. Leve o mouse na parte inferior e clique em ‘Play’. Aqui,
jogamos o jogo ou realizamos os testes necessários.
524
Passo 74 – Note que a tela do game mudará: na parte inferior, é possível
notar o nome do jogo, bem como o usuário que está logado. Também é
possível perceber quantos ‘Plays’ o jogo já teve (quantas vezes já foi jogado).
Agora, dê um clique no meio da tela e observe que você será levado para a
tela da escolha dos barcos.
525
Passo 75 – O clique do mouse foi testado com sucesso! Precisamos testar
também a tecla ‘espaço’ do teclado. Na parte inferior da tela de teste, clique
no botão ‘Edit Game’ (editar jogo).
Passo 76 – Seremos levados para a tela de edição do game. Na parte

inferior, leve o mouse em ‘Game Levels’. Na janela que surgir, clique no
botão ‘Load’ da tela ‘begin’.
526
Passo 77 – Agora que estamos na tela ‘begin’, podemos clicar no botão
‘Play’ novamente. A ideia é testar a tecla ‘espaço’ no teclado.
527
Passo 78 – Assim que entrarmos na tela de teste do game, basta apertar a
tecla ‘espaço’ (barra de espaço) do teclado. Perceba que também seremos
levados para a tela de escolha dos personagens.
528
backup
Aprox. 2 Minutos
professor

completa da aula executada. Relembre com os alunos o planejamento
estipulado no início do encontro. Este momento de revisão ajudará
a reforçar os principais aprendizados que obtivemos durante a aula.
Utilize algumas situações que aconteceram para exemplificar e
reforçar os conceitos mais importantes. \\
Nesta aula, começamos o desenvolvimento de um novo game baseado

em escolhas usando a plataforma Flowlab. Iniciamos configurando o
background (fundo de tela) utilizado na tela principal, depois, inserimos a
logo do game e criamos o a tela da escolha do personagem principal, entre
os três barcos jogáveis do jogo. No final, criamos o HUD para ajudar com
a numeração e informações para a escolha dos personagens, bem como
fizemos a programação da tela inicial.
530
level complete
Aprox. 2 Minutos
professor
// Conclua a aula direcionando os alunos para a atividade extra a ser

executada em casa e apresentada na próxima aula.\\
A aula chegou ao fim! Começamos a criar um game baseado em escolhas

e, na próxima aula, continuaremos o projeto. Nosso intuito é criar um jogo
em que o jogador possa escolher um entre três personagens jogáveis.
Durante a semana, pesquise na internet games em que podemos escolher
entre vários personagens jogáveis para compartilhar com os amigos no
próximo encontro.
532
capítulo 8
desenvolvedor
de games júnior
daily
Aprox. 5 Minutos
professor
// Olá, Professor(a)! Na aula de hoje, novos conceitos de orientação

a objetos serão apresentados aos alunos. Na sequência, eles
conhecerão os conceitos de classes, atributos e métodos. Boa aula!
\\
Olá, aluno(a)! Na aula anterior, começamos o desenvolvimento de um

novo game baseado em escolhas, usando a plataforma Flowlab. Iniciamos
configurando o background (fundo) utilizado na tela principal, depois,
inserimos a logo do game e criamos o level (fase) destinado à escolha
do personagem principal. Ao final, criamos o HUD (Monitor de Alertas,
do inglês Heads-Up Display) para ajudar com a numeração e informações
para a escolha dos personagens, bem como fizemos a programação da
tela inicial. Na aula de hoje, continuaremos o desenvolvimento do game e
aprenderemos sobre o paradigma orientado a objetos.
Objetivos da aula:
• Iniciar a construção do Level (fase) 1;
• Inserir o background (fundo de tela);
• Criar limites e bloqueios;
• Programar os eventos do objeto responsável por entender a escolha
do jogador;
• Programar os movimentos dos barcos.
• Continuar aprendendo sobre o paradigma orientado a objetos.
• Entender o conceito de classes, atributos e métodos.
535
back-end
Aprox. 10 Minutos
professor
// Professor(a), nesta aula os alunos continuarão a desenvolver o
game que envolve a escolha dos barcos. Esse processo demanda
atenção por parte da lógica que está envolvida. Utilize o material
do aluno para explicar sobre os novos conceitos da orientação
a objetos e, sempre que achar cabível, faça referências durante o
desenvolvimento da aula. \\
Na aula anterior, você teve como missão pesquisar na internet games

em que podemos escolher vários personagens para jogar, então, neste
momento, compartilhe os seus achados com os colegas de turma!
O Mario Kart é um jogo no qual o jogador pode escolher um personagem

dentre vários disponíveis, por exemplo.
https://bit.ly/3Duk98a
537
Antes de começarmos a desenvolver o projeto de hoje, vamos dar
continuidade e aprender novos conceitos do paradigma orientado a objetos.
Em orientação a objetos, uma classe é uma descrição de um conjunto de

objetos com características similares. Criamos classes quando estamos
programando sistemas de software que utilizam este paradigma, pois elas
agrupam informações que serão úteis em nossos projetos, por exemplo:
Uma lanchonete vai criar um sistema de computador para cadastrar

os clientes e controlar as vendas, então, o sistema precisará cadastrar
o nome, idade e endereço do cliente.
No caso, poderíamos realizar a abstração que aprendemos na aula anterior e

criar uma classe chamada ‘Cliente’, para agrupar todos os dados e
características dos clientes. A classe é representada por uma pequena tabela:
Cliente
nome;
idade;
endereço.
https://bit.ly/3y46ZgX
Quando estamos programando um jogo no paradigma, podemos criar uma

classe para representar os personagens e as suas características, por
exemplo:
No jogo, o personagem será um guerreiro, a velocidade será 10x e ele

não possuirá escudo.
538
Abstraindo e representando a classe ‘Personagem’, com as características,
ficaríamos com algo assim:
Personagem
Tipo: guerreiro;
Velocidade: 10x;
Possui escudo: não;
https://bit.ly/3GRIxT9
Uma classe, além de definir as características dos objetos, também pode

incluir as ações. As ações são conhecidas como métodos.
Em nosso jogo, o personagem pode trocar a skin (roupa) e habilitar
novos poderes.
A representação da classe ‘Personagem’ e as ações (métodos) ficaria assim:
Personagem
Tipo: guerreiro;
Velocidade: 10x;
Possui estudo: não.
Trocar skin; desenvolvedor de games júnior | módulo 1 | capítulo 8
Habilitar novos poderes.
https://bit.ly/3y1BQL7
539
Dessa maneira, fica mais claro como funciona o processo de abstração para
criar classes, adicionando os atributos (características) e os métodos (ações)!
Na aula de hoje, durante os passos da atividade do ‘Build and run’, você

verá que a ferramenta Flowlab utilizará o conceito de classes, atributos
e métodos sempre que criamos um novo objeto, mas isso acontecerá de
forma implícita, ou seja, o programador não precisa se preocupar com a
abstração dos dados. Os objetos criados na aula de hoje serão:
• Background (fundo de tela) do Level/Nível 1;

• Blocos que vão limitar o personagem na tela;
• Personagens inseridos no Level 1;
• Objeto ‘PlayerControler’ (controle do jogador).
Você sabia?
A programação é uma das áreas mais
conceituadas da tecnologia moderna e
o primeiro algoritmo foi criado por Ada
Lovelace, em 1833, na qualidade de auxiliar
de Charles Babbage, no decorrer da
construção da máquina analítica. Na época
ninguém proporcionou a devida seriedade
para o que ela havia produzido. Somente com o aparecimento de Alan
Turing é que o mundo reconheceu a importância de Ada Lovelace para
a tecnologia contemporânea.
540
front-end
Aprox. 71 Minutos
offline
professor
// Professor(a), execute essa atividade com os alunos, instruindo-os
para que pensem em dados que os objetos têm em comum. \\
Nesta atividade você deverá abstrair as características dos três objetos

apresentados abaixo com o objetivo de criar uma classe para cada objeto,
contendo os atributos e métodos. Para isso, você poderá utilizar o site
https://jspaint.app/ para desenhar o modelo da classe, em formato tabela.
https://bit.ly/3Fdc7lW desenvolvedor de games júnior | módulo 1 | capítulo 8
https://bit.ly/35wL341
https://bit.ly/3mezXWO
542
professor
// Professor(a), é importante que os alunos tentem realizar as
abstrações, mas, ao final da atividade, reserve um momento para
apontar os acertos e erros. Abaixo, segue um modelo para cada objeto,
lembrando que não existe um único modelo correto. A abstração
precisa ser genérica e agrupar as principais características e ações
de cada objeto.
Carro
Modelo;
Ano de Fabricação;
Cor.
Liga/Desliga;
Acelera;
Freia.
Foguete
Tamanho;
Peso;
Capacidade.
Acionar propulsão;
Liberar tanques de combustível. desenvolvedor de games júnior | módulo 1 | capítulo 8
Smartwatch
Sistema operacional;
Marca.
Previsão do Tempo;
Consultar Agenda;
Acessar Internet.
\\
543
build and run
professor
// Professor(a), dê início ao passo a passo com os alunos. Será
necessário que você conduza a aula de forma muito cuidadosa, para
que todos os passos sejam realizados com sucesso. \\
Agora que você já entendeu o conceito de classes, atributos e métodos do

paradigma orientado a objetos, chegou a hora de colocar a mão na massa.
Continuaremos o desenvolvimento de um game de escolhas. Siga o passo
a passo e boa diversão!
Passo 1 – Inicialmente acesse o site flowlab.io e clique no menu ‘Log In’

(conectar-se). Na tela seguinte, digite o e-mail e a senha. Clique em ‘Sign
In’ (iniciar sessão).
544
Passo 2 – Depois de entrar, o nome de usuário aparecerá no menu superior

ao lado direito. Clique em ‘My Games’ (meus jogos), também no canto
superior direito.
545
Todos os jogos desenvolvidos serão listados na próxima tela, então, basta
localizar o nome do game em questão, no caso, ‘Game of Choice’, e clicar
no botão ‘Edit’ (editar).
546
Passo 3 – Na parte inferior da tela de edição, clique na opção ‘Game Levels’
(níveis do jogo). Na janela que surgiu, clique em ‘New Level’ para criar uma
nova tela (novo nível).
547
Passo 4 – Clique no campo ‘New Level’ e renomeie-o para ‘Level 1’ (nível
1). Na sequência, abriremos a nova tela criada. Para isso, clique no botão
‘Load’, na frente do ‘Level 1’.
548
Passo 5 – Perceba que a nova tela será carregada e uma mensagem
aparecerá na parte inferior, avisando: ‘Now Editing Game Layer’ (agora
editando a camada do jogo).
Passo 6 – A primeira coisa que faremos será colocar o background (cenário)

na tela ‘Nível 1’, que representa o local por onde o personagem poderá se
mover.
Na barra inferior, clique em ‘Layer’ (camada) e, na sequência, escolha

‘Background’. Este objeto, assim como os próximos que serão criados,
utilizará o conceito de classes, atributos e métodos vistos na atividade
de ‘Back-End’. Se realizarmos uma abstração, o nome da classe seria
‘Background’, que representa o objeto de fundo de tela. Os atributos poderiam
ser ‘tamanho’ e ‘resolução’ e, em relação aos métodos, poderíamos ter algo
como ‘sem efeitos’, já que a imagem ficará fixa na tela.
549
Passo 7 – Agora leve o mouse ao centro da tela, clique uma vez com o
botão esquerdo e escolha ‘Create’ (criar).
Passo 8 – Na janela que surgiu, clique no campo ‘Type’ (tipo), e renomeie o

tipo de objeto para ‘Background_level1’. Depois, clique no botão ‘edit sprite’
(editar objeto) para carregar a imagem de fundo.
550
Passo 9 – Na tela de edição de sprite, clique no botão ‘Upload’ (carregar)
para carregarmos a imagem. Na janela que surgiu, clique no botão ‘Choose
File’ (Escolher Arquivo). Procure pela pasta ‘GameOfChoice\sprites’, abra
a imagem ‘level1’ e clique em ‘OK’.
551
Passo 10 - Na tela para ajustar o tamanho da imagem, clique no controle
da esquerda, altere a altura para 17 blocos, este tamanho é o tamanho da
altura do game. Depois clique na diagonal direita inferior da imagem, arraste
dentro da proporção da tela e clique em ‘OK’.
552
553
Passo 11 – Terminado o carregamento da imagem, clique no botão ‘OK’.
Passo 12 – Depois, clique em ‘OK’ novamente e arraste a imagem até

enquadrá-la em todo o espaço branco do layout.
554
Passo 13 – Finalizamos a inserção do cenário do ‘Level 1’. Começaremos
a programar a camada em que os personagens que serão escolhidos - um
dos três barcos - poderão se mover. Na barra inferior, clique na opção ‘Layer’
e escolha ‘Game World’ (mundo do jogo).
555
Passo 14 – Note que este cenário possui um píer (à esquerda) e o mar
por onde o barco poderá navegar (à direita). Nosso barco não poderá subir
no píer, muito menos, sair do mar. Então, isolaremos as áreas por onde o
barco não poderá navegar, bloqueando-as por meio da inserção de blocos
sólidos nesses espaços restritos. A primeira coisa que precisamos fazer é
levar o mouse no final do píer. Clique uma vez com o botão esquerdo e, na
sequência, clique em ‘Create’.
556
Passo 15 – No campo ‘Type’, digite ‘block’ (bloco) e clique em ‘edit sprite’.
Na janela de edição de sprite, clique na ferramenta ‘eraser’ (borracha), clique
e limpe todo bloco; ela removerá a cor inserida automaticamente no bloco.
557
Passo 16 – Precisaremos pintar esse bloco de uma cor clara,
semitransparente. Do lado esquerdo, clique no ícone de um balde de tinta
e, na sequência, clique no retângulo para escolher a cor.
558
Passo 17 – Primeiro, clique na cor branca localizada na parte superior
esquerda. Depois, coloque o canal alpha, ao lado direito, em ‘15’. Feito isso,
clique no ‘OK’ e dê um clique no meio da tela. Perceba que uma camada
com um branco quase transparente aparecerá. Ao final, para fechar a tela
de edição de sprite, clique no ‘OK’.
// Professor(a), mencione para os alunos que estamos usando

uma cor semitransparente, para ainda ver a existência do bloco. Na
verdade, poderíamos escolher qualquer cor, o que deixará o bloco
transparente é a opção alpha, que podemos aumentar ou diminuir. \\
559
560
Passo 18 – Perceba que ao voltar para a tela ‘Level 1’, vemos que o bloco
que acabamos de inserir no início do píer é semitransparente. Clique no
‘OK’. Agora, precisaremos clonar esse bloco em outros espaços.
561
Passo 19 – Como o objetivo é usar o bloco semitransparente para isolar as
áreas em que o barco não poderá navegar e bloqueá-las, deveremos clonar
esse bloco clicando com o botão esquerdo sobre ele. Escolha a opção ‘Clone’
(clonar). Na sequência, duplique o bloco fazendo uma barreira próxima ao
píer e abaixo da superfície do mar. Bloqueie também a saída do barco na
lateral direita da tela, como mostrado na indicação em vermelho da terceira
imagem abaixo. Caso não seja realizado o bloqueio, o barco poderá afundar.
562
Passo 20 – O que acabamos de fazer foi criar uma barreira. É quase
imperceptível notar a presença do bloco semitransparente, mas ele tem o desenvolvedor de games júnior | módulo 1 | capítulo 8
propósito de impedir que o barco saia para fora desse espaço, pois todo
bloco inserido tem a característica de ser sólido. Ao final, clique no botão
‘Done Cloning’ (clonagem concluída).
563
Passo 21 – Precisaremos configurar a movimentação do personagem, ou
seja, do barco que for escolhido. Como temos três opções de personagens
a serem escolhidos, precisaremos planejar e configurar a movimentação desenvolvedor de games júnior | módulo 1 | capítulo 8
de todos eles. Para isso, leve o mouse ao centro da tela, clique com o
botão esquerdo uma vez e selecione ‘Create’.
564
Passo 22 – Na janela que surgiu, clique no campo ‘Type’ e digite ‘choose1’
(escolha 1). Esse será nosso barco de cor azul. Na sequência, clique em
‘edit sprite’.
Passo 23 – Como já fizemos o upload dos barcos na tela da escolha dos

personagens, basta selecionar a imagem que já foi carregada. Para isso,
clique no botão ‘Browse’ (procurar) do lado direito.
565
Note que uma miniatura de todas as imagens carregadas até agora
aparecerá do lado direito. Leve o mouse sobre essas miniaturas e mova
para baixo. Perceba que uma barra de rolagem moverá a tela, até aparecer
as imagens dos barcos.
566
Passo 24 – Assim que aparecer o barco azul, clique uma vez sobre ele.
Depois, basta fechar essa janela, clicando em ‘OK’.
Passo 25 – Programaremos a movimentação do barco azul. Na janela que

surgiu, clique em ‘Behaviors’ (comportamentos).
567
Passo 26 – A ferramenta Flowlab possui algumas configurações pré-
prontas de movimentação. Usaremos uma delas para fazer nosso barco se
mover para a esquerda e direita.
Na aba de opções do lado esquerdo, clique uma vez com o botão esquerdo
do mouse em ‘Behavior Bundles’ (pacotes de comportamento). Nas opções
que surgiram, clique em ‘Run & Jump’ (correr e pular). Note que surgirá
um bloco do tipo ‘Run & Jump’ ao centro da tela. Clique em ‘OK’ no canto
inferior esquerdo da tela e novamente em ‘OK’ na última janela.
568
569
Passo 27 - O último passo é aplicar a física para que para o barco possa
encontrar um objeto sólido e realizar movimentos. Clique em ‘Physics’ (Física).
Ative a opção ‘movable’ (móvel), depois clique em ‘OK’ e em ‘OK’ novamente.
570
Passo 28 – Clique e mova o barco para perto do píer.
571
Passo 29 – Repetiremos os mesmos passos para os barcos vermelho e
amarelo. Precisamos adicionar os três barcos nesta tela e realizar todas
as configurações e, no final, programar a tela da escolha. Leve o mouse
ao lado do barco azul para adicionarmos o barco vermelho. Clique com o
botão esquerdo uma vez e selecione ‘Create’.
572
Passo 30 – Na janela que surgiu, clique no campo ‘Type’ e digite ‘choose2’ (escolha
2). Esse será o barco de cor vermelha. Na sequência, clique em ‘edit sprite’.
Passo 31 – Novamente, basta selecionar a imagem que já foi carregada.

Para isso, clique no botão ‘Browse’ do lado direito e leve o mouse sobre as
miniaturas, movendo-o para baixo, até que as imagens dos barcos apareçam.
573
Passo 32 – Assim que aparecer o barco vermelho, clique uma vez sobre
ele. Depois, basta fechar a janela clicando no ‘OK’. desenvolvedor de games júnior | módulo 1 | capítulo 8
574
Passo 33 – Para programar a movimentação do barco vermelho, clique em
‘Behaviors’ na janela que surgiu.
Passo 34 – Utilizaremos as mesmas configurações pré-prontas de

movimentação. Na aba de opções do lado esquerdo, clique uma vez com o
botão esquerdo do mouse em ‘Behavior Bundles’. Nas opções que surgirem,
clique em ‘Run & Jump’. Clique no ‘OK’ no canto inferior esquerdo e no ‘OK’
da última janela.
575
576
Passo 35 – Clique e mova o barco vermelho para o lado direito do barco
azul, à direita do píer.
Passo 36 – Falta só o barco amarelo. Leve o mouse ao lado do barco

vermelho, clique com o botão esquerdo uma vez e selecione ‘Create’.
577
Passo 37 – Na janela que surgiu, clique no campo ‘Type’ e digite ‘choose3’
(escolha 3). Esse será o barco de cor amarela. Na sequência, clique em
‘edit sprite’.
578
Passo 38 – Novamente, basta selecionar a imagem que já foi carregada.
Para isso, clique no botão ‘Browse’ do lado direito e leve o mouse sobre
as miniaturas, movendo-o para baixo, até que as imagens dos barcos
apareçam. Assim que aparecer o barco amarelo, clique uma vez sobre ele.
Depois, basta fechar essa janela clicando no ‘OK’.
579
Passo 39 – Para programar a movimentação do barco amarelo, clique em
‘Behaviors’ na janela que surgiu.
580
Passo 40 – Utilizaremos as mesmas configurações pré-prontas de
movimentação. Na aba de opções do lado esquerdo, clique uma vez
com o botão esquerdo do mouse em ‘Behavior Bundles’. Nas opções
que surgirem, clique em ‘Run & Jump’. Clique no ‘OK’ no canto inferior
esquerdo da tela e no ‘OK’ da última janela.
581
582
Passo 41 – Clique e mova o barco amarelo para o lado direito do barco
vermelho, à direita do píer.
Passo 42 – Realizaremos a programação da tela de escolha dos

personagens. Antes de iniciarmos, leve o mouse sobre a opção ‘Library’
(biblioteca), na parte central e inferior da tela. Perceba que surgirá uma
miniatura de todos os objetos incluídos até o momento; isto quer dizer
que todos eles ficam aqui. Além disso, é preciso observar que cada objeto
possui um nome, conforme já estabelecemos. Ao final, clique em ‘OK’.
professor
// Professor(a), é importante enfatizar a diferença entre os objetos.

Por exemplo, o barco azul tem dois objetos: o primeiro chama-se
‘ship1’, que poderá ser clicado na tela de seleção do personagem.
Uma vez que ele for selecionado, seremos direcionados para a tela
‘Level 1’, mas o personagem que será usado para jogar é o objeto
‘choose1’. O mesmo acontecerá com os demais personagens. \\
583
Passo 43 – Voltaremos na tela de seleção de personagens. Na parte

inferior dela, leve o mouse em ‘Game Levels’, clique com o botão esquerdo,
depois, clique em ‘Load’ que está à frente de ‘Choice Screen’. Note que a
tela de seleção dos personagens será carregada.
584
Passo 44 – Criaremos o objeto mais importante do game, que será responsável

por entender a escolha do jogador e iniciar o game com o personagem
correto. Esse objeto se chamará ‘PlayerController’. Leve o mouse próximo
ao objeto responsável pelas informações de HUD ‘Choose Your Player’, ‘1’, ‘2’
e ‘3’. Clique uma vez com o botão esquerdo, depois, em ‘Create’.
585
Passo 45 – Na janela que surgiu, clique no campo ‘Type’ e digite
‘PlayerController’. Como esse é o objeto mais importante do game, iremos
pintá-lo de uma cor diferente, assim, clique no botão ‘edit sprite’.
586
Passo 46 – Para limpar a configuração de cor pré-existente no bloco,
clique no botão ‘erase’, clique na tela e limpe todo as cores. Em seguida,
altere o tamanho da ‘grid’ (rede) para ‘4’.
587
Passo 47 – Clique no ícone ‘pencil’ (lápis), depois escolha uma cor na barra
direita e clique dentro do retângulo referente a ela. Usaremos a cor amarela
no exemplo, mas fique à vontade para escolher qualquer cor que preferir.
588
589
Passo 48 – Pintaremos o centro de amarelo e as bordas do elemento de
outra cor. No caso, usaremos o vermelho, mas o importante é que esse
bloco tenha duas cores diferentes.
590
Passo 49 – Após pintar o objeto, clique no botão ‘OK’. Na sequência, leve
o mouse na opção ‘Name’ e digite o mesmo nome que definimos para o
objeto ‘PlayerController’.
591
Passo 50 – Depois, leve o mouse até ‘Reset’ (reiniciar), dê um clique e
troque para ‘Keep between levels’ (mantenha-se entre as camadas). Isso
fará com que o bloco ‘PlayerController’ seja visível em todos os três níveis
que já criamos. Ao final, clique em ‘OK’.
Passo 51 – Finalizamos as programações da aula de hoje! No próximo

encontro, voltaremos neste ponto para configurarmos os comportamentos
do objeto ‘PlayerController’ que acabamos de criar e pintar. Não é
necessário salvar; basta fechar o navegador da Internet, pois o Flowlab
salva automaticamente.
592
backup
Aprox. 2 Minutos
professor
// Professor(a), neste momento é importante realizar uma revisão

completa da aula executada, relembrando com os alunos o
planejamento. Esse momento de revisão ajuda a reforçar os principais
aprendizados que tivemos durante a aula. Utilize algumas situações
que aconteceram durante as atividades para exemplificar e reforçar
os conceitos mais importantes. \\
Nesta aula, continuamos com o desenvolvimento de um novo game

baseado em escolhas, usando a plataforma Flowlab. Neste game, o jogador
poderá escolher um dentre os três barcos disponíveis. Além disso, vimos
os conceitos de classes, atributos e métodos do paradigma orientado a
objetos. Quanto à programação do game, iniciamos a construção do Level 1,
inserimos o background (fundo de tela), criamos os limites em que os barcos
não poderão acessar, programamos os eventos do objeto responsável por
entender a escolha do jogador e os movimentos dos barcos. desenvolvedor de games júnior | módulo 1 | capítulo 8
594
level complete
Aprox. 2 Minutos
professor
// A aula chegou ao fim! Neste momento, direcione os alunos com

uma atividade extra para ser executada em casa e apresentada na
próxima aula. \\
A aula chegou ao fim! No próximo encontro, finalizaremos o projeto. Lembre-

se que nosso intuito é criar um game em que o jogador possa escolher um
personagem, entre os três barcos disponíveis.
Nesta semana, sua missão será apresentar o game que estamos

desenvolvendo para os seus pais, responsáveis e amigos da escola.
Não se esqueça que nosso game está disponível na Internet através de
um endereço url.
596
capítulo 9
desenvolvedor
de games júnior
daily
Aprox. 5 Minutos
Atenção, professor(a)!
// Olá, Professor(a)! Esta é a última aula do módulo, em que os alunos

serão apresentados ao conceito de encapsulamento na orientação a
objetos. Este conceito está inteiramente ligado à segurança interna,
que acontece dentro dos projetos e jogos desenvolvidos. Nesta aula,
através de uma atividade off-line, trataremos sobre os modificadores
de acesso públicos, privados e protegidos. \\
Material do aluno
Olá, aluno. Tudo bem? Está preparado para nosso último encontro deste
módulo?
Na aula anterior, você teve como missão apresentar o game que estamos
desenvolvendo para os pais, responsáveis e amigos. Caso queira
compartilhar as opiniões que conseguiu na semana, este é o momento.
Atenção, professor(a)! desenvolvedor de games júnior | módulo 1 | capítulo 9
// Professor(a), caso os alunos tenham obtido feedbacks e opiniões,

você poderá ouvir, complementar ou ressignificar alguns deles. É
sempre importante incentivar os alunos neste processo de criação,
afinal, estamos criando um game com uma temática marítima,
que envolve a escolha dos barcos, mas com os conceitos vistos
conseguiremos desenvolver games de quaisquer temas e aspectos.
\\
599
Material do aluno
Continuando o desenvolvimento do game baseado em escolhas usando

a plataforma Flowlab, lembrem-se de que nós vimos os conceitos de
classes, atributos e métodos. Quanto à programação do game, iniciamos a
construção do Level 1 (nível 1), inserimos o background (cenário), criamos
os limites em que o barco não poderia acessar e fizemos a movimentação
dos barcos.
Então, na aula de hoje, finalizaremos o desenvolvimento do game!
Objetivos da aula:

• Continuar a programação da escolha dos barcos;
• Configurar o teclado e o mouse para a escolha dos personagens;
• Ajustar os eventos da escolha;
• Realizar os últimos testes;
• Aprender sobre encapsulamento. desenvolvedor de games júnior | módulo 1 | capítulo 9
600
back-end
Aprox. 10 Minutos
// Professor(a), nesta aula, os alunos finalizarão o game. Você
notará que alguns passos são semelhantes para os três barcos.
Aproveite esse processo de repetição para enfatizar o aprendizado
e testar os conhecimentos dos alunos. Antes, utilize o material do
aluno para explicar sobre o conceito de encapsulamento, que está
atrelado à segurança do paradigma de orientação a objetos. \\
Material do aluno
Quando estamos programando jogos ou aplicativos, existem situações em
que devemos proteger as informações sigilosas ou sensíveis. Ao proteger
esses dados, evitamos que eles possam ser alterados indevidamente.
Imagine um game em que temos dois personagens inseridos. O personagem

principal é um guerreiro com 100 pontos de vida, enquanto o inimigo é um
zumbi que possui 50 pontos de vida. Quando os pontos chegam a zero,
ambos são eliminados.
Adaptado de: https://bit.ly/3fiVWrK

602
Guerreiro Zumbi
Life 100 50
No game, os dois personagens possuem uma variável com o mesmo nome,

isto é, ‘life’ (vida). Caso um erro seja cometido na programação, ao invés de
remover a vida do zumbi, é possível que o personagem principal possa ser
prejudicado. No exemplo, a variável ‘life’ precisa ser tratada com todos os
cuidados, ou seja, nos termos da programação, dizemos que esta variável
precisa ser encapsulada e/ou protegida.
Encapsular os dados de uma aplicação significa evitar que estes dados

sofram acessos indevidos. Já proteger os dados é uma prática histórica
e extremamente importante. Os povos da Grécia antiga utilizavam uma
espécie de bastão: a frase que deveria ser guardada com sigilo era escrita
em uma fita de couro do comprimento específico ao bastão. Para que a
mensagem fosse lida com exatidão, a fita deveria ser enrolada num bastão
de mesma largura.
https://bit.ly/33VStgc
603
Atualmente guardamos/protegemos informações o tempo todo, como,
por exemplo, através das senhas de acesso. Uma senha é uma palavra ou
código secreto previamente convencionado entre as partes, como forma
de reconhecimento. O uso de senhas é o método mais comum usado para
provar a identidade de alguém ao acessar sites, contas de e-mail, aplicativos,
redes sociais ou o próprio computador/celular. Seu uso normalmente é
associado ao nome de usuário.
De acordo com uma recente pesquisa sobre segurança de senhas,

descobriu-se que 17% das pessoas usavam a previsível sequência
numérica ‘123456’ para proteger o acesso aos dispositivos e suas contas
em serviços online, o que facilita muito o trabalho dos criminosos digitais
na hora de desvendar as palavras-chave das vítimas. Basicamente, os
criminosos usam softwares de adivinhação randômica que criam milhares
de combinações por minuto.
Portanto, sempre que for preciso criar novas senhas, evite dados óbvios
como as datas de aniversário, sobrenome da família ou o número de
telefone. O segredo de uma boa senha é mesclar letras, números e desenvolvedor de games júnior | módulo 1 | capítulo 9
símbolos especiais.
Um exemplo de senha extremamente forte é: ‘TubaraoBanguelo@50’,

pois além das letras maiúsculas, minúsculas e números, ela possui uma
frase icônica “Tubarão Banguelo” que deixa a senha mais fácil de ser
lembrada, tudo isso somado à quantidade de caracteres (18). Softwares
de criminosos que tentam adivinhar senhas não têm êxito quando
realizamos esse tipo de combinação.
604
Quando programamos jogos ou aplicativos podemos definir graus de acesso
para cada informação, ou seja, podemos definir que atributos ou métodos
são ‘public’ (públicos) – isto é, permitem acesso a qualquer código externo à
classe, ‘private’ (privados) – isto é, proíbem qualquer acesso externo à própria
classe, inclusive das classes filhas, ou ‘protected’ (protegidos) – permitem
acesso às classes filhas, mas proíbem a qualquer outro acesso externo.
Esses graus de acesso no paradigma orientado a objetos que aprendemos

nos encontros anteriores são chamados de modificadores de acesso e
servem para tornar componentes da sua aplicação mais ou menos acessíveis
por outras partes do seu programa. Faremos uma atividade que te ajudará a
entender na prática como cada um desses modificadores de acesso funciona!
Você sabia?
Hoje em dia, o GPS dos
smartphones mais avançados
tem uma precisão que varia de
três a cinco metros. Ou seja,
ele não é capaz de determinar
exatamente em qual cômodo da casa você está, ou mesmo se você
está por cima ou embaixo de um viaduto, por exemplo. Esse tipo de
‘não precisão’, pode ser benéfico quando falamos sobre segurança,
afinal, pode ser extremamente prejudicial se criminosos conseguirem
obter a localização precisa das pessoas.
Referências:
https://bit.ly/3nNZXce
https://bit.ly/3FOBIRq
605
front-end
Aprox. 71 Minutos
offline
// Professor(a), nesta atividade, os alunos utilizarão uma folha
de papel, uma caneta ou lápis. Inicialmente, eles farão desenhos
de casas e de moradores (uma criança e um responsável),
que representarão as classes de um programa e a relação de
herança. Depois, eles criarão informações (atributos ou funções)
relacionadas aos moradores e, com isso, trabalharão os conceitos
relacionados aos modificadores de acesso da linguagem orientada
a objetos. \\
Material do aluno
Vamos começar a colocar a mão na massa para entender na prática
o conceito de encapsulamento e proteção de dados apresentados no
início da aula?
Primeiro, pensaremos nas classes de um programa. Na atividade,

elas serão representadas pelos moradores, apenas para fins didáticos
(pois em uma programação, objetos/itens similares, como “pessoas”,
poderiam ser agrupados em uma mesma classe). Então, o primeiro
passo é desenhar duas casas na folha de papel, com dois moradores
dentro, uma criança e um responsável. Escreva duas frases indicando os
nomes das classes (moradores) que vivem em cada uma das casas. Veja
o exemplo a seguir:
607
• Na casa da esquerda moram Ana e Pedro.
• Na casa da direita moram Julia e Fernando.
// Com a primeira parte da etapa concluída, os alunos deverão criar

três informações, para cada uma das classes (moradores). Essas
informações serão classificadas com os modificadores de acesso
apresentados anteriormente.
No primeiro passo, eles criarão informações que serão classificadas

posteriormente como privadas, isso é, informações que só aquela
classe terá acesso.
No segundo passo, eles criarão informações que serão classificadas

como públicas, isso é, qualquer classe (morador) poderá ter acesso.
E no terceiro passo, eles criarão informações classificadas como

protegidas; apenas aqueles que estiverem dentro da herança poderão
acessá-las.\\
608
Material do aluno
Agora que já conhecemos os moradores, seguiremos para a próxima etapa

da atividade.
Primeiro passo: comece criando um ‘segredo’ para cada morador, isso
é, uma informação que ele não compartilha com ninguém. Por exemplo,
“Fernando tem medo de raios e trovões” ou “Júlia não gosta de beterraba”.
Use o espaço vazio da folha para escrever os segredos.
Segundo passo: depois, crie uma característica pessoal de cada um dos

indivíduos. Por exemplo, “Ana tem cabelo curto” e “Pedro está usando
calça jeans”. Use o espaço vazio da folha para escrever as características/
informações, que podem ser compartilhadas com todos.
Terceiro passo: escreva uma informação que o responsável compartilha

com o(a) filho(a), e não compartilha com mais ninguém. Por exemplo, “A
senha para desbloquear o celular é 5896”. Use o espaço vazio da folha
para escrever essas informações correlacionadas.
// Assim que todos os alunos terminarem, chegou o momento
de classificar as informações considerando os modificadores de
acesso trabalhados. É importante que você seja o mediador e ajude
os alunos nas classificações: ‘informações públicas’, ‘informações
privadas’ e ‘informações protegidas’. \\
609
Material do aluno
Uma vez cumpridas todas as instruções, chegou a hora de enquadrar

todas as informações dentro dos três modificadores de acesso:
• Privado.
• Protegido.
• Público.
Pegue todas as informações referentes aos moradores e distribua-as

dentro desses três modificadores. Qual informação é privada, isso é, que
não é compartilhada com ninguém? Qual é protegida, isso é, que apenas
os moradores da mesma família podem ter acesso? Qual informação é
pública, isso é, que até os vizinhos sabem?
// Após os alunos terminarem, peça para que compartilhem com a
turma as respostas. Vale lembrar que algumas informações podem
ser consideradas privadas, protegidas ou públicas dependendo
da intenção do programador. Por exemplo, o João tem medo de desenvolvedor de games júnior | módulo 1 | capítulo 9
cachorro, ele pode optar por guardar esse segredo para si, pode
escolher compartilhar com o pai/mãe dele, ou até mesmo contar
para outras pessoas fora da família, tudo depende do que ele achar
conveniente. \\
Material do aluno
Agora que você já conheceu os três modificadores, vamos colocar a mão

na massa e terminar nosso projeto?
610
build and run Tempo estimado 61 minutos
// Professor(a), dê início ao passo a passo com os alunos. Aqui será
necessário que você conduza a aula de forma muito cuidadosa, para
que todos os passos sejam realizados com sucesso. \\
Material do aluno
Agora que você já entendeu o conceito de segurança e encapsulamento,
chegou a hora de finalizarmos nosso game de escolhas. Siga o passo a
passo e boa diversão!
Passo 1 – Inicialmente, acesse o site: https://flowlab.io.
Passo 2 – Clique no menu ‘Log In’ (Conectar-se).
611
Passo 3 – Na tela de ‘login’, digite o e-mail, a senha e, na sequência, clique
em ‘Sign In’ (Entrar).
Passo 4 – Depois de entrar, o nome de usuário aparecerá no menu superior,
612
ao lado direito. Clique em ‘My Games’ (Meus jogos).
Passo 5 – Todos os jogos desenvolvidos serão listados na tela seguinte;

basta localizar o nome do game desenvolvido e clicar no botão ‘Edit’ para
voltar à edição.
613
Passo 6 – Na sequência, iremos para a ‘Layer 1’, que finalizamos na aula
anterior. Clique no botão ‘Game Levels’ (Níveis de jogo) da barra inferior.
Depois, clique no botão ‘Load’ (Carregar) da tela ‘Choice Screen’, que é a
nossa tela de escolhas.
614
Passo 7 – No último passo da aula anterior, criamos o bloco
‘PlayerController’, então, precisamos criar a programação de cada barco
escolhido. Uma vez que o barco for escolhido, o bloco ‘PlayerController’
precisará receber essa informação. Leve o mouse e clique uma vez sobre
o barco um, o de cor azul. Na sequência, clique em ‘Edit’. Na janela que
surgiu, clique em ‘Behaviors’ (comportamentos).
615
Passo 8 – No painel à esquerda, dentro de ‘Triggers’ (gatilhos), clique uma
vez em ‘MouseClick’, que verificará o clique do mouse, e em ‘Keyboard’,
que checará se determinada tecla será pressionada. Note que os blocos
surgirão à direita.
616
Passo 9 – Clique uma vez no bloco ‘Keyboard’. Na janela que surgiu, clique
na opção ‘Change Key’ para mudar a tecla que será detectada, digite o
número ‘1’ e clique em ‘OK’.
Passo 10 – Em seguida, clique no campo ‘Logic & Math’ (Matemática e

lógica) e, dentro dele, clique em ‘Number’, que é um bloco de número. desenvolvedor de games júnior | módulo 1 | capítulo 9
617
Passo 11 – Por fim, clique na opção ‘Components’ (Componentes) e dê um
clique em ‘Message’ (Mensagem), que permite enviar mensagens.
618
Passo 12 – Vamos realizar a ligação desses objetos. Leve o mouse na
bolinha ‘down’ (para baixo) do bloco ‘MouseClick’, que é acionado quando o
botão esquerdo do mouse for pressionado. Clique e arraste-a até a bolinha
‘get’ (obter) do componente ‘Number’. O ‘get’ fará com que o número seja
enviado ao final do bloco.
Passo 13 – Iremos realizar a ligação do objeto ‘Keyboard’ (teclado). Leve

o mouse na bolinha ‘down’ do bloco ‘Keyboard’, que é acionado quando a
tecla selecionada é pressionada, ou seja, o número ‘1’. Clique e arraste-a
até a bolinha ‘get’ do componente ‘Number’.
619
Passo 14 – Realizaremos a ligação do objeto ‘Number’. Leve o mouse na
bolinha ‘out’ (saída) do bloco ‘Number’, clique e arraste-a até a bolinha
‘send’ do componente ‘Message’ (Mensagem), para que a mensagem seja
enviada.
Passo 15 – Clique no bloco ‘Message’. Na parte superior, digite

‘playerselect’. Na sequência, no campo ‘Select Type’ (Selecionar Tipo),
clique e escolha o objeto ‘PlayerController’, para o qual a mensagem será
enviada. Ou seja, caso o barco de número 1 (um) seja escolhido, uma
mensagem será enviada diretamente para a classe ‘PlayerController’.
620
Passo 16 – Como esse é o personagem de número ‘1’ a ser escolhido, na
tela de seleção de personagem, clique no bloco ‘Number’ e, na janela que
surgir, aumente ‘Current value’ (Valor atual) para ‘1’. Ao final, clique em ‘OK’.
621
Passo 17 – Configuraremos o comportamento do barco dois, o de cor
vermelha, de modo semelhante ao que fizemos com o primeiro barco. Leve
o mouse e clique uma vez sobre o barco dois. Na sequência, clique em ‘Edit’.
Na janela que surgiu, clique em ‘Behaviors’ para definir a programação.
622
Passo 18 – No painel à esquerda, dentro de ‘Triggers’, clique mais uma vez
em ‘MouseClick’ e ‘Keyboard’. Note que os blocos relacionados ao clique
do mouse e do teclado surgirão à direita.
623
no botão ‘Change Key’ para alterar a tecla a ser detectada, digite o número
‘2’ e clique em ‘OK’.
624
Passo 20 – Clique no campo ‘Logic & Math’. Dentro dele, clique em ‘Number’,
que corresponde ao bloco numérico.
625
Passo 21 – Por fim, clique na opção ‘Components’ e dê um clique em
‘Message’, para inserir o bloco de mensagens.
Passo 22 – Realizaremos a ligação dos objetos. Leve o mouse na bolinha

‘down’ do bloco ‘MouseClick’, clique e arraste-a até a bolinha ‘get’ do
componente ‘Number’, para que o clique do mouse seja detectado.
626
Passo 23 – Então, iremos realizar a ligação do objeto ‘Keyboard’. Leve
o mouse na bolinha ‘down’ do bloco ‘Keyboard’, clique e arraste-a até a
bolinha ‘get’ do componente ‘Number’, para que o pressionar da tecla 2
seja detectado.
Passo 24 – Realizaremos a ligação do objeto ‘Number’. Leve o mouse

na bolinha ‘out’ do bloco ‘Number’, clique e arraste-a até a bolinha ‘send’
(enviar) do componente ‘Message’, para que a mensagem numérica seja
enviada.
627
Passo 25 – Clique no bloco ‘Message’ e, na parte superior, digite
‘playerselect’. Na sequência, no campo ‘Select Type’, clique e escolha o
objeto ‘PlayerController’. Ou seja, caso o barco dois seja escolhido, uma
Passo 26 – Como esse é o personagem ‘2’ a ser escolhido na tela de seleção

de personagem, clique no bloco ‘Number’ e, na janela que surgir, aumente
‘Current value’ para ‘2’. Ao final, clique em ‘OK’.
628
Passo 27 – Configuraremos o comportamento do barco três, o de cor
amarela, assim como feito com os demais barcos. Leve o mouse e clique
uma vez sobre ele. Na sequência, clique em ‘Edit’. Na janela que surgiu,
clique em ‘Behaviors’.
629
Passo 28 – No painel à esquerda, dentro de ‘Triggers’, clique novamente em
‘MouseClick’ e em ‘Keyboard’. Note que os blocos relacionados ao clique
do mouse e do teclado surgirão à direita.
630
no botão ‘Change Key’ para alterar a tecla a ser detectada, digite o número
‘3’ e clique em ‘OK’.
631
Passo 30 – Clique no campo ‘Logic & Math’ e, dentro dele, clique em
‘Number’, que corresponde ao bloco numérico.
632
Passo 31 – Por fim, clique na opção ‘Components’ e dê um clique em
‘Message’, para inserir o bloco de mensagens.
Passo 32 – Agora, iremos realizar a ligação desses objetos. Leve o mouse

na bolinha ‘down’ do bloco ‘MouseClick’, clique e arraste-a até a bolinha
‘get’ do componente ‘Number’, para que o clique do mouse seja detectado.
633
Passo 33 – Vamos realizar a ligação do objeto ‘Keyboard’. Leve o mouse
na bolinha ‘down’ do bloco ‘Keyboard’, clique e arraste-a até a bolinha ‘get’
do componente ‘Number’, para que o pressionar da tecla 3 seja detectado.
Passo 34 – Realizaremos a ligação do objeto ‘Number’. Leve o mouse na

bolinha ‘out’ do bloco ‘Number’, clique e arraste-a até a bolinha ‘send’ do
componente ‘Message’, para que a mensagem numérica seja enviada.
634
Passo 35 – Clique no bloco ‘Message’ e, na parte superior, digite
‘playerselect’. Na sequência, no campo ‘Select Type’, clique e escolha o
objeto ‘PlayerController’. Ou seja, caso o barco três seja escolhido, uma
635
Passo 36 – Como esse é o personagem ‘3’ a ser escolhido na tela de seleção
de personagem, clique no bloco ‘Number’ e, na janela que surgir, aumente
‘Current value’ para ‘3’. Ao final, clique em ‘OK’.
Passo 37 – Ao finalizar a programação do terceiro barco, clique em ‘OK’.
636
Passo 38 – Acabamos de programar a escolha de cada personagem
e as mensagens que serão enviadas do bloco ‘Player Controller’. Agora,
precisamos pegar as mensagens recebidas e tratá-las, ou seja, precisamos
escolher o que acontecerá uma vez que recebermos a mensagem
‘playerselect’. Então, clique uma vez sobre o objeto ‘Player Controller’,
depois, clique em ‘Edit’ e, na próxima janela, clique em ‘Behaviors’.
637
Passo 39 – A primeira tratativa que faremos será em relação ao recebimento
da mensagem ‘playerselect’ que acabamos de incluir na escolha de cada
personagem. Se escolhermos um personagem qualquer, a primeira coisa
que acontecerá será mudar o nível para ‘Level 1’, que é a fase principal.
Para programar isso, clique em ‘Triggers’ e, depois, em ‘Mailbox’ (Caixa de
mensagens), que é ativado quando uma mensagem é recebida.
638
Passo 40 – Vá em ‘Game Flow’ (fluxo do game) e, depois, em ‘Next Level’
(Próximo nível). Na sequência, interligue os dois objetos adicionados. Clique
na bolinha ‘out’ de ‘Mailbox’ e ligue-a com a bolinha ‘go’ de ‘NextLevel’, para
que o usuário seja direcionado para o próximo nível (nível inicial) do jogo.
639
Passo 41 – Na mesma tela, precisamos criar um controle para receber qual
personagem foi escolhido. Essa escolha dependerá dos números de 1 a 3
que definimos para os personagens, sendo:
1 Barco azul
2 Barco vermelho
3 Barco amarelo
Passo 42 – Clique em ‘Triggers’ e escolha ‘Once’, que é executado apenas

uma vez no game.
Passo 43 – Uma vez inserido o bloco ‘Once’, clique nele para editar
sua configuração. Ative a opção ‘Reset on level start’ para que ele seja
redefinido toda vez que o nível iniciar. Ao final clique em ‘OK’.
640
641
Passo 44 – Depois, clique em ‘Logic & Math’ e escolha ‘Switch’ (Interruptor),
que é responsável por habilitar ou desabilitar determinada programação.
Passo 45 – Ainda em ‘Logic & Math’, clique em ‘Number’, que é um bloco

numérico.
642
Passo 46 – Para realizarmos a ligação, clique na bolinha ‘out’ do bloco
‘Once’ e arraste-a até a bolinha ‘in’ (entrada) do bloco ‘Switch’.
Passo 47 – No bloco ‘Switch’, clique na bolinha ‘out’ e ligue-a na bolinha

‘get’ do bloco ‘Number’. Ou seja, o bloco ‘Number’ receberá a informação
de que o interruptor está ligado e de que o número que estiver nele deve ser
enviado ao final do bloco e seguir na programação.
643
Passo 48 – Agora, transmitiremos a mensagem de que o personagem
foi selecionado e o número dele. Essa mensagem foi recebida pelo bloco
‘Mailbox’ e precisa ser retransmitida para os blocos ‘Switch’ e ‘Number’.
Clique em cima do bloco ‘Mailbox’, digite ‘playerselect’, pois foi essa a
mensagem que configuramos ao selecionar um personagem na tela da
escolha e, ao final, clique em ‘OK’.
Passo 49 – Para a mensagem ser retransmitida, clique na bolinha ‘out’ do

bloco ‘Mailbox’ e arraste-a até a bolinha ‘on’ do bloco ‘Switch’.
644
Passo 50 – Repita o processo e interligue a bolinha ‘out’ de ‘Mailbox’ até
a bolinha ‘set’ de ‘Number’. Isso permitirá enviar para o bloco de número
(‘Number’) qual foi o personagem escolhido: 1, 2 ou 3.
// Professor, os alunos provavelmente estarão se perguntando

o porquê do uso do interruptor, possivelmente comentando que
poderíamos ter passado o número escolhido direto para o bloco desenvolvedor de games júnior | módulo 1 | capítulo 9
‘Number’.
O ‘Mailbox’ é responsável por enviar o número que será colocado
no bloco ‘Number’ e o ‘Once’ por fazer com que esse número seja
enviado ao final do bloco e siga pelo restante da programação. O
‘Switch’, neste caso, foi inserido apenas para assegurar que essa
programação funcionará da forma correta. Ele será “ligado” apenas
quando receber o número do barco escolhido, que será enviado
adiante na programação graças ao uso do ‘Once’. \\
645
Passo 51 – Agora que o bloco ‘Number’ recebeu a escolha do jogador,
precisamos desenvolver o controle que criará o barco na fase ‘Level 1’, ou
seja, que fará com que ele apareça. Para isso, precisaremos de três filtros.
Do lado esquerdo, dentro de ‘Logic & Math’, clique três vezes em ‘Filter’
(filtro) e organize a visualização, de modo que um fique abaixo do outro.
Passo 52 – Clique no primeiro filtro, no campo ‘greater than’ (maior que) e

troque por ‘equal to’ (igual a). Logo abaixo, no campo com o valor, troque
para ‘1’ e clique em ‘OK’. Com esse bloco, se o valor do barco selecionado
for igual a ‘1’, a programação seguirá pela saída chamada ‘pass’. Caso
contrário, ela seguirá para a saída chamada ‘fail’.
646
Passo 53 – Repita o processo com o segundo filtro. Selecione o campo
‘equal to’ e, no campo abaixo, troque o valor para ‘2’. Depois, clique em ‘OK’.
647
Passo 54 – Repita o processo com o terceiro filtro. Selecione o campo
‘equal to’ e, no campo abaixo, troque o valor para ‘3’. Depois, clique em ‘OK’.
Passo 55 – Criados os filtros que analisarão cada valor recebido, criaremos

o controle para gerar/criar o personagem escolhido no lugar certo. No
campo ‘Components’, clique três vezes em ‘Spawn’ (gerar/criar). Em
seguida, organize os blocos conforme apresentado.
648
Passo 56 – Ligue a bolinha ‘pass’ do filtro ‘equal to 1’ na bolinha ‘spawn’ do

bloco ‘Spawn’, pois só queremos que o barco ‘1’ apareça na próxima tela se
ele tiver sido selecionado na tela anterior.
649
Passo 57 – Repita o mesmo processo para os demais filtros, como
mostrado abaixo.
650
Passo 58 – Selecione o primeiro bloco ‘Spawn’, pois precisamos configurar
o que será gerado/criado na tela seguinte uma vez que escolhermos o
personagem ‘1’.
Passo 59 – Na janela que surgiu, clique no campo ‘Type to Spawn’ (digite

para criar) e escolha ‘choose1’, que se refere à imagem do primeiro barco.
Digite ‘350’ no campo ‘Spawn X’ e ‘200’ em ‘Spawn Y’, pois essa é a
posição em que o barco azul será criado na tela, na horizontal e vertical,
respectivamente.
651
// Professor(a), caso ache necessário, aumente o valor de ‘Spawn X’

para ‘500’, por exemplo. \\
Passo 60 – Selecione o segundo bloco ‘Spawn’, pois precisamos configurar

o que será gerado uma vez que escolhermos o personagem ‘2’.
Passo 61 – Na janela que surgiu, clique no campo ‘Type to Spawn’ e escolha

‘choose2’, referente ao segundo barco. Digite ‘350’ no campo ‘Spawn X’ e
‘200’ em ‘Spawn Y’, pois essa é a posição em que o barco vermelho será
criado na tela.
652
Passo 62 – Agora, selecione o terceiro bloco ‘Spawn’, pois precisamos
configurar o que será gerado uma vez que escolhermos o personagem ‘3’.
653
Passo 63 – Na janela que surgir, clique no campo ‘Type to Spawn’ e escolha
‘choose3’, referente ao terceiro barco. Digite ‘350’ no campo ‘Spawn X’ e
‘200’ em ‘Spawn Y’, pois essa é a posição em que o barco amarelo será
criado na tela.
Passo 64 – Faltam duas configurações para finalizar a programação. A

primeira é a ligação da bolinha ‘out’ do bloco ‘Number’ na bolinha ‘in’ de
cada filtro criado. Assim, o filtro conseguirá analisar o valor que chegar e
direcionar para o lugar correto.
654
Passo 65 – A última configuração será escolher qual será o level/nível em
que direcionaremos o barco, uma vez que escolhermos o personagem.
Clique no bloco ‘NextLevel’ e escolha o ‘Level 1’. Ao final, clique em ‘OK’.
655
Passo 66 – Agora que o bloco ‘Player Controller’ está configurado, antes
de testarmos o nosso game, precisamos deletar os objetos que estão
aparecendo no ‘Level 1’. Na barra inferior, clique em ‘Game Levels’. Depois,
clique em ‘Load’.
Passo 67 – Como já configuramos o spawn, ou seja, a criação do

personagem escolhido na tela inicial do jogo, não precisamos dos três
personagens na tela. Clique uma vez sobre cada personagem e, depois,
em ‘Delete’. Ao final, nossa fase ficará vazia. desenvolvedor de games júnior | módulo 1 | capítulo 9
656
Passo 68 – Podemos realizar um teste para saber se tudo está funcionando

conforme programamos. Volte na tela inicial clicando em ‘Game Levels’ e
carregue a tela de ‘begin’.
657
Passo 69 – Clique em ‘Play’.
658
Passo 70 – Neste teste, use o mouse para clicar nos barcos ou use os
números de 1 ao 3 do teclado.
659
Passo 71 – Parabéns navegante! Seu game de escolha de personagem
está pronto e programado!
660
backup
Aprox. 2 Minutos
// Professor(a), é importante realizar uma revisão completa da aula

executada, relembrando com os alunos o planejamento estipulado no
início da aula. Esse momento de revisão ajuda a reforçar os principais
aprendizados que foram obtidos. Utilize algumas situações que
aconteceram durante a aula para exemplificar e reforçar os conceitos
Material do aluno
Nesta aula, finalizamos o game baseado em escolhas usando a plataforma

Flowlab. No game, o jogador pode escolher um entre os três barcos
disponíveis!
Também pudemos entender o conceito de segurança e encapsulamento

quando programamos games ou aplicativos.
Quanto à programação do game, programamos a escolha dos barcos, bem desenvolvedor de games júnior | módulo 1 | capítulo 9
como a configuração do teclado e do mouse. No final, realizamos os ajustes

quanto aos eventos da escolha.
662
level complete
Aprox. 2 Minutos
// Neste momento, peça aos alunos para apresentarem o game

finalizado para os pais e amigos. \\
Material do aluno
A última aula do módulo chegou ao fim!
No encontro de hoje, finalizamos o game baseado na escolha dos

personagens.
Apresente o game finalizado para os responsáveis e amigos, e não se

esqueça de coletar os feedbacks para melhorar o seu jogo.
Além disso, você pode alterar o cenário e os personagens por outros!
Lembre-se que nosso game estará disponível na Internet, através de um

endereço URL do site Flowlab. desenvolvedor de games júnior | módulo 1 | capítulo 9
664

DEVjr M1 Prof

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

DEVjr M1 Prof

Enviado por

Direitos autorais:

Formatos disponíveis

3 capítulo 1

// Professor(a), o objetivo do ‘Daily’ é realizar uma apresentação

Nesta aula, você vai:

• Conhecer a ferramenta Gamefroot;

desenvolvedor de games júnior | módulo 1 | capítulo 1

// Professor(a), em todas as aulas teremos o bloco ‘Back-end’,

// Faça um exercício rápido e questione os alunos sobre quais outros

// O ‘Front-end’ é o momento dedicado para que os alunos possam

//Professor(a), os alunos começarão pela criação de uma conta na

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 2 - Na tela de login, temos 2 opções: criar uma conta cadastrando

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 4 - Na janela de criação da conta, clique no campo ‘Choose your

informações de acesso, caso esqueça.

//Professor(a), caso o aluno não se lembre do seu e-mail ou senha,

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 11 - A tela inicial do projeto será iniciada. Nela, temos algumas

desenvolvedor de games júnior | módulo 1 | capítulo 1

//Professor(a), é importante fixar os nomes das faixas de opções

Passo 12 - Na parte superior, temos a ‘barra de menus’. É nela que podemos

Passo 13 - Do lado esquerdo, encontramos a ‘Faixa de Opções’. Nela

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 15 - No canto inferior esquerdo se encontra a ‘Janela do Zoom’,

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 17 - Na janela que surgiu, você pode visualizar todos os projetos

Desça a barra de rolagem do seu navegador até o final, observando todos

/Professor(a), utilize esse momento para explicar a diferença entre

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 20 - Note que, agora, na ‘Faixa de Opções’ estão todos os itens

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

//Professor(a), a instrução abaixo tem caráter didático, e serve

Quando projetamos um game em 2D, precisamos observar a

desenvolvedor de games júnior | módulo 1 | capítulo 1

A camada que compõe o cenário de fundo é a ‘Background’ e pode

Neste exemplo a seguir, adicionamos mais uma camada, denominada

Para adicionar as camadas, comece levando o mouse ao lado direito da

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 27- Experimente, agora, clicar, segurar o clique e arrastar o mouse

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 29 - Da mesma forma como fez anteriormente, escolha um novo

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 34 - Como a tela está vazia, vamos escolher um plano de fundo.

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 37 - Para visualizá-la melhor, vamos mexer na ‘Janela do Zoom’ da

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 40 - Utilize a mão indicada na imagem para arrastar a tela para o

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 42 - Iremos desenhar a fase sobre a estrutura ‘Tracer Map’. Para

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 48 - Agora que as plataformas da fase estão prontas, podemos inserir

desenvolvedor de games júnior | módulo 1 | capítulo 1

Passo 50 - Por último, clique com o botão esquerdo na área de trabalho e

//Professor(a), é importante que o aluno posicione corretamente o