Forums » Help » distanceTo | collision of 2 circular shapes

Hello friends.

I need some help with collision detection, eighter touches() or distanceTo()

Got 2 Entities. If both are set to
size: {x:30, y:30},
distanceTo works fine. it would output 60 to console.

whilst one player entity at (30,30) vs one damaging entity with size (20,20) outputs 44 on the left side and 54 on the right boundary

var len =ig.game.getEntitiesByType(EntityGlobe).length;
for(var i=0; i<len; i++)	
{
	var dist = this.distanceTo(ig.game.getEntitiesByType(EntityGlobe)[i])
	console.log(dist);
}

im drawing both with canvas context as follows:

ctx.arc(this.pos.x, this.pos.y, this.size.x, 0, Math.PI*2);
and i guess there might be a radius problem. size.x/2 to have a 30x30 hitbox but a 15x15 character didnt solve it.

long story short:
center point playerX and entityX while in collision seems to be offset. entity is getting spawned at playerX
if i move playerX a tiny bit to the left, distance will be decreased from ~7.1 to ~5.x
wich makes no sense.

thank you and may your journey with your friend .js be with less chaos theory

solved it by simply resetting the anchor point to center

	distanceTo: function( other ) {
		//var xd = (this.pos.x + this.size.x/2) - (other.pos.x + other.size.x/2); 
		//var yd = (this.pos.y + this.size.y/2) - (other.pos.y + other.size.y/2);
		var xd = (this.pos.x) - (other.pos.x); 
		var yd = (this.pos.y) - (other.pos.y);
		return Math.sqrt( xd*xd + yd*yd );
	},

I don't quite understand your problem but I made this demo that might help understand distanceTo

Use arrow keys to move "player" block. Space to stop. Distance to "enemy" is show.

The two entities are 32x32 and have no offset, so the distanceTo is calculated from the upper left corner of each 32 pixel box.

source on github minus the impact folder

Vash, entity positions are based on the top left corner (not the center). So basically you are breaking the distanceTo function the way you're modifying it. I would recommend turning on the debug module and enabling "collision box drawing". You may find that your entities are not actually positioned in the places that you're seeing them.