Desenviolvimento de jogos para internet II

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

Conteudista: Prof. Dr. Rafael Martins
Revisão Textual: Esp. Jessica Dante
 
Objetivos da Unidade:
Apresentar os conceitos básicos da ferramenta Cocos Creator;
Demonstrar os princípios básicos de uso da ferramenta com a implementação de
um jogo parcial.
˨ Contextualização
˨ Material Teórico
˨ Material Complementar
˨ Referências
Cocos Creator
Imagino que você já deve ter jogado diversos tipos de jogos, como Mario Bros, Street Fighter,
CandyCrush e diversos outros títulos. Hoje em dia, é bem comum os jogos massivos online, como
League of Legends, Heroes of the Storm etc.
O fato é que existe uma lista bastante grande de títulos de jogos com diferentes classificações ou
gêneros, como jogos de tiros, estratégia, plataforma e casuais, entre outros. 
Pense nos jogos que você já jogou. Você já se perguntou como eles são feitos? Acredito que você
já ficou curioso(a) para saber como os desenvolvedores fazem para que você consiga controlar
seu personagem na tela e para que ele interaja com os objetos do mundo do jogo, certo?
Nesta Unidade, iremos conhecer as funcionalidades da ferramenta Cocos Creator, para entender
seu funcionamento e para começar a desenvolver nossos jogos. 
Com o objetivo de demonstrar os recursos da Cocos Creator, iremos, juntos, desenvolver um
pequeno trecho de um jogo.
Neste ponto, já começaremos a fazer uso da Lógica de Programação, de modo que também
utilizaremos recursos do editor que nos auxiliarão a criar o jogo. Vamos ativar nosso modo
criativo e curioso agora, para começarmos nossos estudos.
1 / 4
˨ Contextualização
Introdução
A Cocos Creator é uma ferramenta gratuita para desenvolvimento de Jogos Multiplataforma de
código aberto, que permite a criação de jogos 2D, 2.5D e 3D. A Figura 2 exibe a interface da
ferramenta após a criação de um novo projeto.
Figura 1 
Fonte: Reprodução
2 / 4
˨ Material Teórico
Figura 2 – Interface da Cocos Creator 
Fonte: Reprodução
Todo projeto criado na Cocos Creator segue uma estrutura padrão. É comum notar uma
semelhança entre a interface da Unity e Cocos Creator. Alguns menus e artefatos têm exatamente
as mesmas características, inclusive, auxiliando na portabilidade entre as ferramentas.
Saiba Mais 
A Cocos Creator oferece um guia de equivalências para facilitar o
desenvolvimento de quem utiliza a game engine Unity. 
A estrutura de um projeto Cocos tem a seguinte característica:
A pasta “assets” contém os arquivos de elementos utilizados no jogo como cenas (Scenes),
scripts (Scripts), imagens (Sprites e Textures) e arquivos de áudio (Audio files). Já a pasta
“settings” contém artefatos globais do projeto como configurações de plug-ins, botões, física
etc. Por fim, as pastas privadas (“library”, “local”, “temp”) são utilizadas pela máquina local do
desenvolvedor, portanto não devem estar em repositórios de código ou estar em modo de
compartilhamento. 
Assim como outras abordagens de game engines, a Cocos Creator possui abas de hierarquia e de
inspeção (Hierarchy/Inspector). A aba de hierarquia gerencia as camadas de objetos que estão
inseridos e/ou relacionados com a cena. Esses objetos são chamados de Node, sendo dispostos
em camadas e exibidos na tela scene editor (tela principal da ferramenta).
Pasta raiz:
/assets
/library
/local
/settings
/temp
project.json
Figura 3 – Hierarquia do projeto  
Fonte: Reprodução
Ao clicar em um objeto (Node) na cena ou hierarquia, suas informações como atributos e
propriedades são exibidas na janela Inspector. Essa janela, como o próprio nome diz, inspeciona
o objeto e exibe os atributos ligados ao script padrão herdado no objeto. Dependendo da
visibilidade e do tipo do componente, é possível editar e até adicionar outros componentes, de
modo que isso impacte o resultado na tela de jogo.
Figura 4 – Janela de inspetor de propriedades do Node  
Fonte: Reprodução
Sob a ótica de análise do editor, temos um último e importante elemento que é a barra de
ferramentas (toolbar). A barra de ferramentas possui opções para manipulação de cena (editing
tool) como transformação, rotação, escala, entre outras. Do lado direito, a barra apresenta
controles para compilação e execução do projeto, assim como acesso remoto e informações
sobre dispositivos conectados.
Figura 5 – Barra de ferramenta da Cocos Creator 
Fonte: Reprodução
Cocos Creator: Conceitos Básicos
Nesta seção, iremos apresentar os recursos da ferramenta que podem ser usados para a criação
dos nossos jogos.
Mecanismos de Assets
Todo jogo criado a partir da Cocos Creator é composto por uma cena e objetos Node (exibidas
dentro de objetos), eventos (que controlam a lógica do jogo), comportamentos (Física e outros
componentes) e recursos audiovisuais (texturas, sprites, materiais, arquivos de áudio).
Na prática, quase tudo que é exibido na tela é um objeto: mísseis, heróis, planos de fundo, texto
ou qualquer outra coisa que você venha a escolher. Como você verá mais adiante, diferentes tipos
de objetos estão disponíveis na Cocos Creator e nos permitirão, por exemplo, exibir ações criadas
por objetos na tela de jogo.
Toda lógica do jogo é tratada por meio dos componentes e scripts, que são responsáveis por dar
vida a ele. Sempre que uma ou mais condições são satisfeitas dentro do script de um objeto, uma
ação ou um conjunto delas será executado; por exemplo, um objeto pode se mover, aparecer
e/ou mudar a sua direção.
O realismo do jogo é garantido por meio dos comportamentos dos objetos. Esses
comportamentos, se implementados de forma coerente, fazem com que os objetos atuem de
acordo com as leis da Física (simulando o mundo real).
Outro mecanismo presente na Cocos Creator e de grande importância para nossos jogos são as
cenas. As cenas compõem as diferentes telas do jogo, que podem representar um menu, um
nível do jogo, uma tela de opções ou a tela de game over, cada uma contendo um conjunto de
objetos e eventos. 
Figura 6 – Configurando nova cena 
Fonte: Reprodução
Como descrito anteriormente, a cena funciona como um container para objetos (Node) e outros
recursos que compõem a camada do jogo. Dentre as principais entidades, podem-se citar
texturas (Texture), atlas (Atlas), arquivos de fonte (Font), sistema de partículas (Particle System),
arquivos de música e efeitos sonoros (Audio) e um dos principais componentes, os
Prefabs (elementos com mecânica similar ao Prefab da Unity). 
O Prefab é utilizado para guardar objetos que podem ser reutilizados em uma cena. Ele contém
componentes e dados e sua instância pode armazenar tanto comportamento de um template
quanto ter um comportamento customizado. É possível arrastar o Prefab para a hierarquia ou
direto na cena, tornando-o apto a edição de dados e componentes. Como o Prefab é um objeto de
reutilização, sua utilização no jogo se dá através de programação. Alguns casos de uso de Prefab
podem ser criação de inimigos, projéteis, elementos de cenário, ou qualquer artefato que
necessita de repetição.
A Figura a seguir exibe o mecanismo de criação de um Prefab.
Figura 7 – Criação de Prefab 
Fonte: Reprodução
Como qualquer outro objeto da engine, ele é editável e permite a composição de novos
componentes. Como contextualizado anteriormente, todo objeto na aba de inspeção (Inspector)
possui a funcionalidade de adicionar ou remover componentes e especializar ainda mais um
comportamento. 
Figura 8 – Adicionar e remover componentes no Node 
Fonte: Reprodução
Mecanismos de Conteúdo
Como contextualizado anteriormente, as cenas são o elemento que serve de container para todos
os outros artefatos do jogo. Um jogo pode ter uma ou mais Scenes que podem representar os
vários níveis do jogo, telas de entrada e Game Over, entre outros. Uma boa prática para
desenvolvimento em qualquer engine é não abusar da sorte e querer colocar tudo em uma única
cena. 
Um dos mecanismos de conteúdo dentro das cenas é o Node (equivalente ao GameObject na
Unity) e possui diversas propriedades para manipulação dos
objetos na cena. Outras classes de
componentes estendem as funcionalidades de Node. Por exemplo, se o objetivo for adicionar
uma Sprite na tela, pode-se utilizar um Sprite Node, que contém um objeto Node, para
manipulação de posição, rotação, tamanho, cor e um Sprite Component, responsável por
renderizar uma imagem ou textura. 
Elementos de interface também possuem um Node, e propriedades como cor e opacidade podem
ser manipuladas diretamente na tela, como por exemplo, um botão, um texto, um grid ou
qualquer elemento de interface (UI). Para adicionar uma Sprite, basta clicar na setinha mais (‘+’)
já apresentada anteriormente, depois em Create Renderers e, por fim, Sprite. Na Figura a seguir,
vemos um exemplo de uma Sprite sendo manipulada no editor pelo componente Node.
Figura 9 – Sprite Node 
Fonte: Reprodução
Mecanismos de Interface e Animação
Dentre os mecanismos de interface e animação, destaca-se o Canvas, componente que gerencia
a resolução atual da tela do dispositivo e é responsável por renderizar elementos na cena. Apenas
um componente Canvas é criado por cena. Por padrão de design, o Canvas é configurado com a
resolução 960 (largura) por 640 (altura). Algumas propriedades do Canvas, como Fit Height e Fit
Width, são responsáveis pela adaptação da tela em mais resoluções.
Figura 10 – Propriedade de Canvas 
Fonte: Reprodução
Quando o Canvas adapta a tela, ele escala ou estica toda cena de jogo e não modifica o tamanho
de seu Node. O Node acompanha a resolução definida na propriedade Design Resolution. Quando o
Canvas é adicionado na tela, um componente do tipo Widget também é adicionado, de modo que
seus atributos façam com que o Canvas automaticamente preencha a tela de jogo. Caso o
tamanho Canvas seja equivalente ao tamanho desejado da tela de jogo, basta remover o
componente Widget (pode-se utilizar essa abordagem no caso de jogos e projetos com
resolução fixa).
Além das propriedades do Canvas, outros componentes de interface que são adicionados na
cena podem compor a renderização do Canvas, como botões, caixas de texto, painéis,
componentes de rolagem, toggles, sliders, elementos de paginação, entre outros. Esses
componentes de interface possuem estados que se alteram quando o jogador interage com o
jogo. Um botão, por exemplo, possui o estado de Normal, Pressed (pressionado), Hover
(sobreposição) e Disabled (desabilitado). Esses estados são modificados através de eventos
(callbacks), que podem ser configurados tanto via editor quanto programaticamente. O código a
seguir representa uma função que cria um evento de Clique e configura o botão para receber o
evento.
cc.Class({ 
 extends: cc.Component, 
 properties: {}, 
 
 onLoad: function () { 
 var clickEventHandler = new cc.Component.EventHandler(); 
 clickEventHandler.target = this.node; 
 clickEventHandler.component = "MyComponent 
 clickEventHandler.handler = "callback"; 
 clickEventHandler.customEventData = "test"; 
 
 var button = this.node.getComponent(cc.Button); 
 button.clickEvents.push(clickEventHandler); 
 }, 
 
 callback: function (event, customEventData) { 
 var node = event.target; 
 var button = node.getComponent(cc.Button); 
 } 
});
Outros componentes de interface de usuário possuem comportamentos similares aos botões,
com propriedades e eventos como Clique, Toque, Entrada do usuário, Transformação, entre
outros.
Clique no botão para conferir o conteúdo.
ACESSE
Seguindo o mesmo paradigma de componentização, as animações também são componentes
que fazem parte de um Node. As animações são segmentadas em estruturas chamadas
Animation Clips, que servem como container para salvar dados sobre a animação em particular.
Alguns dos parâmetros de um objeto de animação são: (1) sample, que é o número de quadros
por segundo (por padrão são 60); (2) speed, que é a velocidade da animação (por padrão, 1); (3)
duration, é a duração da animação; (4) real time, para tocar a animação em tempo real; (5) wrap
mode, que é o modo como a animação é tocada.
As animações na Cocos Creator podem ser editadas pelo modo Editing Mode e são controladas por
um editor, dentro da engine. Todas as operações conhecidas dentro de outras game engines são
Leitura 
Cocos Creator v2.4 User Manual 
Para maiores informações sobre os componentes de interface de
usuário da API da Cocos, acesse o link a seguir.
https://docs.cocos.com/creator/2.4/manual/en
possíveis com a Cocos Creator, como zoom, Timeline, gravação de frames, tocar/pausar a
animação, atalhos para percorrer frames, entre outras. 
Para criar uma animação, o procedimento é idêntico a criação de componentes, adicionando um
objeto (Node) com a opção “Add Animation Component”. Quando o componente for adicionado,
uma janela com a interface de animação é exibida e um objeto Animation Clip é criado. Outros
clipes de animação podem ser inseridos no mesmo objeto, de modo que o componente principal
que contém essas animações deve ser responsável por gerenciá-las (via script ou editor de
animação). A Figura a seguir mostra a janela de um clipe de animação.
Figura 11 – Editor de clipe de animação 
Fonte: Reprodução
Outro recurso possível é criar os clipes de animação via script e manipular propriedades como
curvas, duração, pontos de entrada e saída para calibrar as animações de um determinado
objeto. O trecho de código a seguir exibe o mecanismo de criação de um AnimationClip.
import { AnimationClip, animation, js } from 'cc'; 
const animationClip = new AnimationClip(); 
Coordenadas
Os objetos na cena têm duas coordenadas, uma representada no Plano Cartesiano, pelo eixo
horizontal conhecido como Eixo das Abcissas (X), e a outra representada no Plano Cartesiano
pelo eixo vertical, conhecido como Eixo das Ordenadas (Y), que são exibidas na barra de status
do Editor de Cena. 
No Sistema de Coordenadas utilizados pela engine, a coordenada X aumenta quando você se
move na tela para a direita, enquanto a coordenada Y aumenta quando você se move para cima,
seguindo o sistema “Right-Handed”. 
// Duração da animação (nenhuma animação pode exceder este tempo) 
animationClip.duration = 1.0; 
//O tempo do frame compartilhado por todas as curvas do clipe 
animationClip.keys = [ [ 0.3, 0.6, 0.9 ] ]; 
animationClip.curves = [{ 
 modifiers: [ 
 // O objeto Body do Node atual será o indicado a sofrer a alteração
 HierarchyPath('Body'), 
 // Componente ‘MyComponent’ atrelado ao objeto ‘Body’. 
 ComponentPath(js.getClassName(MyComponent)), 
 // Valor do objeto atrelado ao componente ‘MyComponent’ 
 'value', 
 ], 
 data: { 
 // Chaves anexadas do animationClip [ 0.3, 0.6, 0.9] 
 keys: 0, 
 // Dados do KeyFrame 
 values: [ 0.0, 0.5, 1.0 ], 
 }, 
}];
Prova de Conceito
Como prova de conceito, vamos iniciar um projeto de jogo que deve ser atualizado durante a
disciplina. Para iniciar, iniciaremos a Cocos Dashboard, em seguida criaremos um projeto 2D
(nome a escolha do aluno) e com o editor aberto, clicaremos em File → New Scene. Nota-se que o
objeto Canvas já foi adicionado na cena. Por padrão, a resolução já está definida em 960 pixels de
largura e 640 pixels de altura (padrão de jogos para Web e plataforma alvo da nossa Disciplina). É
possível alterar a resolução, mas não será o foco do nosso projeto. Vamos clicar novamente em
File e salvar a nossa cena com o nome de “game” (arquivo final se torna game.scene).
Importante! 
Veja que o eixo X se mantém o mesmo, conforme você deve se lembrar
da Matemática, ou seja, valores positivos estão à direita da origem e os
negativos à esquerda. O eixo Y aumenta quando o objeto vai na direção
para cima.
Figura 12 – Criando uma cena de jogo 
Fonte: Reprodução
Em seguida, deve-se checar os arquivos de arte na pasta “assets” no editor (e fornecidos no
BlackBoard da Disciplina).
Vamos adicionar o fundo da nossa tela de jogo, que é fornecido pela
sprite “background.png”. Para adicionar, basta arrastar o arquivo para o painel de Nodes, na
hierarquia do projeto, como mostra a Figura a seguir.
Figura 13 – Adicionando o fundo da tela de jogo  
Fonte: Reprodução
No editor é possível ver que a imagem de fundo não cobre a área de jogo. Para editarmos a
imagem para cobrir a área total da câmera, utilizamos a ferramenta Rect Transform Tool. Essa
ferramenta permite que a imagem ou objeto seja transformado e suas dimensões alteradas.
Clique na imagem de fundo e depois na ferramenta indicada na Figura a seguir. Arraste as áreas
em destaque na imagem para cobrir toda a área da câmera de jogo.
Figura 14 – Utilizando a Rect Transform Tool 
Fonte: Reprodução
Precisamos adicionar a sprite para acomodar o chão da nossa fase. Para isso, siga o mesmo
procedimento que realizamos para o fundo de tela e arraste o arquivo “ground” para a
Hierarquia. Utilizando a ferramenta Rect Transform Tool manipule a imagem para que fique
acomodada na parte inferior da cena e mova para baixo, assim simularemos o comportamento
de “chão”.
Figura 15 – Adicionando o chão da fase 
Fonte: Reprodução
Clique na imagem “ground” na Hierarquia e, do lado direito, na aba Properties, altere os valores
de posição (Position) e tamanho (Size) e teste a melhor abordagem para o design de seu nível.
Com o chão adicionado, é hora de adicionarmos o personagem principal, Purple Monster, que
será controlado pelo jogador. Arraste o arquivo “PurpleMonster” para a Hierarquia e renomeie
para “Player”. Mova o objeto Player para que fique no chão da fase (e será usado para que
possamos controlá-lo no mesmo eixo).
Figura 16 – Player posicionado acima da sprite de chão  
Fonte: Reprodução
Por fim, vamos adicionar um script para o Player, de modo que ele comece a ter uma interação
com a nossa tela de jogo. Com ou sem experiência em programação, a Cocos Creator facilita a
codificação de entidades por ser orientada a componentes (como as engines Unity, Unreal e
muitas outras). Uma das vantagens de game engines sobre frameworks é que os scripts, por
estarem atrelados a componentes, tendem a ter um código mais orientado e mais flexível.
Para criar uma pasta para os scripts, clicamos com o botão direito na pasta “assets”, depois em
“Create” e “Folder”. Vamos renomear a pasta para “scripts”. Dentro da pasta “script”, novamente
clicamos com o botão direito, depois em “Create” e, por fim, “TypeScript”. Esse fluxo criará um
arquivo TypeScript, que acomodará as funcionalidades do nosso Player.
Clique no botão para conferir o conteúdo.
ACESSE
Leitura 
Why We Chose TypeScript for Cocos Creator 3.0  
A equipe da Cocos Creator na versão 3.0 alterou o suporte de JavaScript
nativo para TypeScript. Depois de muitos estudos, a equipe de
tecnologia entendeu a maturidade do TypeScript e as vantagens sobre o
antigo paradigma. Para uma melhor compreensão, acesse o link a
seguir.
https://www.cocos.com/en/why-we-chose-typescript-for-cocos-creator-3-0
Figura 17 – Criando um script TypeScript 
Fonte: Reprodução
Após a criação do script, vamos definir algumas variáveis para que o nosso Player possa ter
velocidade, aceleração e outras propriedades de controle. Depois disso, vamos adicionar o script
“Player.ts” ao objeto Player criado anteriormente. Dessa forma, o objeto poderá executar as
funções escritas no script. O script a seguir é a nossa primeira implementação para o Player e sua
explicação virá na sequência.
import { _decorator, Component, tween, CCFloat, Vec3 } from 'cc'; 
const { ccclass, property } = _decorator; 
 
@ccclass("Player") 
export default class Player extends Component { 
Inicialmente o script define o decorador e os objetos utilizados da biblioteca principal da
Cocos (“cg”). Definimos propriedades para ter controle sobre a movimentação do personagem,
assim como uma função para controle do pulo, que retorna um objeto do tipo Tween. O
Tween controla ações responsáveis por manipular as propriedades de transformação do objeto,
como movê-lo, adicionar escala e efeitos de transição. A Cocos também possui uma função de
sequência de ações (“cc.sequence”) e pode ser atrelada a qualquer objeto que herde
comportamento de render (desenho na tela). 
 @property(CCFloat) jumpHeight = 0; 
 @property(CCFloat) jumpDuration = 0; 
 @property(CCFloat) maxMoveSpeed = 0; 
 @property(CCFloat) acceleration = 0; 
 
 onLoad() { 
 var jumpAction = this.runJumpAction(); 
 tween(this.node).then(jumpAction).start() 
 } 
 
 start() { 
 
 } 
 
 runJumpAction () { 
 // Pular (subindo) 
 var jumpUp = tween().target(this.node).by(this.jumpDuration, { posi
 
 // Pular (descendo) 
 var jumpDown = tween().target(this.node).by(this.jumpDuration, { po
 
 // Executa ações para pular e cair 
 var tweenJump = tween().sequence(jumpUp, jumpDown); 
 
 // Repete a ação 
 return tween(this.node).repeatForever(tweenJump); 
 } 
 
 update(deltaTime: number) { 
 } 
}
A variável jumpHeight controla a altura do pulo e está sendo passada na função de tween() para
indicar o quanto o personagem deve se deslocar no eixo Y, tanto para cima (jumpUp) quanto para
baixo (jumpDown). As propriedades “sineIn” e “sineOut” definem as curvas aplicadas a essa
transição, de forma que o pulo tenha uma movimentação mais fluída.
Clique no botão para conferir o conteúdo.
ACESSE
Ao adicionarmos o script Player como componente do nosso objeto na Hierarquia, podemos
editar os valores diretamente no editor. Esses valores podem ser definidos como valores de
entrada ou ser alterados para possíveis validações e testes no design do jogo.
Leitura 
Tween Functions 
Para entender mais sobre curvas de transição e propriedades do Tween,
acesse a documentação a seguir e experimente aplicar outras curvas em
sua função de movimento.
https://docs.cocos.com/creator/manual/en/tween/tween-function.html
Figura 18 – Script ‘Player.ts’ adicionado ao nosso Node
(objeto)  
Fonte: Reprodução
Clique no botão Play, localizado na parte superior do editor e veja o resultado no seu navegador.
Por enquanto, o nosso personagem está apenas pulando constantemente na tela. Nas próximas
Unidades, adicionaremos outros eventos, elementos e interações para que nosso jogo ganhe
forma. 
Figura 19 – Jogo rodando no navegador 
Fonte: Reprodução
Plataformas
Desde a conversão da versão C++ da Cocos (Cocos2D-x) para Cocos Creator, é possível escolher
distribuir o jogo em plataformas Web e mobile: 
Plataforma web: relativamente mais nova, pode ser usada para criar jogos que serão
executados em navegadores web, utilizando HTML5. Essa plataforma é nosso
objetivo nesta Disciplina; afinal, estamos querendo criar jogos para a Internet;
Plataforma mobile: permite criar jogos compilados, que podem ser executados em
ambiente Android ou iOS. Muitas vezes, os jogos nativos podem ser executados
numa velocidade maior que os jogos HTML5.
Se você quer desenvolver jogos para ambas as plataformas, isso é possível! Acione a opção
Project no painel da Cocos Creator e escolha a opção Build. Lá você define em qual plataforma quer
compilar o projeto. É importante destacar que são necessárias configurações extras de
plataformas como Android e iOS e esses pontos serão vistos posteriormente.
Sempre teste seu jogo diversas vezes e peça para alguém testar também.
Nesta Unidade, vimos um pouco das características da Cocos Creator e como trabalhar com
objetos e eventos. 
As animações e eventos criados nesta Unidade serão utilizados no projeto de desenvolvimento
de um jogo de Plataforma posteriormente. Portanto, se você chegou até aqui e as coisas não
funcionaram conforme previsto, procure rever os passos dados para a criação do personagem e
as respectivas animações. 
E não se preocupe, porque ainda vamos falar bastante sobre o desenvolvimento
com a Cocos
Creator. 
Leitura 
Cocos Creator 3.6 User Manual 
Clique no botão para conferir o conteúdo.
ACESSE
Consulte a Wiki da Cocos Creator na Internet, no endereço a seguir.
https://docs.cocos.com/creator/manual/en/
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
  Livro  
Cocos 2d Cross-Platform Game Development Cookbook 
SHEKAR, S. Cocos 2d cross-platform game development cookbook. 1. ed. Packt Publishing, 2016.
  Vídeos  
Cocos Creator Crash Course Tutorial
3 / 4
˨ Material Complementar
Cocos Creator Crash Course Tutorial
https://www.youtube.com/watch?v=okK5zQ8Gtqc
Cocos Creator 2D Game Development Fundamentals 
Clique no botão para conferir o vídeo indicado.
ASSISTA
  Leitura  
Best Cocos Tutorials of 2022 – Part One 
Clique no botão para conferir o conteúdo.
ACESSE
https://www.udemy.com/course/cocos-creator-2d-game-development-essentials/
https://www.cocos.com/en/best-cocos-tutorials-of-2022-part-one
BUCHARD, E. The web game developer's cookbook: using Java Script and HTML5 to develop
games. S. l.: Addison-Wesley, 2013.
COCOS CREATOR. Cocos Creator v2.4 user manual. c2022. Disponível em:
. Acesso em: 15/09/2022.
SCHELL, J. A arte de game design: o livro original. São Paulo: Campus, 2011.
SHUOQUAN, M. Cocos Creator game development practice. 1. ed. Mechanical Industry Press, 2019. 
4 / 4
˨ Referências