This is the 2nd step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson02.html.
Scaling refers to how the game canvas will scale on different screen sizes. We can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.
The Phaser scale object
There's a special scale
object available in Phaser with a few handy methods and properties available. Update your existing preload()
function as follows:
function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; }
scaleMode
has a few different options available for how the Canvas can be scaled:
NO_SCALE
— nothing is scaled.EXACT_FIT
— scale the canvas to fill all the available space both vertically and horizontally, without preserving the aspect ratio.SHOW_ALL
— scales the canvas, but keeps the aspect ratio untouched, so images won't be skewed like in the previous mode. There might be black stripes visible on the edges of the screen, but we can live with that.RESIZE
— creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode.USER_SCALE
— allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode
The other two lines of code in the preload()
function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size.
Adding a custom canvas background colour
We can also add a custom background color to our canvas, so it won't stay black. The stage
object has a backgroundColor
property for this purpose, which we can set using CSS color definition syntax. Add the following line below the other three you added earlier:
game.stage.backgroundColor = '#eee';
Compare your code
You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:
Next steps
Now we've set up the scaling for our game, let's continue to the third lesson and work out how to load the assets and print them on screen.