Artigos Mobile Jogos em Cordova: Como criar um jogo 2D com Enchant.js – Parte 1
Demais posts desta série:
Jogos em Cordova: Desenvolvendo um jogo 2D com Enchat.js – Parte 2
Por que eu devo ler este artigo:Neste artigo vamos aprender o que é o framework Enchat.js, seus conceitos arquiteturais, que privilegiam a composição e o reaproveitamento de objetos, abstrações, APIs de desenvolvimento de jogos e as principais funcionalidades que o mesmo traz atrelado ao JavaScript/HTML5, através do desenvolvimento de um jogo 2D completo. Deste modo será possível entender porque ele é uma opção viável para o desenvolvimento de aplicativos escaláveis que exigem multiprocessamento, animação e manipulação de eventos. Além disso, trataremos de explorar o framework Apache Cordova que lida com a geração de aplicativos móveis para diversos sistemas operacionais (iOS, Android, etc.).

O mercado de jogos movimenta milhões todos os anos e, longe de todo o complexo aparato estrutural usado por grandes companhias para criar jogos em 3D e com recursos gráficos cada vez mais robustos, quando se trata do mercado de jogos para dispositivos móveis, a indústria de jogos 2D é que ganha a preferência dos usuários com seus personagens simplistas e histórias bem elaboradas.

Ao mesmo tempo, e do outro lado do jogo, temos a “corrida do desenvolvimento”, a qual se destaca por empresas e profissionais autônomos dessa área que buscam incessantemente por tecnologias novas que possam atender aos objetivos programáticos dos produtos desenvolvidos de forma produtiva, rápida e eficiente. Isso quando estes mesmos profissionais não desenvolvem seus próprios frameworks e ferramentas para abraçar mais uma área dessa indústria rentável.

E quando se trata de desenvolvimento produtivo, cada vez mais empresas estão considerando a criação de aplicativos usando linguagens simples e fáceis de encontrar pessoal qualificado, como JavaScript, HTML5 e CSS. Isso é possível através de ferramentas que encapsulam o código fonte implementado via scripts e geram instaladores para os diferentes sistemas operacionais móveis do mercado, como Android, iOS, etc., abstraindo a comunicação que antes era feita totalmente de forma nativa, com códigos próprios de cada plataforma. O conceito se assemelha ao que temos em máquinas virtuais, porém com um trabalho de conversão feito antes do código chegar ao SO, ou seja, o código é convertido em “linguagem de máquina” (lê-se linguagem de dispositivo móvel) antes de ser gerado o instalador do aplicativo.

Dentre os diversos frameworks que trabalham dessa forma, um se destaca pelo suporte nativo ao SO, bem como por ter uma forte comunidade de desenvolvimento, trata-se do Cordova, da Apache. Este nada mais é que uma plataforma integrada que permite a construção de aplicativos móveis através da geração de WebViews e execução via JavaScript. Além disso, ele também permite que o desenvolvedor possa acessar recursos do dispositivo móvel via API, bem como fazer chamadas a código da plataforma em que irá rodar.

Neste artigo, faremos uso do Apache Cordova, em conjunto com o JavaScript, HTML5, CSS e o framework front-end Enchant.js para criar um jogo 2D do zero chamado “Fuga dos Dragões”, onde o jogador controlará um personagem principal (o dragão) que terá de desviar dos obstáculos (inimigos em formatos diversos, bombas, foguetes, etc.) que virão na horizontal em três linhas de frente e em uma velocidade pré-definida mais rápida que a do jogador. À medida que os obstáculos forem sendo desviados, o player irá acumular pontos e o jogo perdura enquanto o mesmo não for atingido. Uma vez em contato com um dos inimigos, o jogo termina, e é exibida a pontuação do jogador, junto com o seu melhor resultado. Isso será possível graças ao acesso nativo que faremos para salvar a informação no disco rígido do dispositivo. Para controlar o player, o jogador fará uso do clique do mouse, ou do toque na tela quando o mesmo estiver executando no celular, tablet, etc., em três regiões invisíveis criadas verticalmente para delimitar tais escopos físicos.

É importante salientar que nem todos os frameworks JavaScript trabalham com a criação de aplicativos responsivos (isto é, que conseguem se adequar aos diferentes tamanhos de telas dos diversos dispositivos móveis em que executam), por isso escolhemos o Enchant.js que irá atuar nessa frente, principalmente.

Para este artigo, serão pré-requisitos conhecimentos básicos nas tecnologias referidas. Entendamos, portanto, como funcionam os dois principais atores no desenvolvimento do nosso jogo.

O que é o Enchant.js?

O framework Enchant.js é uma engine de jogos baseada em JavaScript e HTML5 e uma biblioteca de código stand-alone que permite o desenvolvimento de aplicativos que podem ser executados em um PC, Mac ou no iPhone, iPad e Android. Embora os aplicativos de jogos criados usando a engine possam ser executados em muitos tipos diferentes de dispositivos, a maioria deles foi criado e otimizado para uso em smartphones.

Originalmente criado pela Ubiquitous Entertainment Inc., o framework atualmente encontra-se na versão 0.8.2, que será a versão usada neste artigo. A Figura 1 representa a tela inicial da biblioteca, cujo link pode ser encontrado na seção Links, podendo ser visualizada em português, inglês, espanhol e japonês.

Figura 1. Página home do Enchant.js.

As principais características da biblioteca são sua metodologia orientada a objetos, a forma específica que processa o código do jogo, sua extensibilidade através de plug-ins, e sua biblioteca de conteúdo, a saber:

· Programação Orientada a Objetos: O Enchant.js tem uma preferência implícita pela forma como os objetos são enfatizados no código em vez de como o processo da operação acontece em si. Para ilustrar isso, o framework cria cada um dos gráficos que são exibidos num jogo por intermédio de um objeto JavaScript. Assim como em outras linguagens OO, o Enchant.js tem um objeto pai que representa a raiz da hierarquia dos demais objetos, que é comumente chamado de display object tree, ou árvore de objetos exibíveis. Veja na Listagem 1 um exemplo bem básico de como os objetos são criados no Enchant.js e compare a forma como eles se assemelham aos de outras linguagens.

Listagem 1. Usando Programação Orientada a Objetos para criar dois objetos e adicioná-los na tela.


  1  // Criando objeto jogador
  2  jogador = new Sprite(32, 32);
  3  jogador.image = game.assets['jogador.png'];
  4  
  5  // Criando objeto inimigo
  6  var inimigo = new Sprite(32, 32);
  7  ini ...

Quer ler esse conteúdo completo? Tenha acesso completo