Pac man para haXe com a NME
Autor: Santos | Publicado: 2012-03-19T22:55:00-03:00

Nesse tópico vou falar sobre o andamento do desenvolvimento do clone de Pac Man para haXe e NME, assim como mencionei anteriormente.
Durante o inicio do projeto, comecei usando a NME 3.1 (atualmente está na versão 3.2), e por isso já de cara não podia usar Tilesheets e gerar o jogo em flash ou Html 5. Assim fui desenvolvendo pra gerar apenas código nativo enquanto esperava a atualização da NME pra então gerar pra flash e Html 5.
Até aí não tive muitos problemas e cheguei a uma boa parte do jogo concluída. Com o mapa, pac man, fantasmas, a comida (os pequenos pontos) e a energia (pro pac man poder "comer" os fantasmas) todos implementados com a exceção de os fantasmas ainda não poderem ser "comidos". O problema surgiu logo depois que comecei a usar a nova versão da NME em que a classe Tilesheet já estava implementada. Contudo, ainda não era possível gerar o jogo para Html5 com o mesmo visual que nos outros alvos (executável nativo e flash). Isso porquê o Tilesheet tem outro comportamento quando traduzida pela biblioteca Jeash para o Javascript do Html5. Onde ao invés de desenhar vários tiles em uma canvas, desenhava um apenas. Com isso tive que parar o desenvolvimento do jogo para encontrar uma forma de fazer o mesmo efeito.



Dei uma procurada no google pra ver se já não existia uma implementação de Tilemaps para haxe que é o que resolveria o problema (google nesses termos: Tilesheet e Tilemaps), porém não encontrei nada que resolvesse. Isso me fez ter que implementar pessoalmente. O problema foi ter que entender como a Jeash fazia a tradução do código haXe em Javascript e descobrir dai como implementar.
A ideia de tilemaps é simples. Uma região ou área que deve ser preenchida com tiles, como é feito em alguns jogos como o Mario, por exemplo. Isso em Javascript + canvas do Html5 ou qualquer outra API gráfica que eu conheça é feito por uma operação blit ou no drawImage no Html5. Com o drawImage é possível desenhar uma parte de uma imagem (fonte) dentro de uma área em uma posição interna de uma imagem destino. A imagem abaixo ajuda a entender.



fonte: W3C


Na imagem abaixo o resultado desejado.



Mapa do jogo como deve ser desenhado.


Na próxima imagem o tilesheet usado para isso.



Tilesheet com os sprites de cada tile.


Dessa forma, cada pequeno quadrado de 32x32 pixels da imagem do tilesheet vai ser desenhado em uma posição da área de desenho do mapa (um objeto canvas na página). Pra isso ele precisa ser mapeado.
Enfim, eu fiz uma classe chamada Tilemap e essa classe aproveita o código da NME para desenhar o tilemap nos alvos de executável nativo e flash e implementa a parte que desenha o tilemap para ser visto em Html 5.
De tudo isso pude tirar uma importante lição. Mesmo sabendo que a linguagem haXe e suas bibliotecas são muito novas, elas ainda deixam a desejar em código para coisas um pouco avançadas (Tilemaps não são nada tão avançados). Entretanto, pela sua proposta de ser multiplataforma e de com um único código criar projetos para as mais diversas plataformas, incluindo Android, iOs e webOs, podemos imaginar o trabalho e tempo que consome dos desenvolvedores. Isso, no entanto, não impede de, com um pouquinho de esforço conseguir fazer um jogo que no final roda em Windows, Linux, Mac, flash e Html 5, Android, iOS e webOs.
Não falei dos mobiles por que não pude testar pessoalmente num dispositivo real. No emulador do Android tudo roda muito lento, daí não dá pra dizer se realmente vale a pena. Porém, assim que eu terminar vou deixar o código disponível pra quem quiser testar.