Punch Dude: Developing a Game in Phaser with Tilemaps

 

As a kid I always loved to play games on the gameboy, but I wasted a lot more time playing flash games on the computer. 

After flash died I forgot about them, until I came across a game portal displaying user made HTML5 games, during one of my classes. It was exciting to see games made with Javascript, because unlike when I was a kid – I can code Javascript now!

After looking at some available frameworks I was pointed to Phaser, a modern, robust, open-source JS game development framework. It had everything I could have wanted to make 2d games.

Naturally, I wanted to make a flash game that felt like some of those gameboy games I used to play, in contrast to the mobile games that clutter the app store today. 

I decided to try and put together a tile mapped side scroller, which meant I wouldn’t have time to design all the art myself since the level design and game logic would be a little more cumbersome.

I found some tile sets and sprites on opengameart.com, and after playing around for a bit I decided on Generic Platformer Tiles by Surt and The Classic Hero and Baddies Pack by GrafxKid for my assets. 

Not knowing how to turn the tileset into a playable level, I looked up a tutorial on building and exporting tile maps for phaser. Based on this I used the Tiled editor to create a hilly green map for the game, which reminded me of the early sonic and Zelda stages.

Creating the map was much easier than I expected but took a lot longer because of the tedium of painting. Level tile by tile. 

Once I was done I put the JSON and assets into phaser and set up the stage. Then I started working on sprite animations, which passer handles pretty well out of the box. I did have to edit some of the pixels to make them move correctly though.

 

Once my sprites worked, I got coding the game logic. Which was mainly character movement and collision handling, both of which phaser had apis for.

There were some odd bits that didn’t work quite correctly out of the box when dealing with collisions, specifically that the character could fall through the ground if they were traveling too fast, but I was able to fix them for the most part after some googling.

After the level worked, I make a timer and points system, and added win and loss conditions to the game.

All in all, using Phaser was a fun experience. With no previous knowledge of the framework, building a working game in two weeks was pretty easy.

Game Here

Leave a comment

Your email address will not be published. Required fields are marked *