Primeiros passos com Cocos2d-JS

Os videogames são atualmente um dos componentes mais importantes da economia digital, a cada ano bilhões de dólares são investidos no design, desenvolvimento e manutenção de videogames, e ao mesmo tempo uma quantia maior é recebida pelas pessoas que os consomem. de conteúdo.
É muito simples pensar que os videogames são só para crianças ou para as pessoas que estão naquele mundo, mas a realidade é outra, nem todos os jogos são infantis, e nem todas as pessoas devem ser fãs para curtir um bom jogo, são milhares de casos, mas dois exemplos podem ser Candy Crush e os Sims, a primeira foi uma revolução na área de jogos nas redes sociais e móveis, gerando muito dinheiro diariamente, e a segunda, bem mais antiga, foi uma revolução nos jogos para PC, pois incluiu muitas pessoas que nunca pensaram em tomar um interesse em videogames.

PROLONGAR

Toda essa introdução nos leva a uma ferramenta que facilita a criação de videogames, pois é Cocos2d-JS, que nada mais é do que um framework que nos permite criar jogos bidimensionais simples para qualquer tipo de dispositivo que suporte JavaScript Y HTML5.
Graças ao fato de que esta estrutura é feita inteiramente em JavaScript, os requisitos de uso não são tão difíceis de atender, vamos ver o que precisamos para este tutorial para desenvolver projetos com Cocos2d-JS:
Editor de textoPrecisamos de uma ferramenta que nos permita escrever o código para nossos aplicativos, atualmente existe um SDI oficial o que é ele IDE Cocos Code no entanto, está disponível apenas para janelas Y MAC. Claro que podemos usar o editor de nossa preferência, então o IDE acima é a primeira sugestão, no caso deste tutorial o editor usado é Texto Sublime na versão 2, mas não é essencial.
Um servidor webDevido às diferentes partes da estrutura, precisamos de um servidor web para construir nossos aplicativos, geralmente um ambiente Apache vai nos servir como pode ser XAMPP, LUMINÁRIA ou WAMP, mesmo que tenhamos amplo conhecimento em configuração de servidor, podemos usar um servidor como Nginx para servir nosso conteúdo, mas não é obrigatório.
Navegador com suporte a HTML5No nosso caso, usaremos Firefox Developer Edition por seus benefícios para o desenvolvimento web, mas se tivermos um navegador preferido, podemos continuar a usá-lo sem problemas.
A primeira coisa que devemos fazer é baixar os arquivos necessários para poder utilizar os recursos que estão disponíveis, para isso podemos acessar o site oficial e fazer o download correspondente, inicialmente devemos escolher a versão mais atual, no nosso caso em particular é o 3.5No entanto, mais revisões podem sair. Vamos ver como é a área de download:

PROLONGAR

Podemos constatar que temos outros produtos da empresa responsável pelo framework, como o SDI e um kit de ferramentas de desenvolvimento, no entanto, estamos interessados ​​apenas no momento Cocos2d-JS, que podemos ver em segundo lugar na lista de produtos. É importante notar que a descarga é mais do que 350 MB portanto, devemos preparar um espaço para este arquivo, mas não devemos nos assustar, pois este download inclui uma grande quantidade de material, então o motor real não é tão pesado.
Assim que tivermos a estrutura em nosso computador, devemos descompactar o arquivo e colocá-lo na pasta frameworks vamos localizar a pasta cocos2d-html5 e vamos copiá-lo para o diretório onde vamos iniciar nosso projeto, que neste caso se chamará primeiro jogo, deve inicialmente ter a seguinte aparência:

Então, dentro de nosso projeto, devemos criar uma pasta chamada src e três arquivos adicionais; a index.html que é o contêiner principal de nossa aplicação e é o arquivo que será chamado no navegador a partir do servidor web. O arquivo main.js que conterá todo o nosso código JavaScript correspondendo à lógica do nosso jogo, e finalmente o arquivo project.json que conterá os parâmetros de configuração para que nosso jogo funcione corretamente. Vamos ver como nossa estrutura final deve ser:

Assim que tivermos nossa configuração inicial, é hora de criar nosso jogo, claro que um jogo é complexo e o que vamos criar terá uma funcionalidade muito básica apenas por nos mostrar uma mensagem na tela, não é algo que concorra com os jogos no mercado, mas é um começo para ver como as coisas funcionam no framework.
Em nosso arquivo index.html devemos incluir a biblioteca CCBoot do Cocos2d-JS, também devemos incluir nosso arquivo main.jse, finalmente, dentro de nosso corpo devemos incluir um rótulo tela de pintura que é responsável por receber as informações do exemplo que estamos criando, vamos ver como é o código-fonte do nosso exemplo:

 Nosso primeiro jogo 

Uma vez que concluímos a primeira etapa, passaremos para o arquivo main.js, este arquivo normalmente não carrega lógica de jogo difícil, sua funcionalidade na maioria das vezes é servir como um arquivo de configuração para indicar alguns parâmetros para o motor e poder incluir a verdadeira lógica dentro do projeto, nele colocaremos o seguinte código:

 cc.game.onStart = function () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (novo gameScene ()); }; cc.game.run ();

Aqui definimos simplesmente o que vai acontecer quando o jogo começar, as duas linhas dentro da função principal são para indicar a resolução e a cena que deve começar e finalmente na última linha indicamos que deve iniciar o jogo. O código parece um pouco complicado no começo, mas aos poucos vamos entendendo e com ele a complexidade vai diminuindo.
Agora vamos configurar nosso projeto, para isso vamos modificar o arquivo project.json, em que vamos definir o motor, o número de frames por segundo do jogo, que é o seu container, e a lista de arquivos que contém a lógica do nosso jogo, veremos este último no próximo passo. Por enquanto, vamos ver o que vamos colocar inicialmente no arquivo:

 {"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "modules": [" cocos2d "]," jsList ": [" src / gamescript.js "]}

É muito importante que o conteúdo deste arquivo seja um JSON válido, caso contrário, nosso aplicativo não iniciará.
Feito isso, é hora de incorporar a lógica do nosso primeiro exemplo, para isso vamos para a pasta src do nosso projeto, onde vamos criar o arquivo gamescript.js, se formos observadores, perceberemos que este é o arquivo que definimos no project.json e começamos a ver como as peças começam a se encaixar.
Dentro deste novo arquivo vamos criar a cena do nosso jogo, com isso vamos iniciá-lo, é claro que não temos nada gráfico para mostrar então vamos simplesmente imprimir algo no console JavaScript, vamos ver o código que devemos incluir:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Nosso jogo não é divertido, mas funciona =)"); }});

Agora que tudo está no lugar, devemos chamar nossa pasta de projeto a partir do navegador e abrir o console do desenvolvedor ou algum complemento que nos permita ver o console JavaScript para ver o resultado de todo o nosso trabalho:

PROLONGAR

Como podemos ver, nossa primeira tentativa foi bem-sucedida, já temos uma base definida para trabalhar e demos os primeiros passos com este framework.
Por que fazer jogos 2D?Por outro lado, muitos podem estar se perguntando qual é a vantagem de fazer um jogo em 2 dimensões hoje, e a resposta é muito simples: porque eles são divertidos e nos permitem explorar a possibilidade de fazer jogos em ambientes de baixo desempenho , o que pode nos aproximar de uma grande massa de jogadores em potencial que não têm um console, mas que com as palavras e ações certas podem comprar nosso jogo ou se é um modelo grátis para fazer parte de nossa comunidade.
Com isso finalizamos este tutorial e podemos dizer que a geração de conteúdo lúdico é uma das áreas de maior crescimento e competição hoje, que ainda deve continuar crescendo principalmente em dispositivos móveis e é tanta a expectativa que um grande de videogames como Nintendo vai se interessar por essas plataformas, então, se estivermos interessados ​​em um pedaço deste bolo, ferramentas como Cocos2d-JS Eles nos ajudarão a entrar no mercado de uma forma mais fácil.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo