Scaling Objects in Phaser
Especially with the rise of mobile, I have found myself having to resize objects more often. This is to compensate for the differences in screen size. Changing one property such as height or width is easy, but in the past making an image scale proportional required some mathematics such as:
new_width = old_width*(new_height/old_height);
Maintaining the aspect ratio
But we do not have to worry about that in Phaser. It does a lot of the work for us. When we change the height or the width of a sprite the scale object properties will update. For example, if you change the width of a sprite, the scale.x property will change. All we need to do in that example to maintain the aspect ratio is to copy one property into the other.
If you change the width copy the scale.x into the scale.y
mySprite.scale.y=mySprite.scale.x;
If you change the height do the reverse.
mySprite.scale.x=mySprite.scale.y;
Here is the technique in practice
Here is the code for the example
var StateMain = {
preload: function () {
game.load.image("doughnut","images/doughnut.png");
},
create: function () {
this.makeDoughnuts();
game.input.onDown.add(this.makeDoughnuts, this);
},
makeDoughnuts:function()
{
for (var i = 0; i < 5; i++) {
var doughnut=game.add.sprite(game.world.randomX,game.world.randomY,"doughnut");
doughnut.width=game.rnd.integerInRange(50, 150);
//when we change the width, we automatically change the scale.x
//setting the scale.y to scale.x will make the
//object proportional
doughnut.scale.y=doughnut.scale.x;
}
},
update: function () {
}
}