Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Game development, HTML5, Javascript and Phaser.

If you played my latest HTML game Just Jump on your mobile device before January 5, you surely noticed the game was really really slow. As a Phaser enthusiast, I was a little concerned about this because I like to code with Phaser and I was wondering why a simple game like Just Jump was lagging that bad. I tried to remove as much code as possible from update function, as it’s executed at each frame, but nothing changed. Tried to remove ARCADE physics but nothing changed, the framerate was ridiculously slow. Until… if you read the original blog post about the game, I wrote: « The game has only one graphic asset, a small 64 x 64 pixels PNG white square. Everything, from background walls to particles, from the player to size-changing obstacles, has been made starting from that single image » Having just one graphic asset, I made large use of tileSprites, and this practice caused the problem. So I changed all tileSprites to sprites, by modifying the code from: 
var spike = game.add.tileSprite((floor % 2 == 0) ? gameOptions.floorWidth + gameOptions.floorX : gameOptions.floorX, gameOptions.floorY[floor], game.rnd.integerInRange(1, 16) * 2, 40, "tile");
to 
var spike = game.add.sprite((floor % 2 == 0) ? gameOptions.floorWidth + gameOptions.floorX : gameOptions.floorX, gameOptions.floorY[floor], "tile");
spike.width = game.rnd.integerInRange(1, 16) * 2;
spike.height = 40;
Don’t mind the arguments of each call, just watch how I turned a tileSprite into a sprite. And guess what? The game now runs smoothly, as you can see by playing the game on your mobile phone. I also made two videos to show you the difference between the two games being played on my iPad:
Using tileSprites
Using sprites adjusting width and height
Ok, I suck at this game and probably the whole game sucks too, but at the moment I want you to focus on the dramatic performance increase just by changing tileSprites with resized sprites. Bear this in mind when designing your games for mobile devices.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.