Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php on line 101

Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks/edd-blocks.php on line 101

Warning: The magic method GAINWP_Manager::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/gainwp.php on line 78

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 555

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 585

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 617

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 651

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 686

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 745

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 785
Scaling Objects Proportional in Phaser - Phaser Games

Scaling Objects Proportional in Phaser

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 () {

    }

}

 
Download Source Code

Leave a Comment