Quick tip: how to scale your HTML5 endless runner game to play it on mobile devices

When you work with HTML5 mobile games, one of the biggest headaches comes when the game runs well on YOUR phone, and you realize it won’t look as good when loaded on any other device.

On the web there are lots of tips and suggestions about scaling your HTML5 games to make them look good on any device, but I am afraid they all are too much generic.

The secret about scaling a game is: there isn’t a best way to scale an HTML5 game. You have to scale each game in a different way according to game genre.

This quick tip covers endless runner games, mostly built to be played on landscape orientation.

Since all these games have a fixed height and a (fake) endless width, we should first calculate screen width/height ratio, then adjusting game width according to such ratio while keeping the original height.

This way, wider screens will see a longer part of the endless width, but all kind of screens will be perfectly filled by the game.

Looks at these three examples of the same game, taken from the Spring Ninja tutorial (you’ll probably need to click on each example to make it start):

640×200
640×300
640×400

You can also check it on your mobile device on this link.

Although the background of the body is red, as you can see it’s perfectly filled by the game. Obviously, the wider the screen, the larger the land you will see.

Here it is the source code, with highlighted lines to let you see what changed from the original code:

And that’s it, during next days I will publish other kinds of endless runner games to let you see how well this method works. Meanwhile download the source code, it runs with the new Phaser 2.3 release candidate.

  • liam

    var game = new Phaser.Game(Math.ceil(480*gameRatio), 480, Phaser.CANVAS);

    what resolution is your art? is it 480×480?

    • Emanuele Feronato

      640×480

  • sri

    Hi,

    Great article, i have a question for you, how do you publish your games on play store/ app store, do you use cocoonjs pr phonegap, or a different thing altogether, a tutorial on this topic would be very useful.

    Thanks

    • Emanuele Feronato

      Yes, I will publish a cocoon tutorial in a few days

  • Thank you so much Emanuele!

    This not only seems like the best method I’ve found so far, but also appears to have sped up the performance in the mobile browser.

  • Jeth

    excelente tutorial muchas gracias, tengo una duda que quisiera me ayudaras porfavor, cuando cambio el pole, al momento de el ninja tocar en la orilla se cae, tiene que caer en el centro para que no se caiga, quisiera saber como hacerle para que no rebote, mas que solo en las orillas y no en parte del pole.

    Saludos amigo

  • Jeth

    Canceled my previous comment, I leave it in better English.

    Excellent tutorial thank you very much, I have a doubt that would like me you help please, when I change the pole, when the ninja touch on the bank goes down, must fall into the center so that it will not fall, I would like to know how to make it so that no rebound, but only in the banks and not part of the pole.

    greetings friend

    • Emanuele Feronato

      Lines 108-111 manage that feature. Simply edit or remove them

  • Arismel

    No me sirvio :/

    no working