Game Developer Box: A MelonJS

O que é o melonJS? Basicamente o mJS é uma engine free para jogos em HTML5. Apresentei uma palestra sobre a mJS no Festival Latino-Americano de Software Livre (Salvador- BA) e estarei falando um pouco do que eu falei lá e, como o slide é cheio de animações vou convertê-lo para vídeo e colocar o link aqui.

Todos que produzem games para a web ou estão começando, já ouviram falar sobre um tal de HTML5 e certamente sabem da "briga" com o velho Flash. Pois bem, essa tecnologia certamente tirará a hegemonia do Flash por diversos motivos, principalmente relativos à desempenho. Segue um link sobre o assunto: http://www.longtailvideo.com/html5, afinal o assunto aqui é o melonJS. Essa engine foi/está sendo desenvolvida pelo Oliver Brion, que começou fazendo games em HTML5 e percebeu que já tinha uma certa quantidade de módulos que poderia ser compartilhando, acho que aqui cabe um "Obrigado Oliver". Dentro desse contexto, os jogos feitos na melonJS seguem basicamente esse padrão (figura 1).

figura 1

obs.: Falaremos, mais a frente, um pouco sobre arquivos do tipo tmx.

O ideal é usar vários Js, cada um referente a um elemento do game. por exemplo: imigo.js, persogem.js, cena.js ... e por ai vai. Nossos elementos são variáveis que estendem suas propriedades de métodos de tipos como ObjectEntity, ScreenObject ... HUD.

Exemplo:

var MyObject = me.ObjectEntity.extend({

// métodos e propriedades

});

Por esse motivo podemos dividir o nosso game. Como normalmente esse código crescerá muito, fica muito melhor de dá manutenção. Então antes de começar, crie os arquivos que irá precisar. Um projeto inicial é muito importante!

figura 2

Como dito antes, vamos saber o que é esse arquivo tmx:

O TileMap é baseando em XML e é usado pela mJS para, além de exibir as imagens e elementos iniciais (falo isso porque podemos adicionar elementos no próprio código) mapeia a plataforma de colisão. O programa usado para a edição do TileMap é o Tile (irei disponibilizar o link no final do post), é bem intuitivo e trabalha com camadas (para quem tá habituado, sabe que isso é muito importante quanto a facilidade de manusear os elementos).

Retornando ao melonJS, algumas pessoas podem falar: Mas eu não sei nada de HTML5, deixa isso para lá... depois eu aprendo. Bem, a mJS cria, de certa forma, um nível de abstração (figura 3). Podemos o desenvolvedor trabalhar apenas com JS em cima das classes da engine.

5 motivos para usar a melonJS

1- A documentação da mJS é muito boa, dá para aprender.

2- O site tem alguns link de exemplos e projetos no GitHub.

3- Existe um grupo de discussão sobre a mJS.

4- Existe uma séries de facilidades já implementadas como : andar, pular, a colisão com a plataforma de colisão.

5- Você pode desenvolver para mobiles.

Ok, chegamos ao fim. Não vou fazer um tutorial para os iniciantes pois, já existe um tuto no site oficial e outro no site Tuxtilt.: http://www.tuxtilt.com/criando-jogos-online-para-html5/ que, na minha opinião, são bons e dá para começar! Breve postarei um tuto e partirei do pressuposto que vocês já foram lá no tuto inicial. Qualquer dúvida é só deixar um comentário aqui.

Agora é mão na massa... quero dizer: Mão no teclado para programar e desenvolver as imagens, sons, projeto, documentação e etc.

Links importantes: