Optimize your Phaser HTML5 games on mobile devices by using more sprites and less tileSprites

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.


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:


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.

  • Just curious, why does it use an actual image, why not just graphics?

    new PIXI.Graphics().beginFill(0xFFFF00).drawRect(0, 0, 64, 64);

    • PixelPicoSean

      Graphics can be even worse since each Graphics instance (actually each closed path) requires a draw call, while the whole scene can be rendered in a single one if you are using Sprite instead.

  • I always felt difficulty while optimizing html5 games on mobile devices. But the tricks defined in this post, I will try all of them. Hope these will work.

  • JJCale


    have you tried repacking your JavaScript with Intel XDK (Cordova)? I would like to know how well it is performing with tileSprites.