FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Learn JavaScript with Phaser

Polish: Scaling our Game and Sprites

We can make our game appear bigger on our web page. We can also make the size our sprites appear on the screen seem



Check the Code: what we need to know and do

Better death here needs us to alter the function called when player and enemy overlaps. Let's concentrate on animating the enemy, we need to change the sprite animation but also add a delay into the process of restarting the game so we can see the animation play out. So we'll need the following background knowledge

The code for a minimal example of the Scaling our Game and Sprites game polish element is shown here -  https://add-polish-resizing-via-scaling.glitch.me/

Going over the code:

Have a look at our code you will notice a new function called init;

playState.init = function () {
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;

The init() functionis a special one that gets called right at the beginning of the process of loading the game, before the preload function even. This is the right time to resize our whole game. 

To make our game occupy as much of the screen as we can we can add a new scale mode to the game. The scale mode here is SHOW_ALL which makes the game as big as it can without chopping off any of the bits.

The next two lines mentioning Align put the game is in the centre of our screens horizontally and vertically


To change the size of the character we can use the setScale() function after we have added the player into the game in create.

To make a giant of our player we can set the setScale to 2.

    player = game.add.sprite(100, 200, "player");

if we were to make only that change to scale then our character would be very blurred as by default or web page and game try to smooth out harsh edges (called anti-aliasing). We like the hard edges of oru pixel art so we need to tell the game to keep them.

We need go right back to one of the first lines of code to change the game constructor to deal with the blurring.

In our project there are two similar lines of code

 //var game = new Phaser.Game(480, 360, Phaser.AUTO);
var game = new Phaser.Game(480, 360, Phaser.AUTO,"","",false,false);

The first is commented out. It is a more simple way of creating our game but the problem is that if we do it in this way then our sprites get blurred when we make them bigger.

The second is the one that works. It add some extra parameters to our game constructor, the last of them is the one that sets the antialias variable of the game to false which means that our game character stays crisp.

Try swapping them over in the demo Glitch project to test it out.






There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.