Forums » Help » How to stretch an image during gameplay?

ShopGame = ig.Game.extend({
   
    scaletest: new ig.Image('media/scaletest.png'),
  
    draw: function(){
	
        this.parent();
	this.scaletest.draw(50, 50);
        
    }
	
});

I've tried to put "this.scaletest.resize(2)" and other numbers besides 2 but nothing happens or I get very unexpected results. I want to change the size of a player entity when the player walks up or down so it looks like it is going farther away/getting closer to the user. I just need to know how to stretch/scale the image. Any ideas?

or stretch/scale the entity that contains multiple frames

So is there really no way to scale an entity?

There's no scaling built in, no. But you can always use the canvas API directly for stuff like that:

draw: function() {
	ig.system.context.save();
	ig.system.context.scale( 2, 2 );
	
	// draw whatever you want here. E.g. you could just call 
	// this.parent() 
	// to draw the entity's animation
	
	ig.system.context.restore();
}

that worked, thanks!

When I use dominic's code above the entity I'm resizing doesn't stay in position and starts parallaxing or what it's called (like a different distance when making layers).

What am I missing?

@ Kxen - you have to adjust the x / y position of your scaled entity to compensate for the scaling :

ig.system.context.scale( 2, 2 );
var offset = 4;
this.pos.x -= (this.pos.x /2)+offset;
this.pos.y -= (this.pos.y /2)+offset;