Primeiras aulas do curso Cocos Creator parte 1: Simplificando o desenvolvimento de jogos para Web

Cocos Creator parte 1: Simplificando o desenvolvimento de jogos para Web

Se familiarizando com a Cocos - Introdução

Introdução

Bem-vindo ao curso de Cocos Creator parte 1: Simplificando o desenvolvimento de jogos para Web! Você já pensou em criar seu jogo? Por onde começar? O que é uma Game Engine?

Neste curso veremos como criar um jogo utilizando o Cocos Creator que é uma game engine.

Trata-se de um conjunto de ferramentas que nos auxiliam na criação de jogos. Com ela nós podemos desenhar telas, criar colisões e muito mais. A Cocos Creator é muito parecida com outras engines do mercado, porém, ela possui peculiaridades, uma delas é que utilizaremos JavaScript como linguagem de programação.

Neste curso criaremos um jogo chamado AliensWar, no qual teremos uma nave que nos permite atirar e destruir naves inimigas. O projeto vai incluir contagem de pontos, barra de vida e outros recursos.

A imagem abaixo ilustra um pouco de como será nosso jogo. Vamos começar?

gif de nave atirando em naves inimigas

Se familiarizando com a Cocos - Criando o projeto e adicionando o movimento

Criando o projeto e adicionando o movimento

Para darmos início ao desenvolvimento do nosso jogo, abriremos a Cocos Creator e criaremos um projeto clicando nas opções "New Project". Como modelo de projeto, selecionaremos a opção Empty Project para que seja criado um projeto do zero e na barra Browser escolheremos o nome do projeto precedido do diretório onde o mesmo será criado. O nome do projeto será o mesmo do jogo, que como vimos, se chama AliensWar.

criando o projeto em branco no dashboard

Importando os Assets

Um dos primeiros passos que precisamos dar na criação do jogo é a importação dos assets. Eles são os arquivos que serão utilizados dentro do jogo, mas que são criados externamente. Isso inclui imagens, vídeos, sons, etc.

Tudo que precisamos fazer para importar um asset dentro da Cocos é selecionar o arquivo no sistema de arquivos do sistema operacional e arrastar para a área Assets dentro da Cocos.

clicando e arrastando imagem hero.png para a aba assets da cocos

Os arquivos a serem importados por enquanto são as imagens hero.png, que será nosso personagem principal, e o enemy.png, que será o inimigo.

Você pode fazer o download dos dois arquivos.

Adicionando personagens à cena

Temos os dois personagens em nosso repositório de "assets", podemos incluí-los no jogo. Faremos o mesmo processo de importação, selecionaremos a imagem na aba "Assets*", clicar e mover a mesma para a aba "Scene".

Precisamos considerar um detalhe. Note que na aba "Scene", temos um quadro roxo. Ele é o que chamamos de câmera. Os itens que estão dentro da câmera, aparecem no jogo, os que estão fora, não aparecem.

Podemos comparar a cena com o "universo do jogo", tudo que o jogo precisa para funcionar, deve estar dentro dela. Assim adicionamos tanto o hero quanto o enemy à cena, visto que precisamos dos dois no jogo.

adicionando personagens à cena

Note que a Cocos cria um quadro azul no canto direito superior de cada imagem, ele receberá o nome de "Gismo". Com ele, podemos arrastar os objetos pela cena e posicioná-lo como quisermos. Com os personagens na área da câmera, podemos clicar no botão de play para vermos o jogo funcionando.

Dica: Lembre-se de fazer isso a cada passo, assim é verificado o status do desenvolvimento do seu jogo e problemas são detectados com antecedência.

Movendo o jogador

Estamos com os personagens na cena mas eles ainda não fazem nada. Como fazemos o jogador (hero) se mover? Com JavaScript!

Na aba "assets", clicaremos com o botão direito e usaremos as opções Create -> JavaScript. Renomearemos o arquivo para Jogador e o abriremos em um editor de código.

O código inicial do arquivo Jogador.js é o seguinte:

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {

    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

A ideia é que movamos o hero para a direita, ou seja, no eixo X. Para isso, primeiro, removeremos os comentários do método update e adicionaremos a ele o seguinte código:

this.node.x += 1;

O código acima adiciona 1px na posição X do objeto. O this referencia o próprio objeto (hero), o node é uma propriedade herdada da classe Component e o x, provavelmente você já deve imaginar: é a posição X do objeto.

Podemos clicar no play para testar o jogo novamente, mas veremos que nada acontecerá. O jogador não se move no eixo X.

O que precisamos fazer é anexar o script Jogador.js ao hero. Da forma que está, a Cocos não sabe como estes elementos se relacionam. Para isso vamos clicar sobre o script e arrastá-lo para a aba Properties do objeto hero.

Ou seja, primeiro clicaremos no jogador, depois clicamos e arrastamos o script para a aba indicada.

anexando Jogador.js ao hero.png

Podemos dar play novamente e agora sim, veremos nosso jogador se movendo para a direita.

Por baixo dos panos

Nosso personagem se move e tudo está bem, mas por curiosidade, o que está de fato acontecendo? Quem está executando o método update?

O que acontece por baixo dos panos é que a Cocos quando faz a leitura da cena, varre todos os objetos presentes nela executando o método update de cada objeto a cada Frame. O que é Frame? Trata-se de um intervalo de tempo.

Ou seja, o nosso personagem se move porque a Cocos varre os objetos da cena de tempos em tempos e chama o método update. Este método no script Jogador.js, adiciona o valor 1 ao eixo X do objeto. Como isso acontece de forma contínua, temos a impressão de movimento.

Com este passo pronto, podemos salvar. Mas temos uma observação: o que estamos salvando de fato ao usar o CTRL + S é a cena. Essa primeira chamaremos apenas de Jogo. Será nela que faremos toda a parte de interação no jogo.

Se familiarizando com a Cocos - Inputs de teclado

Inputs de teclado

Nossa nave já se movimenta, mas este movimento ainda é bem limitado. A nave segue infinitamente para a direita e não é isso que queremos. A ideia é que no jogo real, a nave se movimente apenas quando pressionada a tecla A do teclado. E que siga a direção do mouse. Primeiro faremos o movimento considerar o teclado, depois trabalharemos a questão do mouse.

Precisamos informar para a Cocos que usaremos o teclado. Este "aviso", não deve ser feito no método update por que estaríamos avisando em todo frame que o teclado será utilizado. Imagine por exemplo, uma pessoa cutucando você a cada 1 segundo te perguntando as horas, seria bem chato, certo? não queremos ser chatos com a Cocos.

Precisamos informar apenas uma vez para a Cocos que usaremos o teclado. Por isso utilizaremos o método onLoad que, diferente do método update, é executado apenas uma vez, logo após a Cocos carregar todos os objetos da cena, ou seja, carrega todos os objetos e depois executa o método onLoad de cada um deles.

No método onLoad então, adicionaremos o seguinte código:

// use this for initialization
onLoad: function () {
    cc.SystemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.teclaPressionada, this) 
},

O método on da propriedade SystemEvent da Cocos (cc) é o responsável por capturar eventos e fazer o bind com os métodos de callback que deverão responder a estes eventos. Neste caso, estamos dizendo que quando o evento de KEY_DOWN (tecla pressionada) acontecer, um método chamado teclaPressionada deve ser executado. O this final serve para que a Cocos saiba de qual objeto o método deve ser executado, caso não, teremos problemas com a dinamicidade do this no JavaScript.

Resumindo, o método on precisa de 3 argumentos: O tipo de evento a ser capturado, o callback que será executado e qual o contexto de execução do callback. Como o contexto é o próprio objeto (this), criaremos o método teclaPressionada na mesma classe do script Jogador.js logo abaixo do método onLoad.

teclaPressionada: function(event){

},

Como o método deve responder a um evento, recebemos o mesmo como parâmetro. Com base neste evento, precisamos saber se a tecla pressionada foi a da letra a. Se imprimirmos o objeto event na console, teríamos algumas informações relevantes, como por exemplo o número da tecla pressionada, também conhecida como keyCode. Caso já tenha feito algum código JavaScript que lidasse com eventos de teclado, saberá do que se trata.

O mais legal é que não precisamos comparar a propriedade keyCode do objeto event com um número mágico sem muito significado em nosso código. A Cocos fornece uma série de constantes que ajudam bastante nestes casos. Vejamos o código a seguir:

teclaPressionada: function(event){

    if(event.keyCode == cc.KEY.a){
        console.log("a");
    }

},

A propriedade KEY disponibilizada pela Cocos nos permite acessar o código da tecla de forma mais clara. Assim, podemos iniciar o jogo novamente e abrir o console do navegador. Ao pressionar a tecla a teremos a letra sendo impressa na console, caso outra tecla seja pressionada, nada acontece.

Acelerando e parando a nave

Agora que conseguimos capturar a tecla pressionada e verificar que é a tecla a, faremos com que a nave se movimente apenas enquanto a tecla estiver pressionada. Para isso, inicialmente criaremos uma variável "privada" dentro da chave properties do nosso componente. Esta variável se chamará acelerando e será do tipo booleano, inicialmente configurado como false.

properties: {
    // foo: {
    //    default: null,      // The default value will be used only when the component attaching
    //                           to a node for the first time
    //    url: cc.Texture2D,  // optional, default is typeof default
    //    serializable: true, // optional, default is true
    //    visible: true,      // optional, default is true
    //    displayName: 'Foo', // optional
    //    readonly: false,    // optional, default is false
    // },
    // ...
    _acelerando: false,
},

A propriedade acelerando com seu valor false indica que a nave deve estar parada. Para fazer com que a nave ande, alteraremos este valor para true quando o evento de tecla pressionada for disparado e a letra da tecla seja a letra a. Já temos essa verificação pronta no método teclaPressionada então precisamos apenas trocar o valor de acelerando.

teclaPressionada: function(event){

    if(event.keyCode == cc.KEY.a){
        this._acelerando = true;
    }

},

Para que tudo funcione precisamos alterar apenas mais um trecho do nosso código. O método update continua movendo nossa nave para a direita assim que o jogo é iniciado. Adicionaremos uma verificação antes do movimento de fato acontecer. Precisamos verificar se acelerando é true, assim movimentamos a nave de acordo com os controles que estamos criando. O código que estava assim:

update: function (dt) {
    this.node.x += 1;
},

Passa a ficar assim:

update: function (dt) {
    if(this._acelerando){
        this.node.x += 1;
    }
},

Se acelerando for true, movemos a nave. Agora tudo funciona, podemos testar! Só há um problema: em momento algum indicamos uma forma da nave parar, ou seja, depois de pressionar a tecla a e mantê-la pressionada, a nave anda, mas ao soltar a tecla, a nave continua se movendo.

Vamos resolver esse problema fazendo exatamente o código inverso do que já fizemos até o momento. Primeiro, registraremos a captura do evento de KEY_UP (tecla solta) informando que ao soltar a tecla, o método teclaSolta deverá ser executado. Importante lembrar de fazer o registro de captura dos eventos apenas no onLoad.

// use this for initialization
onLoad: function () {
    cc.SystemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.teclaPressionada, this); 
    cc.SystemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.teclaSolta, this);
},

Com o evento sendo capturado, criaremos o método teclaSolta que fará a mesma verificação do método teclaPressionada invertendo apenas o valor da propriedade acelerando.

teclaSolta: function(event){

    if(event.keyCode == cc.KEY.a){
        this._acelerando = false;
    }

},

Note que não é apenas receber o evento no caso da tecla solta. Precisamos verificar também qual tecla foi solta. Com este passo, temos o movimento da nave pronto. Agora ela anda ao pressionar a tecla a e para assim que a tecla for solta.

O que aprendemos aqui

Até aqui vimos como capturar os eventos de teclado e como a Cocos ajuda no trabalho de verificar quais teclas foram pressionadas. Aprendemos também que a captura dos eventos, por boa prática, devem ser registrados no método onLoad do componente.

Por último vimos como associar os eventos ao componente em si, caso tal tecla seja pressionada, algo acontece, caso seja solta, agora acontece. O código completo da classe no script Jogador.js se encontra assim:

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        _acelerando: false,
    },

    // use this for initialization
    onLoad: function () {
        cc.SystemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.teclaPressionada, this); 
        cc.SystemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.teclaSolta, this);
    },

    teclaPressionada: function(event){
        if(event.keyCode == cc.KEY.a){
            this._acelerando = true;
        }
    },

    teclaSolta: function(event){
        if(event.keyCode == cc.KEY.a){
            this._acelerando = false;
        }
    },

    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
        if(this._acelerando){
            this.node.x += 1;
        }
    },
});

Sobre o curso Cocos Creator parte 1: Simplificando o desenvolvimento de jogos para Web

O curso Cocos Creator parte 1: Simplificando o desenvolvimento de jogos para Web possui 186 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de Jogos em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Jogos acessando integralmente esse e outros cursos, comece hoje!

  • 998 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 998 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 998 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 998 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana