jogos para internet

Prévia do material em texto

Jogos para Internet
Material Teórico
Responsável pelo Conteúdo:
Prof. Me. Alcides Teixeira Barboza Junior
Revisão Textual:
Prof. Esp. Claudio Pereira do Nascimento
Criando um Jogo de Plataforma para Internet
• Introdução;
• Player e Animações;
• Movendo a Câmera com o Player;
• Montando o Background do Jogo;
• Coletando Moedas e Exibindo a Pontuação;
• Mudando o Score com Variáveis;
• Definindo os Inimigos;
• Finalizando o Jogo.
 · Demonstrar o uso da ferramenta GDevelop;
 · Criar um jogo estilo plataforma na ferramenta selecionada.
OBJETIVO DE APRENDIZADO
Criando um Jogo de Plataforma 
para Internet
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem 
aproveitado e haja maior aplicabilidade na sua 
formação acadêmica e atuação profissional, siga 
algumas recomendações básicas: 
Assim:
Organize seus estudos de maneira que passem a fazer parte 
da sua rotina. Por exemplo, você poderá determinar um dia e 
horário fixos como seu “momento do estudo”;
Procure se alimentar e se hidratar quando for estudar; lembre-se de que uma 
alimentação saudável pode proporcionar melhor aproveitamento do estudo;
No material de cada Unidade, há leituras indicadas e, entre elas, artigos científicos, livros, vídeos 
e sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você 
também encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão 
sua interpretação e auxiliarão no pleno entendimento dos temas abordados;
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discus-
são, pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o 
contato com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e 
de aprendizagem.
Organize seus estudos de maneira que passem a fazer parte 
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Determine um 
horário fixo 
para estudar.
Aproveite as 
indicações 
de Material 
Complementar.
Procure se alimentar e se hidratar quando for estudar; lembre-se de que uma 
Não se esqueça 
de se alimentar 
e de se manter 
hidratado.
Aproveite as 
Conserve seu 
material e local de 
estudos sempre 
organizados.
Procure manter 
contato com seus 
colegas e tutores 
para trocar ideias! 
Isso amplia a 
aprendizagem.
Seja original! 
Nunca plagie 
trabalhos.
UNIDADE Criando um Jogo de Plataforma para Internet
Contextualização 
Você deve conhecer e até já ter jogado o jogo Super Mario Bros, certo? Esse 
tipo de jogo é classificado como jogo de plataforma. Existem diversos jogos seme-
lhantes ao Super Mario Bros, igualmente de sucesso ou não. Esse tipo de jogo é 
um dos mais básicos para se começar a desenvolver quando entramos no mundo 
de desenvolvimento de jogos digitais, logo, é isso mesmo que você está pensando, 
iremos desenvolver um jogo de plataforma agora.
Assim, nesta unidade iremos utilizar os conceitos básicos aprendidos na Uni-
dade anterior referentes ao GDevelop para criarmos um jogo de plataforma, no 
decorrer dessa aventura, iremos aprender mais alguns recursos da ferramenta 
para deixar nosso jogo interessante. 
Então, agora é a hora de arregaçar as mangas e começar o desenvolvimento. 
Você está pronto?
8
9
Introdução
Agora que nós já conhecemos um pouco das características do GDevelop e 
como trabalhar com os conceitos de objetos, eventos e animações, vamos iniciar 
a criação de um jogo simples de plataforma. 
Importante!
Para você seguir os tópicos desta unidade, terá que fazer o download do material extra 
disponível no ambiente Blackboard. O material consiste basicamente das imagens 
utilizadas nos exemplos da unidade.
Importante!
Você poderá encontrar as imagens usadas nesta unidade e também outros exemplos de 
personagens ou elementos de jogos no site OpenGameArt. Para consultar mais opções, 
acesse o link: https://goo.gl/WbrjXv.
Ex
pl
or
Um jogo de plataforma é um gênero de jogo eletrônico que surgiu no início 
dos anos 80, no qual um personagem percorre uma plataforma 2D, correndo e 
pulando obstáculos, enfrentando inimigos e coletando objetos que constituirão a 
pontuação do jogador.
O enredo do nosso jogo se passa em um ambiente de deserto e nosso persona-
gem deverá coletar moedas e chaves disponíveis no caminho até chegar ao final da 
fase. Como estamos começando, iremos criar uma única fase. Na figura 1 exibimos 
o nosso herói e seu inimigo.
Figura 1 – Personagens do jogo
9
UNIDADE Criando um Jogo de Plataforma para Internet
Vamos então começar, crie um novo projeto no GDevelop e escolha Empty 
game, figura 2.
Figura 2 – Novo projeto vazio
Adicione uma nova cena clicando em Add a Scene. Renomeie para MainScene 
e vamos começar.
Figura 3 – Adicionando uma nova cena
10
11
O ambiente de desenvolvimento poderá ser otimizado conforme as suas prefe-
rências e necessidades. Ao clicarmos duas vezes sobre a cena criada, a interface 
parece meio bagunçada e pouco produtiva, figura 4. 
Figura 4 – Área de trabalho da MainScene
Vamos organizá-la da seguinte maneira: (I) primeiro vamos fechar o painel Project, 
clicando no X; (II) a seguir, vamos arrastar o painel Properties para baixo do painel 
Objects. Você poderá ajustar a ferramenta conforme suas necessidades, clicando e ar-
rastando (ou fechando) painéis. Nossa interface base ficará como exibido na figura 5.
Figura 5 – Confi guração da área de trabalho
11
UNIDADE Criando um Jogo de Plataforma para Internet
Estamos prontos para começar. Vamos adicionar um player e uma plataforma 
para nosso jogo, assim como fizemos em outras unidades. Clique em adicionar 
Object e adicione um Sprite para o Player e Tiled Sprite para a plataforma. Para 
o personagem escolha a imagem Idle.png (figura 6) dentro da pasta Player e adi-
cione o Behavior Platformer character (figura 6) a ele. 
Figura 6
Vamos agora renomear o objeto criado para Player e criar uma instância dele 
na cena, figura 7.
Figura 7 – Instância do player
12
13
Para a plataforma, escolha a imagem 2.png dentro da pasta Tile e adicione o 
Behavior Platform a ele, figura 8. 
Figura 8 – Adicionando um tile de plataforma
Agora, renomeie para Platform e crie uma instância dele na cena. Devemos 
redimensionar essa plataforma e posicioná-la na cena, como mostra a figura 9.
Figura 9 – Redimensionando a plataforma
Esta parte do jogo está pronta!! Caso você ainda tenha alguma dúvida ou difi-
culdade, retome a Unidade anterior. Clique em play e veja o comportamento do 
jogo até aqui.
13
UNIDADE Criando um Jogo de Plataforma para Internet
Player e Animações
As animações são responsáveis por dar mais realismo ao jogo. Com elas pode-
mos fazer o nosso player saltar e correr com mais naturalidade. Vamos editar o 
objeto Player e adicionar mais duas animações. Para a animação #1, vamos adi-
cionar a imagem Jump.png na pasta Player. Para a animação #2, vamos adicio-
nar todas as imagens Run(x).png. Ainda nessa animação, habilite a opção Loop e 
configure o tempo para 0.05.
Para finalizar, vamos renomear as animações da seguinte maneira: Animation #0 = 
Idle; Animation #1 = Jump; Animation #2 = Running. 
Guarde esses nomes pois serão utilizados na configuração dos eventos. No final, 
se tudo estiver correto, clique em Apply. Veja o resultado dessas etapas na figura 10.
Figura 10 – Animação do player
Agora vamos adicionar os eventos para que o personagem corra e salte de acordo 
com as animações criadas. Assim como fizemos na Unidade anterior, vamos criar 2 
eventos: (I) is jumping e (II) is on the floor. O segundo evento terá dois subeventos 
para quando o Player estiver parado ou em movimento, figura 11.
Figura 11 – Eventos do player (jumping e floor)
14
15
Importante!
Coloque o nome das animações entre aspas.
Importante!
Até este ponto, você utilizou os conceitos trabalhados na Unidade anterior. 
Se você executar o jogo, vai perceber que quando o Playerse move para trás, 
ele parece estar andando de costas!!! Vamos adicionar mais dois eventos para 
corrigir isso. 
Adicione um novo evento em Add condition, escolha Key pressed e em Key 
escolha Right, depois clique em OK, figura 12.
Figura 12 – Adicionando um evento de teclado
Agora clique em Add action e escolha Flip the object horizontally, selecione 
o Player e clique em OK.
Figura 13 - Adicionando o evento para a tecla right
15
UNIDADE Criando um Jogo de Plataforma para Internet
Repita o procedimento acima. Adicione um novo evento, agora para a tecla es-
querda (Left) e adicione a ação Flip the Object Horizontally. Dessa vez, selecione 
YES em Activate flipping. Desta forma, quando a tecla Left for pressionada, o 
Player será invertido horizontalmente.
Figura 14 – Adicionando o evento para a tecla left
Se você fez tudo certo, o editor de eventos deverá se parecer com o exibido na 
figura 15.
Figura 15 – Editor de eventos do player
Execute o jogo e veja como ficou nossa animação completa do personagem. 
Você conseguiu fazer a primeira parte do nosso jogo.
Movendo a Câmera com o Player
Nosso jogo está tomando forma e já conseguimos fazer o personagem mover-se 
pela plataforma, mas o jogo ainda está muito limitado uma vez que o nosso Player 
some da tela rapidamente e não temos controle sobre o restante da plataforma.
16
17
Para deixá-lo mais interessante, vamos adicionar mais um evento: uma câmera 
que irá seguir nosso Player pelo jogo e, assim, poderemos vê-lo percorrer toda a 
plataforma. Existem alguns tipos de câmera, mas vamos utilizar aquela que acom-
panha nosso Player na coordenada horizontal, pela plataforma. 
Adicione um novo evento e deixe a condição em branco. Clique em Add action 
e adicione Camera center X position, figura 16.
Figura 16 – Add Camera center X position
Como nosso Player move-se no eixo X, estamos configurando a câmera para 
acompanhar seu movimento nessa direção. Na tela à direita, selecione as opções 
conforme a figura 17 e clique em OK.
Figura 17 – Confi gurando a câmera
Importante!
A propriedade X do personagem deve ser em letra maiúscula. Diversos comando são 
sensíveis a isso, fi que atento.
Importante!
17
UNIDADE Criando um Jogo de Plataforma para Internet
O evento da câmera configurado deve ser igual ao exibido na figura 18.
Figura 18 – Editor de eventos com a câmera
Nas alterações que fizemos, estamos dizendo para nossa câmera seguir o Player 
no eixo X (Player.X()). Antes de testarmos o jogo, vamos ampliar a plataforma, 
fazendo-a sair da cena, figura 19.
Figura 19 – Plataforma ampliada
Clique em executar e veja que a câmera acompanha o movimento do Player e, 
assim, podemos construir uma plataforma maior e mais cheia de desafios para que 
nosso jogo se torne mais interessante.
18
19
Montando o Background do Jogo
Chegamos a um ponto importante no desenvolvimento do jogo!! Iniciaremos a 
construção do background, adicionando alguns elementos de modo a deixar nossa 
plataforma mais simpática e desafiadora. Nesta parte, além do “plano de fundo”, 
vamos posicionar os elementos e peças na plataforma já pensando na jogabilidade! 
Utilizaremos os elementos exibidos na figura 20 disponíveis na pasta Objects.
Figura 20 – Objetos utilizados no cenário
Vamos começar pelo “plano de fundo” da tela. Adicione um novo Object – 
Tiled Sprite e selecione a imagem BG.png, figura 21.
Figura 21 – Plano de fundo BG
19
UNIDADE Criando um Jogo de Plataforma para Internet
Renomeie para Background e crie uma instância na cena. Clique e arraste 
de modo a fazer com que ela cubra toda a área do jogo. Perceba que a imagem 
cobriu os elementos que estavam na cena!!!, figura 22.
Figura 22 – Background do jogo
Não se preocupe. Vá em Properties e mude Z-Order para -2, figura 23. Repo-
sicione o fundo na cena e estenda-o o máximo que puder. Nossa plataforma será 
longa e não queremos que nenhum ponto fique sem fundo. Se precisar, aumente 
ou diminua o campo de visualização, pressione CTRL e as teclas + ou – do teclado 
numérico ou então o Scroll do mouse.
Figura 23 – Z order do background
O Z Order controla a ordem de exibição do elemento ao longo do eixo Z, que 
é perpendicular ao plano da tela. Quanto maior o seu valor, mais alto é o nível de 
exibição do elemento na tela. Usamos o valor -2, pois queremos que a imagem fi-
que bem ao fundo da tela e não interfira na visualização dos demais componentes. 
20
21
Se você clicar sobre o Player, vai notar que o Z Order dele é 1. Assim, todos 
os elementos que serão colocados no fundo da tela deverão ter um valor menor 
do que 1.
Vamos criar seis objetos estáticos do tipo Sprite e adicionar as imagens (pasta 
Objects) sugeridas no início da Unidade. Aproveite e renomeie tudo conforme o 
nome do arquivo.
Essa etapa de criação de mais objetos deve ter o resultado exibido na figura 24.
Figura 24 – Objetos do jogo
Agora vamos adicionar todos à cena, à exceção do BridgeLogs que será uma 
plataforma móvel que adicionaremos futuramente. Vamos começar pelos elemen-
tos que ficarão ao fundo: Cactus e Grass. Crie instâncias deles na cena e posicio-
ne ao longo da plataforma. Uma vez na cena, pressione a tecla CTRL e arraste o 
objeto para criar uma nova instância. Por enquanto deve ficar algo parecido com 
o exibido na figura 25.
Figura 25 – Adicionando objetos na cena (cactos e gramas)
21
UNIDADE Criando um Jogo de Plataforma para Internet
Vamos aumentar a plataforma e colocar uma StoneBlock, um campo de espi-
nhos com Spikes e algumas pontes, figura 26.
Figura 26 – Adicionando objetos no jogo (pedras, espinhos, etc.)
Perceba que os objetos recém adicionados parecem não se comportar como deve-
riam. Vamos adicionar um comportamento para eles!!! Edite o objeto Bridge, clique 
em Behaviors e adicione Platform. Na tela seguinte, em Type escolha Jumpthru 
platform e clique em Apply, figura 27.
Figura 27 – Adicionando comportamento as pontes
Faça o teste e veja se funcionou!! Neste ponto, o personagem deve conseguir 
subir nessas pontes. Vamos aumentar o “poder de salto” do Player. Clique sobre o 
Player e selecione Edit Object. Em Behavior, mude o valor do Jump speed para 
800. Com isso, vamos conseguir posicionar a ponte um pouco mais alto e, ainda 
assim, o Player conseguirá alcançá-la no salto, figura 28.
22
23
Figura 28 – Jump Speed
Observe na figura 28 que temos várias outras propriedades que poderão ser 
alteradas e testadas, como aceleração, gravidade e muito mais.
Para encerrarmos esta parte, vamos acionar um comportamento para o 
BlockStone. Clique em Edit Object, em Behavior adicione Platform e clique 
em Apply. Teste e veja como ficou nosso jogo até aqui.
Coletando Moedas e Exibindo a Pontuação
Nosso jogo está bem adiantado, mas, por enquanto, não há muito o que fazer 
a não ser percorrer a plataforma. Vamos adicionar alguns objetos para serem co-
letados e criar um Score para deixar o jogo mais interessante. 
Adicione um novo objeto Sprite e escolha a imagem coinGold.png. Renomeie 
para Coin e crie algumas instâncias dela na cena do jogo, figura 29.
Figura 29 – Adicionando moedas
23
UNIDADE Criando um Jogo de Plataforma para Internet
Agora, precisamos adicionar um evento às moedas para que seja detectada a 
colisão com o Player. Adicione um novo evento e uma condição. Vamos escolher 
testar a colisão entre o primeiro objeto (Player) e o segundo objeto (Coin), figura 30.
Figura 30 – Adicionando colisão entre dois objetos
Vamos adicionar duas ações. Primeiro teremos que excluir a moeda da cena. 
Escolha Delete an object (figura 31) e selecione Coin. Clique em OK e faça o teste.
Figura 31 – Excluindo um objeto
Adicione uma nova ação ao evento. Selecione Play a sound e escolha o arquivo 
CoinExplosion.mp3 dentro da pasta Audio, figura 32.
Figura 32 – Adicionando som na colisão
24
25
Até esta parte, nosso editor de eventos estará parecido com o exibido na figura 33.
Figura 33 – Editor de eventos (evento de colisão)
Importante!
Caso não apareça a opçãopara escolher um arquivo de áudio, feche e abra a 
GDevelop novamente.
Importante!
Mudando o Score com Variáveis
Vamos à parte onde teremos que adicionar a pontuação toda vez que uma mo-
eda for coletada. Para isso, vamos utilizar variáveis, que são espaços na memória 
reservados para guardar informações. 
No evento que detecta a colisão entre o Player e a moeda, adicione uma nova 
ação e selecione Value of variable (1). Para cada moeda, vamos adicionar (2) 20 
pontos (3) à variável Score (4), figura 34.
Figura 34 – Variável de score
25
UNIDADE Criando um Jogo de Plataforma para Internet
O editor de eventos deve ficar igual ao da figura 35.
Figura 35 – Evento de colisão com pontuação
Precisamos de um Object tipo texto para exibir nosso Score. Adicione um novo 
Object e configure as propriedades como exibido na figura 36.
Figura 36 – Objeto de texto para o score
Você pode escolher outra cor ou tamanho de fonte. Vamos testar com esses 
parâmetros!! Renomeie para Score, coloque-o na cena e faça o teste. Observe 
que o Score não acompanha o Player. Vamos corrigir isso adicionando um novo 
layer (camada). Abra o painel editor de layers (figura 37) e clique no sinal de + 
para adicionar um novo layer. Renomeie para UI (User Interface) e feche o pai-
nel, figura 37.
Figura 37 – Painel de camadas
26
27
Na cena, selecione o Score e em Properties mude o layer para UI, figura 38.
Figura 38 – Confi gurando a camada de um objeto
Tudo quase pronto, só precisamos adicionar um evento para que o Score seja al-
terado para cada moeda coletada. Adicione um novo evento vazio e em Add action, 
selecione Modify the text e configure conforme figura 39.
Figura 39 – Confi gurando a pontuação
Encerramos mais um bloco do jogo. Faça os testes necessários e vamos para a 
parte final!
Defi nindo os Inimigos
Chegou o momento de finalizarmos a parte básica do jogo! Vamos definir agora 
os inimigos que farão parte do nosso jogo. Crie um novo Object Sprite, adicione as 
imagens exibidas na figura 40, essas imagens estão na pasta Enemies. Renomeie 
para Enemy. 
Figura 40 – Inimigo do jogo
27
UNIDADE Criando um Jogo de Plataforma para Internet
Habilite a função Loop e configure o tempo para 0.4 s, figura 41. 
Figura 41 – Animação do inimigo
Se criarmos uma instância do inimigo na cena, ele ficará parado e o jogo não 
terá a dinâmica esperada. Vamos adicionar inteligência artificial ao nosso inimi-
go. A ideia é simples: vamos fazê-lo mover-se de um ponto para outro por meio 
de colisões.
Antes disso, vamos criar uma variável para o objeto Enemy e chamá-la de 
“direction”. Clique sobre nosso inimigo na cena e em Properties, selecione Edit 
Variables(0). Na próxima tela, clique em add a variable e digite as informações 
como exibido na figura 42.
Figura 42 – Variável do inimigo
Agora, vamos adicionar dois Sprites que serão os elementos de colisão: left e 
right. Eles estão na pasta Objects. Renomeie para Left e Right, respectivamente, 
figura 43. 
Figura 43 – Objetos de colisão (inimigo)
28
29
Criaremos uma instância para cada elemento de colisão e para o inimigo na 
cena, figura 44.
Figura 44 – Objetos de colisão do inimigo
Adicionaremos dois eventos para detectar a colisão entre o inimigo e os elemen-
tos (left e right), figura 45. 
Figura 45 – Eventos do inimigo
As ações associadas a cada evento vão alterar o valor da variável direction que 
foi criada:
• left para quando o inimigo colidir com a seta para a esquerda;
• right para quando o inimigo colidir com a seta para a direita.
Configure as ações dos dois eventos conforme exibido na figura 46.
Figura 46 – Confi gurando os eventos do inimigo
29
UNIDADE Criando um Jogo de Plataforma para Internet
Sua tela de eventos para o inimigo deve ser igual a exibida na figura 47.
Figura 47 – Eventos finalizados para o inimigo
Vamos adicionar mais dois eventos para movermos o inimigo entre os dois pon-
tos de colisão criados. Para cada evento, escolha Text of na object’s variable e 
configure conforme exibido na figura 48.
Figura 48 – Eventos para movimentar o inimigo
Ficaremos com os dois eventos conforme exibido na figura 49.
Figura 49 – Eventos do inimigo
Adicione uma ação (Add a force (angle)) para cada evento, fazendo com que o 
inimigo passe a se mover na plataforma, veja as configurações na figura 50, o pri-
meiro é referente ao evento right e o segundo ao evento left. 
30
31
Figura 50 – Confi gurando o movimento do inimigo
Observe quando você testar, pois está faltando configurar o “flip horizontally” 
para que o movimento de volta do inimigo fique mais natural. O procedimento é 
igual ao que fizemos para o Player. Adicione duas novas ações aos eventos que 
criamos para fazer o flip e nosso resultado deve ser igual ao exibido na figura 51.
Figura 51 – Flip do inimigo
Você consegue explicar a lógica utilizada para esta animação?
Ex
pl
or
Caso surja alguma dúvida, reveja a animação do Player. Estamos quase aca-
bando. Falta apenas criar os eventos para que o Player possa matar o inimigo. 
Vamos adicionar duas condições: primeiro veremos se houve colisão entre o 
Player e o inimigo e depois se o Player pulou sobre o inimigo, figura 52.
31
UNIDADE Criando um Jogo de Plataforma para Internet
Figura 52 – Colisão do player e o inimigo
Se as condições forem satisfeitas, vamos excluir o inimigo da cena, adicionando 
uma ação para isso, figura 53.
Figura 53 – Excluindo o inimigo
Funciona bem, mas a ação do Player ficou pouco estática. Para melhorarmos 
isso, vamos fazer o Player saltar novamente após eliminar nosso inimigo. Adicio-
ne mais duas ações: (1) vamos permitir que o Player salte novamente e (2) vamos 
forçar um salto, figura 54.
Figura 54 – Simulando um salto
32
33
Para finalizar esta parte, vamos esconder os elementos de colisão. Adicione uma 
nova condição e escolha At the beginning of the scene, ou seja, quando o jogo co-
meçar, faça alguma coisa, figura 55.
Figura 55 – Ocultando objetos
Em ações, escolha Hide para esconder os elementos, faça isso para os dois ob-
jetos, left e right, figura 56.
Figura 56 – Opção hide object
Para deixar o jogo mais organizado, movemos a condição recém-criadas para o 
topo do editor de eventos. Basta clicar e arrastar, figura 57.
33
UNIDADE Criando um Jogo de Plataforma para Internet
Figura 57 – Organizando nosso editor de eventos
Faça o teste e, se tudo estivar funcionando como previsto, finalizamos mais um 
bloco do nosso jogo. Na última parte desta Unidade vamos adicionar mais algumas 
funcionalidades para deixarmos nosso jogo ainda mais completo e interessante!
Finalizando o Jogo
Chegamos à parte final do jogo!!! Vamos adicionar alguns elementos para dei-
xarmos nosso jogo um pouco mais completo.
Ponte Móvel
Comecemos com a ampliação da plataforma. Agora o campo de espinhos ficou 
maior e colocamos uma barreira de pedras, assim nosso personagem não conse-
gue saltar para o outro lado, figura 58.
Figura 58 – Cena do jogo
34
35
Para ajudá-lo a subir nas pedras do final da cena, vamos adicionar uma ponte 
móvel utilizando os mesmos conceitos que vimos na criação da animação dos inimi-
gos. Para isso, adicione os dois pontos de colisão (Left e Right) e posicione a ponte 
móvel (BridgeLogos) entre os dois. Veja a figura 59.
Figura 59 – Pontos de colisão da ponte móvel
Para a ponte mover-se de um lado para outro, primeiro vamos adicionar uma 
variável “direction” a ela, selecionando-a na cena e clicando em Properties -> 
Edit Variables (0). Na tela que surge, adicionamos uma nova variável com o 
valor inicial “left”, figura 60.
Figura 60 – Variável left da ponte
Após configurar tudo, clique em Apply e vamos para aos eventos. Assim como 
fizemos anteriormente, primeiro necessitamos detectar a colisão entre a ponte e 
os elementos delimitadores. Para isso, insira dois eventos e, na condição, selecione 
Collision. Agora, vamos testar as colisões com o elemento Left e depois com o 
Right, figura 61.
35
UNIDADE Criando um Jogo de Plataformapara Internet
Figura 61 – Colisão da ponte com os delimitadores
Quando detectamos a colisão, alteramos o valor inicial da variável “direction”, 
conforme o elemento com o qual a ponte colidiu. Vamos adicionar uma ação para 
cada evento. Clique em Add action e adicione uma ação para mudar o valor da 
variável (Modify the text of a variable of na object), figura 62.
Figura 62 – Ações de colisão da ponte
Pronto! Agora vamos adicionar uma Força à BridgeLogs para a esquerda ou di-
reita, de acordo com o valor da variável “direction”. Adicione dois novos eventos 
na condição configure Text of na object’s variable. Faça isso com o valor para 
a direita e depois para a esquerda, sua área de eventos deve se parecer com a da 
figura 63.
Figura 63 – Eventos de colisão da ponte
36
37
As ações que vamos adicionar vão “empurar” a ponte de um lado para outro. 
Clique em add action -> Add Force (angle) e configure da seguinte forma:
• quando direction = left: a força terá um ângulo de 180 e velocidade de 100.
• quando direction = right: a força terá um ângulo de 0 e velocidade de 100.
Veja o resultado dessas etapas na figura 64.
Figura 64 – Alterando o ângulo da ponte
Execute o jogo e veja que agora a ponte move-se de um lado para o outro. 
Certifique-se de que você configurou o Behavior da BridgeLogs para Platform -> 
Jumpthru platform. Caso contrário, nosso personagem irá cair nos espinho!!!. 
Se isso acontecer, configure agora esse comportamento para a BridgeLogs con-
forme figura 65.
Figura 65 – Comportamento da ponte
Aproveite que você estendeu a plataforma e adicione mais moedas e inimigos. 
Basta selecionar o objeto na cena e, pressinando a tecla CTRL, arrastar para a 
posição desejada.
Personagem Imortal!
Até esse momento do jogo, nosso personagem parece imortal. Precisamos 
configurar as colisões do Player com o inimigo e com o campo de espinhos. 
Dependendo de como o jogo foi pensado, podemos reiniciar o jogo, terminar 
o jogo ou trabalhar com o conceito de vidas. Para simplificarmos a ideia, vamos 
optar por terminar o jogo quando houver a colisão.
Adicione dois novos eventos: um para detectar a colisão com o inimigo e outro 
com o campo de espinhos, figura 66.
Figura 66 – Eventos de colisão do Player
37
UNIDADE Criando um Jogo de Plataforma para Internet
As ações vão determinar o comportamento do jogo a partir das colisões. 
Vamos começar excluindo o Player do jogo, adicionado uma ação para isso 
em cada evento criado, figura 67.
Figura 67 – Ações da colisão do Player
Agora, quando o Player é tocado pelo inimigo ou pelo campo de espinhos, ele 
é excluido da cena e o jogo volta para o início da plataforma. Podemos melhorar 
o efeito de fim de jogo adicionando um áudio. Clique em add action e escolha 
Play a sound. Em Audio escolha GameOver.mp3 e clique em OK, figura 68. 
Faça isso para os dois eventos.
Figura 68 – Tocando o som de game over
Vamos exibir uma mensagem na tela também. Crie um novo objeto do tipo Sprite 
e escolha a imagem GameOver. Renomeie para GameOver e crie uma instância no 
início da cena, figura 69.
Figura 69 – Mensagem de game over
38
39
Adicione no evento At the beginning of the scene, a ação para esconder a 
mensagem game over, figura 70.
Figura 70 – Escondendo a mensagem de game over
Para tornar o objeto visivel, adione mais uma ação na colisão do Player com o 
inimigo ou os espinhos, para que a mensagem fique visivel novamente. Clique em 
add action -> Show, figura 71.
Figura 71 – Tornando o player visível
Teste o jogo e veja como ficou! 
Com isso, terminamos a essa unidade. Agora caberá a você explorar os diver-
sos recursos do GDevelop e adicionar novas funções ao nosso jogo para que ele 
fique mais interessante e desafiador. Por fim, Parabéns, você criou seu primeiro 
jogo de plataforma no GDevelop.
39
UNIDADE Criando um Jogo de Plataforma para Internet
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
GDevelop 5
Documentação do GDevelop 5.
https://goo.gl/saVo55
GDevelop 4
Documentação do GDevelop 4.
https://goo.gl/qJne2k
Indústria de Jogos
Artigos no Indústria de Jogos.
https://goo.gl/M92kwG
GDevelop Tutorials
Tutoriais Gdevelop 4.
https://goo.gl/yacPWE
40
41
Referências
BUCHARD, E. The Web Game Developer’s Cookbook: Using JavaScript and 
HTML5 to Develop Games. Addison-Wesley, 2013.
DOCUMENTAÇÃO do GDevelop 4. Disponível em: <http://wiki.compilgames.
net/doku.php/start>. Acesso em 05/06/2018.
DOCUMENTAÇÃO do GDevelop 5. Disponível em: <http://wiki.compilgames.
net/doku.php/gdevelop5/start>. Acesso em 05/06/2018.
FORBELLONE, A. L. V.; EBERSPACHER, H. F. Logica de Programação: 
A Construção de Algoritmos e Estrutura de Dados. 3. ed. São Paulo: Pearson 
Prentice Hall, 2008. 
MEYER, Jeanine. O guia essencial do html5: usando jogos para aprender HTML5 
e Javascript. Rio de Janeiro: Ciência Moderna, 2011.
SCHELL, J. A Arte de Game Design: O Livro Original. São Paulo: Campus, 2011.
41