(click anywhere to close)
OPEN MENU

[Phaser] Multiple Devices

category: Games | course: Phaser | difficulty:

The big advantage of HTML5 games is that they can be played on any device. But, to really make the most of it, we also want it to display perfectly on every screen, with every size. Now you could of course go on and create a few different versions of every variable and code snippet for different screen sizes, but that's not really the easiest way to go. No, we're going to use Phaser's Scale Manager!

Deciding how you want it scaled

So, you've created a game in your own browser, the dimensions were always 1200x900, and every number is adjusted to that. Then it would be a real pain in the ass to make every number dependent of width/height. So, we better use the scale manager to scale the size of the game, while at the same time scaling the game itself, making it work exactly the same everywhere. However, there are different ways you may want to have your game scaled, and there are different methods to achieve that - sadly enough, there's not onebest andproven method provided at the moment.

What you probably want though is that your game is resized to fill as much of the screen as possible, but still maintains its own proportions (so it isn't stretched or distorted). We'll focus on that here.

Setting your basic requirements

So, the first thing you want to do is add a piece of code in the <head> of your game's html page. This is the meta viewport tag, which was originally invented for better rendering of websites on mobile screens.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" data-lang="html"><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

This makes it impossible for the user to scale the game, sets the game's width and height properly, and adjusts it's pixel representation according to the dpi of the device.

Also in the game's html page, you need to set the width and height that are perfect for your game:

var WIDTH = 1200;
var HEIGHT = 900;
var game = new Phaser.Game(WIDTH, HEIGHT, Phaser.AUTO, '');

Scaling

Now we can start scaling the game. I'm assuming you're using different states for your game, and you should put this code in the first one (in the create function). If you're not using states, replace 'this' with 'game', and put the code at the top of your code.

//Set the scale mode to SHOW_ALL (explained in a second)
this.scaleMode = Phaser.ScaleManager.SHOW_ALL;

//Align the center of the game with the center of the screen
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

//Force landscape (optional of course)
this.scale.forceLandscape = true;

//Make the game scale!
this.scale.setShowAll();
this.scale.refresh();

//In case you want limitations to your scaling!
this.scale.minWidth = someValue;
this.scale.minHeight = someValue;
this.scale.maxWidth = someBiggerValue;
this.scale.maxHeight = someBiggerValue;

This should do the trick!

But, you might be wondering: why? what the hell? what are we doing here?! Calm down, answers are coming your way.

First, we set the scaleMode. There are 3 different scale modes:

  • NO_SCALE: Don't scale. Ever.
  • SHOW_ALL: Show the complete game, but don't stretch it (so, some borders/margins might appear on screens with weird proportions)
  • EXACT_FIT: No matter what happens, glue the game exactly to the screen

We then set some optional properties, and finally tell the game to actually scale itself! We tell it to do a SHOW_ALL with the properties we assigned to it, and refresh it just in case something has gone wrong or has resized, and then we're done.

But, what if the user resizes the screen?

We got you covered!Add this somewhere in that window.onLoad function in your game's html page:

//This function is called when the browser resizes
var resizeGame = function () {
     //Refresh the scaling of the game!
     game.scale.setShowAll();
     game.scale.refresh();
}

//Add an event lister to the browser window - if it resizes, call the resizeGame() function
window.addEventListener('resize', function(event){
     resizeGame();
});

But, what ifI want different scale modes for different devices?

Phaser checks that too. Like this:

//Check with if statements, what device the user's on
//Desktop
game.device.desktop
//Android
game.device.android
//Apple devies
game.device.iOS
game.device.iPad
game.device.iPhone

//Check browsers
game.device.chrome
game.device.firefox
game.device.ie
game.device.safari

//Check OS
game.device.macOS
game.device.windows

And there's even more, but I think this is already more than you need.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)