Forums » Help » Scaling entity is casuing problems with the collision box

After scaling an entity there seems to be some problems with the position of the collision box.

I'm scaling the entity in it's draw function like this:

draw: function() {
	ig.system.context.save();
	ig.system.context.scale( this.random, this.random );
	this.parent();
	ig.system.context.restore();
},

this.random usally is simply a variable for a random number but in this case let's say it's 1.5.

While the unscaled entity would normaly work like this https://dl.dropboxusercontent.com/u/51029492/1.png

The scaled one will stand under the actual collision map.

https://dl.dropboxusercontent.com/u/51029492/2.png

While the Debug Mode is showing the collisionbox is at it's normal place it actually doesn't seem so.

So does anybody knows this problem and/or could tell me how to fix it (without simply changing the offset of the collisionbox)?

In your second screenshot, the collision box is not actually where it appears to be. The collision box represents the position and size of the entity in the game world. And this has not been changed by the above code.

You have however scaled the entire canvas context for the duration of the draw call. When you do this, something to keep in mind is that things will scale outward from point 0, 0.

In other words, if you want to make the entity scale bigger from it's origin/center, you would need to translate the canvas such that the entity origin is at 0, 0. Then scale. Then translate back again.

draw: function() {
      var scale = this.random;
      var originX = (this.pos.x + this.size.x/2) * ig.system.scale;
      var originY = (this.pos.y + this.size.y/2) * ig.system.scale;
      ig.system.context.save();
      ig.system.context.translate(originX, originY);
      ig.system.context.scale(scale, scale);
      ig.system.context.translate(-originX, -originY);
      this.parent(); // draw
      ig.system.context.restore();
}

Thanks Joncom!!! It helped me a lot to understand what's actually going on.
It's now looking like this https://dl.dropboxusercontent.com/u/51029492/3.png but I suppose the collision box simply is still having it's old unscaled size while being in the middle of the entity.

Yes, because you don't change the entities properties, only how it's drawn.

Or to put it another way:

In computer games, you always need to think of your entities as some data structures that can be manipulated and changed in memory. The entire game logic should run in the computer's memory without you seeing anything.

The visual stuff is just like a "layer" on top of the game logic, which represents the current internal state of every entity. Right now, you are messing with the visual layer only, but your real goal is to change the logic underneath.

Have you seen this thread? http://impactjs.com/forums/code/so-you-wanna-scale-individual-entities

Edit: The trick would be to set the entity.size.x and entity.size.y properties according to the scaled size. Then, your collision box should fit the visual size.