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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
create: function() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.stage.disableVisibilityChange = true; var style = { font: "48px Monospace", fill: "#00ff00", align: "center" }; ... } |
Let’s examine the new lines one by one:
|
1 |
game.scale.pageAlignHorizontally = true; |
Setting pageAlignHorizontally to true will horizontally align the game in the Parent container or window.
|
1 |
game.scale.pageAlignVertically = true; |
Same thing, for vertical aligment:
|
1 |
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <script type="text/javascript" src="phaser.js"></script> <script type="text/javascript" src="game.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="HandheldFriendly" content="true" /> <meta name="mobile-web-app-capable" content="yes" /> <style type="text/css"> body { padding:0px; margin:0px; background: #000; } </style> </head> |
There’s no need to explain these lines as they are standard tags suggested by device manufacturers.
And now you finally completed the project.