Jogos em Cordova: Desenvolvendo um jogo 2D com Enchat.js – Parte 2
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 ...
Confira outros conteúdos:
Perguntas frequentes
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.