Ch025 - Game Space: Scaling our Sprites

Game Space: Scaling our Sprites

We can make our sprites appear bigger on our web page. This may be useful is case you just want to change how they look, but it can also make for some interesting changes in game play too as this examples shows.

Check the Code: what we need to know and do

The code for a minimal example of the Scaling our Sprites game is shown here - https://jamm-labs.github.io/ggcp/grooow-examples-mechanic/game.js

Going over the code:

Have a look at our code you will notice the following lines in the PlayState.create function ;

  player.body.gravity.y = gravity;
  player.scale.setTo(0.7);
  player.anchor.setTo(0.5,0.5);

To make our game more interesting here we’ll start with the player a bit smaller by setting the scale to be 70 percent, i.e. 0.7 rather than 1. As we are going to change the size later we also need to change the anchor of the sprite to avoid a jumping effect on resizing.

  var takeCoin = function (player, coin) {
    coin.kill();
    winNoise.play();
    player.scale.setTo(player.scale.x * 1.2); 
    player.body.gravity.y += 200;
  };

To make out player bigger the scale is increased by multiplying it by 1.2. At the same time, the level of gravity is increased as well to give the impression that our player sprite weighs more too.

You can see that this process as well as changing the look can also change the way our game plays.