Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

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

Emanuele Feronato Game design, HTML5, Javascript, 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:

to

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.

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 4

    1. 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.

  1. JJCale

    Hi,

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

    Regards,
    JJ

Leave a Reply to PixelPicoSean Cancel reply

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