The basics of responsive HTML5 games

When you are about to create an HTML5 game, you should know most of your players will come from mobile devices. Most – if not all – sponsors look at an HTML5 game only if it perfectly fits in a wide range of mobile phones and tablets, and most – if not all – of them do not like black letterbox bars when your game size ratio does not match the size ratio of the mobile device it’s working on.

So you have to create the game with a lot of different resolutions and screen ratios in mind, or you can just make your game responsive.

In this post we’ll see how to make a responsive HTML5 game starting from the simplest case: when the whole action of your game can be circumscribed in a squared area. This is the case of most match 3 puzzle games, where the only interactive area is inside the 8×8 jewels square. The rest of the game is not interactive, and normally it shows the score or a battle between you and some kind of minions as you match tiles.

This is the best game type to start thinking about responsive games, and tile based puzzle games like BWBan – get it! It’s free and with no ads – are a nice example too.

In the following examples, we are turning the prototype built in the post “HTML5 swipe controlled Sokoban game made with Phaser step 2: adding keyboard controls and unlimited undos” into a responsive game, adding game name and level information respectively on the top and on the bottom of the game, while the action always take place in the middle of the device.

Do you want some examples? This is the same playable game running on three different screen ratios, you can play both with arrow keys or by swiping.

iPhone 4 screen ratio, portrait
iPhone 6 screen ratio, portrait
iPad Mini screen ratio, landscape

Each example has game name and level information at the very top and the very bottom of the stage, with the playable area in the middle of the stage.

This is the source code to achieve it, with highlighted lines to show what’s new from the original example:

This is how you can make basic games responsive, obviously there’s more to know if your games have to scale in more complicated ways, but I will cover all cases in future posts. Meanwhile you can download the complete source code.

  • jason

    How can I scale everything including the sprites and not just the background?

  • Rafael Oliveira

    I’m trying to figure how to use ScaleManager.RESIZE with a scale factor. I calculated the scale and then created a group, I added all of my objects to that group, then I scaled the group with the scale factor. The problem is, if I need to place a object in the edge of the screen, I can’t use game.width, because all objects in the group operate with the scale. I need to calculate a size (width and height), that the objects can use to match the edge of the screen. But I’m trying and I can´t figure how to calculate that size. For now I’m just using an arbitrary number that adding to game.width and height, is matching with the screen of my smartphone. But this number need to be obtained from a formula.

  • hello again Emanuel,
    how to add more level to this game?

  • Hi friend,

    Do you have any example about TilemapLayers with Phaser.ScaleManager.RESIZE scaleMode?

    See my example: http://phaser.azurewebsites.net/runner/

    I want to scale the sprites and the layer, but I don’t know

    Any help is greatly appreciated