Collisions * snoisilloC

[harrywatson]

Hey umm, lots of questions on collisions (collision-detection) so I thought I'd post some of my experience so far.

I'm far away from being, javascript competent or math competent so most of it I've found somewhere else and used.

Firstly acknowledging Pythagoras and the nice people at Easel js = Lanny Mc Nee.

var minDistance = 20;var dist = Math.sqrt(distX * distX + distY * distY);if (dist <= minDistance) {    // hit}

Beautiful isn't it? So simple. If I were smarter, or had the time, I would simply code this formula into all my colliding entities. 

 

I've never tried this one, the 'SAT'. Does that mean I sat on something? I might have, but it stands for Separating Axis Theorem.

 

I can refer immediately to David Geary's book 'Core HTML5 Canvas'.  Here is the SAT example..

 

http://corehtml5canvas.com/code-live/ch08/example-8.1/example.html

 

And here is a link for all the code examples from the book online..

 

http://corehtml5canvas.com/code-live/

 

Here is a code example for a square collision - sorry no attributes - can't remember where I got it, and have changed it a lot since I found it.

     function squareBump(x1, y1, w1, h1, x2, y2){if(x1 <= x2 && x1+w1 >= x2) &&(y1 <= y2 && y1+h1 >= y2){return true;  }}//Using square collisionif(squareBump(teddy.x, teddy.y, 128, 128, cupcake.x, cupcake.y)){   // The Rectangle collision            //teddy bumps into cupcake here    }

O well the above might be wrong in itself but hopefully you can see the rectangle logic.

Now here is circular collision detection which I've used on my own site.

		function bumpTeddy (xPos, yPos, radius){	//CIRCULAR COLLISION		var	distX = xPos - teddy.x;		var	distY = yPos - teddy.y;		var	distR = radius + 58;		if (distX * distX + distY * distY <= distR * distR){				return true			}	}

Opps! Sorry more dumb code, but we can see that the 'radius' is a new argument where the rectangle had four arguments. now we have three and determine our radius. + or - .

 

I've used this collision framework made for easeljs ...   http://indiegamr.com/easeljs-pixel-perfect-collision-detection-for-bitmaps-with-alpha-threshold/

 

Good for pngs - don't worry about frameworks, just dive into the code and grab it !

 

Ok Then, from what I've found so far with collision detection, remember I'm just a nooobeee, hack it up until get a result type coder.

 

1/ Get the code and squash it into your application until it works, only then try to understand it.

 

2/ Spend a lot of time fiddling with the collisions you have - that way you could get a new idea.

 

3/ If you have a successful collision, tweak and work it until it's perfect before looking for other code.

 

No not presuming to give advice except to myself. Thank you for your patience.