Desenvolvimento de jogos para internet III

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Conteudista: Prof. Dr. Rafael Martins
Revisão Técnica: Prof. Dr. Rafael Martins 
Revisão Textual: Prof.ª Dra. Selma Aparecida Cesarin
 
Objetivos da Unidade:
Demonstrar o uso da ferramenta Cocos Creator;
Criar um jogo na ferramenta selecionada.
˨ Contextualização
˨ Material Teórico
˨ Material Complementar
˨ Referências
Criando um Jogo de Plataforma para Internet
Você deve conhecer e até já ter jogado o jogo Super Mario Bros., certo? 
Esse tipo de jogo é classificado como Jogo de Plataforma, e existem diversos jogos semelhantes
ao Super Mario Bros, igualmente de sucesso ou não. 
Esse tipo de jogo é um dos mais básicos para 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 anteriormente referentes
ao GDevelop para criarmos um Jogo de Plataforma e, 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(a)?
1 / 4
˨ Contextualização
Introdução
Agora que nós já conhecemos um pouco das características do Cocos Creator e como trabalhar
com os conceitos de objetos, eventos e animações, vamos iniciar a criação de um jogo simples
de plataforma.
Clique no botão para conferir o conteúdo.
ACESSE
2 / 4
˨ Material Teórico
Site 
OpenGameArt.org 
Você poderá encontrar exemplos de personagens ou elementos de
jogos no site a seguir.
https://opengameart.org/
Um Jogo de Plataforma é um gênero de jogo eletrônico que surgiu no início dos anos 1980, 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 floresta e nosso personagem deverá
coletar itens 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 personagem:
Figura 1 – Personagem do jogo
Anteriormente, já foi configurado o ambiente de desenvolvimento, adicionando um novo
projeto, definindo sua resolução, adicionando um fundo (background), uma sprite que
representa a Plataforma (ground), o personagem principal (PurpleMonster) e um pouco de vida
para ele (movimentação de pula para cima e para baixo).
Para recordar, a Figura a seguir exibe o resultado do trabalho feito.
Figura 2 – Cena construída anteriormente 
Fonte: Acervo do Conteudista
Um artefato não mencionado anteriormente é o painel de depuração (Debug) que é exibido na
versão de desenvolvimento do jogo na Cocos Creator. 
Esse painel é útil pois exibe informações cruciais para o desenvolvedor, principalmente, na área
de otimização. 
No Painel, temos informações como Framerate (FPS), Draw Call (quantidade de chamadas nas
funções de desenho), quantidade de instâncias na memória, processamento de triângulos e
física, entre outros. 
Como essa parte do jogo está pronta, devemos nos aprofundar em outras áreas para que o jogo
possa ganhar corpo. 
Caso você ainda tenha alguma dúvida ou dificuldade, revise as demais Unidades. 
Personagem e Câmera
Nosso jogo está tomando forma e já conseguimos fazer o personagem pular pela Plataforma,
mas ainda não temos controle sobre ele e suas ações dentro do Jogo.
Para deixá-lo mais interessante, vamos adicionar mais um evento: controlar nosso personagem
de forma horizontal na Plataforma, de modo que ele consiga percorrer o nível.
Para controlar o personagem, adicionaremos o suporte ao teclado, utilizando as teclas “A” e
“D”, conhecidas também por guiarem os personagens em jogos Web ou PC (teclas padrão
utilizadas na Indústria).
As funções onKeyUp e onKeyDown controlam os eventos de teclado e são incluídas no contexto
do jogo com possíveis ações baseadas nessas teclas.
Primeiramente, devem ser criadas as variáveis accLeft e accRight, que são flags (variáveis de
checagem) para a aceleração para esquerda e para a direita, respectivamente:
Figura 3 – Flags para checar aceleração horizontal
Fonte: Acervo do Conteudista
Não se deve alterar a câmera nesse contexto, vez que nosso objetivo é movimentar o
personagem no eixo X. 
Com as variáveis de controle definidas, podemos escrever o Código para a movimentação do
personagem, utilizando o teclado. 
Antes de entrarmos no Código de movimentação, precisamos criar a propriedade xSpeed, que
controla a velocidade do personagem no eixo X. 
Além disso, duas chamadas são necessárias para garantir que o sistema de eventos da Cocos
Creator registre as teclas digitadas pelos jogadores.
Figura 4 – Inicialização das variáveis e listeners no método
onLoad() 
Fonte: Acervo do Conteudista
Em seguida, devem ser implementados os métodos de evento onKeyUp e onKeyDown. 
Saiba Mais 
Desde a versão 3.0 da Cocos Creator e a mudança para TypeScript,
diversas terminologias das APIs foram alteradas. Consulte o manual da
Cocos Creator disponível na seção de Materiais Complementares para
saber mais.
Nesses métodos, vamos habilitar as flags de aceleração quando o jogador pressionar a tecla, e
desabilitá-las quando ele soltar a tecla. 
Futuramente, vamos alterar a função de Update() do jogo e realizar ações baseadas nos estados
das flags.
Figura 5 – Métodos para registrar os eventos de pressionar
e soltar as teclas de controle 
Fonte: Acervo do Conteudista
Nota-se que os eventos de registro de entrada e saída funcionam de forma similar em outras
Plataformas.
Em uma Plataforma como Android, pode-se utilizar os métodos para registrar eventos em
cliques de botão ou toques na tela (assim como na Plataforma iOS).
Por fim, deve-se atualizar a função de Update(), responsável por controlar o loop principal da
nossa entidade Player. 
Para isso, vamos checar primeiro para qual direção o jogador está indo. Então, deve-se
multiplicar a aceleração atual pelo tempo em segundos naquele exato quadro (frame). 
Em seguida, vamos restringir a movimentação do personagem utilizando seu valor absoluto, e
não deixaremos que a velocidade exceda esse valor. 
Por fim, atualiza-se a posição atual do personagem:
Figura 6 – Update do personagem 
Fonte: Acervo do Conteudista
Com essa implementação, temos a base do jogador para realizar ações, como andar no cenário e
pular (além de espaço para novas implementações e testes dos alunos). 
Em seguida, veremos como adicionar elementos na fase e a implementação de mais ações.
Adicionando Elementos ao Jogo
No nosso projeto, devemos incluir, agora, novos elementos, de modo que o jogo apresente
algum desafio.
Deve-se incluir, nessa seção, elementos como inimigos, coletáveis, pontuação, efeitos sonoros
e alguns elementos de polimento, para melhorar a experiência do jogador.
Adicionando as Estrelas e o Script Game
As estrelas são os itens coletáveis do jogo, ou seja, nosso jogador precisa coletá-las para
aumentar a pontuação.
Na mecânica do jogo, as estrelas aparecem continuamente em pontos aleatórios e desaparecem
após colidirem com o jogador, elevando a pontuação.
Como descrito na Unidade anterior, deve-se utilizar o componente Prefab, pois ele atua como
objeto de suporte para estruturas que são criadas continuamente, utilizando a memória de
forma eficiente.
Para começar, devemos utilizar a sprite star.png, localizada na pasta “assets/textures”.
Vamos arrastar a sprite star.png para a hierarquia da cena, apenas para adicionar o script que
deve gerenciar seu comportamento.
Depois da criação do Prefab, podemos deletar da hierarquia, não sendo necessário mantê-lo na
cena e nem alterar propriedades de transformação. 
Para criar o script, deve-se seguir a rota: clicar com botão direito na pasta scripts → Create →
TypeScript → New Component e nomear para Star. 
Em seguida, na aba Properties, vamos adicionar o script Star para herdar o
comportamento que
desejamos para o prefab. 
Por hora, o script Star deve apenas guardar uma variável para o raio, como exibe a imagem a
seguir:
Figura 7 – Criação do script Star 
Fonte: Acervo do Conteudista
Na aba de propriedades, vamos adicionar o valor de 60 a variável pickRadius. 
O próximo passo é arrastar o objeto star para a pasta Assets e deletar da hierarquia. Dessa forma,
o Prefab é criado. 
Antes disso, vale checar a estrutura final do nosso prefab, como demonstra a imagem a seguir:
Figura 8 – Propriedades do Prefab Star 
Fonte: Acervo do Conteudista
O próximo passo é adicionar um script para o jogo (Game), criando referências dos nossos
elementos de jogo e possibilitando a geração de estrelas de forma dinâmica. 
Da mesma forma como criamos os scripts anteriores, vamos criar um script chamado Game. 
Esse script será nosso gerenciador, e fará o controle dos objetos essenciais para o ciclo de vida
do nosso jogo, como iniciar a partida, controlar a pontuação e checar as condições de vitória e
derrota. 
Vamos adicionar a referência dos nossos objetos principais, de modo que possamos iniciar a
geração das estrelas no cenário.
Para isso, devem ser adicionadas as propriedades de Plataforma (ground), estrela (starPrefab) e
jogador (Player), assim como variáveis para controlar as durações mínimas e máximas das
estrelas na tela.
Figura 9 – Referências para os objetos principais do jogo 
Fonte: Acervo do Conteudista
Os elementos do jogo são declarados propriedades (@property) para que possamos acessá-los
via editor no componente que guarda o script Game. 
Primeiramente, vamos adicionar o script Game no Canvas, dentro da hierarquia. 
O próximo passo é arrastar os objetos ground, star e Player para as propriedades expostas no
script e, por fim, determinar o valor das variáveis minStarDuration e maxStarDuration para 3 e 5,
respectivamente.
Figura 10 – Script Game.ts adicionado como componente
do Canvas 
Fonte: Acervo do Conteudista
Finalmente, vamos gerar as estrelas em posições dinâmicas. 
Vamos definir uma coordenada no eixo Y para o chão (ground), que funciona como ponto de
âncora para determinarmos onde está localizada sua altura.
Como a âncora está localizada no centro da imagem, adicionamos, na altura, metade do valor da
altura da imagem.
Em seguida, criaremos duas funções: (1) spawnNewStar(), para instanciar os prefabs de estrela e
(2) getNewStarPosition(), para definir as posições aleatórias dentro das chamadas de criação de
estrelas no primeiro método.
Utilizamos o método getComponent para recuperar o script de referência do Player e invocarmos
suas funções.
Ao clicar no botão Preview do editor da Cocos Creator, o resultado exibirá uma estrela gerada em
uma posição aleatória.
Coletando Estrelas
Nosso personagem, agora precisa coletar as estrelas que aparecem em posições aleatórias no
Canvas. 
Para isso, é necessário calcular a distância do personagem e das estrelas e, assim, fazê-las
desaparecer. 
Saiba Mais 
O método getComponent da Cocos Creator funciona de forma similar ao
método GetComponent da Engine Unity.
Para conseguir esse efeito, deve-se obter uma referência do componente Player e salvar a
referência do jogo no componente de estrela (Star). 
Quando coletamos uma estrela, precisamos destruí-la do Canvas e criar uma nova instância para
que ela seja gerada em uma posição aleatória. 
O método getPosition() retorna à posição do Node (um vetor de 2 dimensões). 
Se a distância é menor do que a distância determinada pelo raio (variável pickRadius), então, o
código dentro da função Update é executado.
Para descrever esse comportamento, utilizamos o código a seguir, implementado no arquivo
Star.ts:
Figura 11 – Implementação da distância e coleta da estrela 
Fonte: Acervo do Conteudista
Pontuação
Precisamos adicionar um elemento que atenda às condições de vitória do jogo (ou simplesmente
um feedback positivo), do contrário, não faz sentido nosso personagem apenas navegar pelo
cenário e observar estrelas aparecendo. 
Para contemplar essa mecânica, vamos adicionar o elemento de pontuação, um dos artefatos
mais básicos desde que os Jogos Digitais existem.
Para adicionar a pontuação, vamos precisar de um componente de texto.
Na Cocos Creator, esse componente é o Label e, assim como outros componentes de interface,
também é um Node.
Na hierarquia (Node Tree), clique com o botão direito em Canvas e faça a rota Create → UI
Component → Rich Text (ou se pode utilizar 2D Object – Label).
Isso fará com que um Label seja adicionado na hierarquia. Renomeie o Label para score e o
posicione na tela, em uma região fora de onde ocorre a interação do personagem com as
estrelas.
Figura 12 – Adicionando Label score 
Fonte: Acervo do Conteudista
Nosso objetivo agora é computar as estrelas coletadas e adicionar a pontuação no componente
de texto criado. 
Para isso, vamos criar uma variável do tipo UIComponent.RichText e, em seguida, criar e
inicializar uma variável score = 0, e criar um método para incrementar e atualizar essa pontuação
a cada estrela coletada (Figura a seguir):
Figura 13 – Atualizando pontuação 
Fonte: Acervo do Conteudista
Também devemos invocar a pontuação da classe Star, logo após a geração de uma nova estrela
(Figura a seguir):
Figura 14 – Chamando o método de atualização de
pontuação 
Fonte: Acervo do Conteudista
Para finalizarmos o mecanismo da regra de pontuação, precisamos adicionar uma condição de
derrota.
Do contrário, o personagem coletará estrelas infinitamente, o que pode tornar o jogo monótono
ou sem desafios. 
Na classe Game, vamos adicionar uma lógica para fazer com que as estrelas só fiquem visíveis
por um determinado tempo, forçando o jogador a mover o personagem de forma mais ágil. 
Figura 15 – Lógica final de geração de estrelas 
Fonte: Acervo do Conteudista
Declaramos variáveis para um acumulador de tempo (timer) e a duração da estrela
(starDuration).
Inicializamos com 0 as variáveis para começar a contagem no método Update().
Em seguida, no final do método spawnNewStar(), adicionamos uma lógica para gerar um tempo
aleatório para cada estrela gerada.
No método Update(), adicionamos a lógica de derrota, que consiste em comparar o tempo
acumulado com o tempo de duração da estrela atual.
No caso de o tempo ser menor do que a duração da estrela, invocamos o método gameOver(),
que encerra o jogo atual e inicia um novo.
Por fim, o método de gameOver() encerra as ações do personagem, no caso, sua função de pulo
(jump/tween).
Efeitos Sonoros
Como parte essencial de um projeto de jogo, a inclusão de música e dos efeitos sonoros se faz
necessária, tendo em vista incluir feedbacks e mecanismos em que o jogador fique mais imerso
na experiência. 
Em nosso projeto, vamos adicionar alguns efeitos sonoros, utilizando componentes de áudio da
Cocos Creator.
O componente que vamos utilizar é o AudioSource, que faz parte da engine de áudio da Cocos
Creator. 
O AudioSource é responsável pelos controles básicos para reproduzirmos um arquivo sonoro,
como tocar, pausar, resumir e parar, e esse arquivo é representado por um elemento chamado
AudioClip.
O primeiro passo é selecionar, na hierarquia (Node Tree), o objeto Canvas e adicionar um
componente AudioSource.
Criado o componente, devemos arrastar o arquivo “assets/audio/score.mp3” para o componente
Clip¸ nas propriedades do nosso objeto Canvas/AudioSource, como exibido na imagem a seguir:
Figura 16 – Adicionando um arquivo sonoro ao AudioSource 
Fonte: Acervo do Conteudista
Para tocarmos o arquivo sonoro selecionado, basta adicionarmos uma chamada utilizando a
função getComponent(AudioSource).play() para reproduzir o efeito no método gainScore(),
utilizado para incrementar a pontuação:
Figura 17 – Chamando método Play() da AudioSource 
Fonte: Acervo do Conteudista
O mesmo procedimento pode ser realizado para executarmos o efeito sonoro de pulo para o
personagem. 
E vamos realizar, ainda,
o mesmo procedimento para o objeto Player na hierarquia. 
Saiba Mais 
Você pode explorar as funcionalidades do componente AudioSource,
habilitando loop, implementando efeitos e outras funcionalidades
disponíveis na documentação oficial da Cocos Creator, presente nos
Materiais Complementares.
Arrastar o arquivo “assets/audio/jump.mp3” para o AudioSource garante acesso à execução do
efeito sonoro para o pulo do personagem. 
Depois disso, devemos realizar a criação de um método para fazer a chamada da função play(),
utilizando a estrutura já criada anteriormente de Tween.
A vantagem de usar o componente Tween é a possibilidade de adicionar sequências de ações,
não só visuais, mas também outras chamadas e callbacks implementadas para o objeto em
questão.
Figura 18 – AudioSource no objeto Player para execução do
efeito sonoro de pulo 
Fonte: Acervo do Conteudista
E, por fim, a implementação da chamada do som dentro do tween na classe Player.ts (Figura a
seguir):
Figura 19 – Implementação do efeito sonoro de pulo no
personagem 
Fonte: Acervo do Conteudista
Em Síntese 
Com isso, terminamos essa Unidade. Agora, caberá a você explorar os
diversos recursos da Cocos Creator 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 na engine Cocos
Creator. 
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
  Livros  
Let’s Build a Multiplayer Phaser Game 
LODRIGUEZ, O. Let’s Build a Multiplayer Phaser game. [s.l.]: APress, 2016.
  Vídeo  
Cocos Creator for Beginners – Part One 
3 / 4
˨ Material Complementar
Cocos Creator For Beginners - Part One
https://www.youtube.com/watch?v=JSOXYPqZ1-8
  Leitura  
Cocos Creator 3.6 User Manual
Clique no botão para conferir o conteúdo.
ACESSE
Quick Start: Making your First Game
Clique no botão para conferir o conteúdo.
ACESSE
https://docs.cocos.com/creator/manual/en/
https://docs.cocos.com/creator/manual/en/getting-started/first-game/
BUCHARD, E. The web game developer’s cookbook: using JavaScript and HTML5 to develop games.
S.l.: Addison-Wesley, 2013.
FORBELLONE, A. L. V.; EBERSPACHER, H. F. Lógica de programação: a construção de algoritmos
e estrutura de dados. 3. ed. São Paulo: Pearson Prentice Hall, 2008. 
MEYER, J. 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.
4 / 4
˨ Referências