Phaser for Beginners

Make the game more mobile friendly

We’ll make the game look good on any device in two steps: first, we have to scale up the game to cover the largest area possible, then we’ll make the HTML page which hosts the game more mobile friendly.

About scaling up the game, modify create method in TitleScreen state:

Let’s examine the new lines one by one:

Setting pageAlignHorizontally to true will horizontally align the game in the Parent container or window.

Same thing, for vertical aligment:

scaleMode sets the scaling method which in this case with SHOW_ALL we show the game at the largest scale possible while keeping the original aspect ratio. The last thing to do is editing index.html file to add some meta tags which have been specifically created for mobile devices. The new header content is:

There’s no need to explain these lines as they are standard tags suggested by device manufacturers.

And now you finally completed the project.

Next Tutorial →

Saving high score

← Previous Tutorial

Giving the game a twist