My host suffered a DDoS, and my site wasn't loading. Anyways, just a quick update:


Revert to Growth should be online everywhere in about 3 weeks.Sadly, the sponsorship process is a long one, but I will be choosing my sponsor tomorrow, and it will take about three weeks to prepare it for its world launch. Awesome.


The next in the collision series should be coming within the next week as well. Look out for it!

Last time we learned how to check for a collision between two axis aligned rectangles and that collision detection doesnt have to be scary.

Thanks to John Blackburne for pointing out a code optomization:

In your code, change any division by 2 to multiplication by .5 (multiplication is faster than division).

While having good collision detection is helpful, its not that useful. If you are making a game (especially a platformer), chances are that you need to do something after they collide. You know, something along the lines of separating them so that they DON'T overlap. A character going through the wall or ground isn't my idea of a good game. So lets do something about it!

You may say: "Well thats all fine and dandy, but how do you get to that point?


The good news is that we already have all the information we need with the last code, so we just need to change it a little. Instead of making a function that returns a boolean, we'll just make a function that DOES something. No returns nessecary.


This is what we have right now:


function checkAABB(r1:MovieClip, r2:MovieClip, custW1:Number = 0, custH1:Number = 0, custW2:Number = 0, custH2:Number = 0):Boolean{

var fAbs:Function = Math.abs;
var overlap:Boolean;

var xr1:Number = r1.x;
var yr1:Number = r1.y;
var xr2:Number = r2.x;
var yr2:Number = r2.y;

(custW1 == 0) ? wr1 = r1.width*.5 : wr1 = custW1*.5;
(custH1 == 0) ? hr1 = r1.height*.5 : hr1 = custH1*.5;
(custW2 == 0) ? wr2 = r2.width*.5 : wr2 = custW2*.5;
(custH2 == 0) ? hr2 = r2.height*.5 : hr2 = custH2*.5;

var maxDistX:Number = wr1 + wr2;
var maxDistY:Number = hr1 + hr2;
var xDist:Number = xr1 - xr2;
var yDist:Number = yr1 - yr2;

(fAbs(xDist) <= maxDistX && fAbs(yDist) <= maxDistY) ? overlap = true : overlap = false;

return overlap;

}

This is what we will need to change:


function collide(r1:MovieClip, r2:MovieClip, custW1:Number = 0, custH1:Number = 0, custW2:Number = 0, custH2:Number = 0):void{

First, we change the function name. We arent just checking anymore. We're colliding. then we change the return type from Boolean to void. We wont need to return anything.


With that in mind, we'll skip to the end and just erase this line:

return overlap;

Now this is when the real change happens. This is the code that will separate the rectangles if they chould overlap. Change this:

(fAbs(xDist) <= maxDistX && fAbs(yDist) <= maxDistY) ? overlap = true : overlap = false;

To this:

if(r1 != r2){

if(xDist <= maxDistX && yDist <= maxDistY){
 
if(maxDistX - xDist < maxDistY - yDist){

(r1.x < r2.x) ? r1.x -= maxDistX - xDist : r1.x += maxDistX - xDist;

}

else if(maxDistY - yDist < maxDistX - xDist){

(r1.y  < r2.y) ? r1.y -= maxDistY - yDist : r1.y += maxDistY - yDist;

}

}

}

if(r1 != r2){

All this means is: If r1 is not the same object as r2. This prevents an object from trying to seperate from itself (it does nothing, so it wastes CPU).

if(xDist <= maxDistX && yDist <= maxDistY){

You already recognise this code, this just detects if they are overlapping.

if(maxDistX - xDist < maxDistY - yDist){

(r1.x < r2.x) ? r1.x -= maxDistX - xDist : r1.x += maxDistX - xDist;

}

This code checks to see if the distance the recatangles are overlapping is smaller on the x axis than the y axis. To seperate objects realisticlly, you need to use the smallest distance of overlap, and only seperate one axis at a time.

After it checks to see if the x axis overlap is smaller than the y axis overlap, then it checks to see which side r1 is on comparitivly to r2. It then pushes it out the exact distance nessecary (determined by taking the maxDistX and subtracting it from the distX. This is the exact amount of overlap).

else if(maxDistY - yDist < maxDistX - xDist){

(r1.y  < r2.y) ? r1.y -= maxDistY - yDist : r1.y += maxDistY - yDist;

}

This is the same thing, but it only activates if the y overlap is larger than the x overlap.

This is further proof that you dont need to stress over basic collision. It is simple stuff. what we have here is pixel perfect collision detection and seperation for simple axis alligned rectangles. Feel free to use this code as you see fit, of course.


Suprisingly, the collision seperation is faster than the checking itself. Strange? Yeah, pretty much.


Here is what you end up with:

Have you ever played a game with bad collision? It's not a very good experience. Bad collision in a game snowballs into other problems. It can interfere with the controls, interfere with the gameplay, and basically anything else that relies on objects overlapping (which is typically a lot). If you are just starting Actionscript, then you are probably using hitTestPoint() or hitTestObject(), flash's built in collision detection. HitTestPoint() tests any given point pixel-perfectly against a graphical object. hitTestObject() uses two graphical objects' bounding boxes to collide.There are pro's and cons with both:

Pros:

hitTestPoint() - Easy to use, and it tests one point pixel perfectly against a graphical object. This can be extremely useful, as it is pixel perfect(meaning it returns true is it is touching any pixel that the object is comprised of).


hitTestObject() - Easy to use is honestly the only thing I can think of. It's pretty crappy otherwise.


Cons:


hitTestPoint - A point is a very small area (obviously). What if you need a bigger area? Using a lot of hitTestPoints will result in a slower program to get the same results as with other methods.

hitTestObject() - You dont get any flexibility with hitTestObject. The bounding boxes are being tested (the boxes who's dimensions are the objects width and height). That means if you dont need that entire area tested, or need more tested, you are out of luck. Not to mention that its a very slow method.


Though theres not really a suitable cure for hitTestPoint() that I can give you, I can give you the cure for hitTestObject!


Now after that very long intro, I can finally say: Welcome to the first of my collision series tutorials: AABB to AABB!

Essentially, what I'm going to give you is a hitTestObject with flexibility and speed. The collision series tutorials are based on math (everyones favorite subject), so if you have some kind of phobia, please leave (dont leave). This type of collision detection is called AABB to AABB (AABB is an axis aligned rectangle [no rotation]).


Example:

It is actually quite simple. We just have to calculate the distance between 2 of its axes. Then you check to see if they are touching by comparing the distance to the maximum distance they could be while still touching. Confused? Dont be, I will show you.


In order to be overlapping another rectange, it has to be overlapping on both axes, like so:

Testing this in Actionscript is simpler even than it looks. We need a little bit of information first though. We need the width of both of the objects, the height of both of the objects, and the x,y positions of both of the objects. Luckily, flash makes this easily avaliable to us. We will work with two rectangles (lets call them r1 and r2):


var wr1:Number = r1.width;
var hr1:Number = r1.height;
var wr2:Number = r2.width;
var hr2:Number = r2.height;

var xr1:Number = r1.x;
var yr1:Number = r1.y;
var xr2:Number = r2.x;
var yr2:Number = r2.y;

That was easy. And thats all the raw information we need to solve this collision problem. From now on. We will simply be manipulating this information from now on.

The next thing we will need to do is find the max distance between them before they stop overlapping. If you think about it, it is just half of their width added together. Then half of their height added together for the other axis. Since we wont be needing the full width or height data of the rectangles, lets go back and halve our variables:

var wr1:Number = r1.width/2;
var hr1:Number = r1.height/2;
var wr2:Number = r2.width/2;
var hr2:Number = r2.height/2;

Awesome. Let's calculate the max distances now:


var maxDistX:Number = wr1 + wr2;
var maxDistY:Number = hr1 + hr2;

Now were getting somewhere. Of course, this is just the begginning. We havent even tested the overlap yet. So close, yet so far...


We can easily check the distance between the rectangles on both axes by subtracting the x and y distances of the 2 rectangles. Guess what that mean? More variables!!!

var xDist:Number = xr1 - xr2;
var yDist:Number = yr1 - yr2;

We are now finally ready to check the overlap!!! All this variable preparation has lead us up to this:


var overlap:Boolean;

if(xDist <= maxDistX && yDist <= maxDistY){
overlap = true;
} else {
overlap = false;
}


If you test the code ouy on a couple of rectangles, you may notice that it doesn't work. Why could that be?! Well, your xDist or YDist variables arent always positive. A negative reading will skew the equation, because there isn't negative distance. Flash gives us the Math class to handle such things, specifically Math.abs(). Lets make it into a variable for speeds sake (pulling a static class variable from a local position is kind of slow):

var fAbs:Function = Math.abs;

Now we can redo that nasty code:

if(fAbs(xDist) <= maxDistX && fAbs(yDist) <= maxDistY){
overlap = true;
} else {
overlap = false;
}

Eh. That code is working perfectly fine, but if/else statements arent the fastest way to go. If only we had a really codey looking operator that could make the code faster and impress our friends out of confusion... Enter the conditional operator.


The conditional operator looks something like this:

(booleanValue) ? ifTrue : ifFalse;

Thats not so bad right? Lets add our if/else statement in there:

(fAbs(xDist) <= maxDistX && fAbs(yDist) <= maxDistY) ? overlap = true : overlap = false;

Congratulations!!! You've just... well... replicated hitTestObject(). Dang!!!

That sounded a lot cooler in my head. Anyways, we now have a faster version of hitTestObject(), which still doesnt help us in the flexibility department. I do still have a cure though, so dont run away yet. The good thing about math based detection is that it's based on numbers. So why don't we just change the numbers! This would be a good use of a function with parameters. This is the anatomy of the function:


function someFunction( param1:Type, param2:Type, etc:Type):ReturnType{ 
//do stuff here
 };


The function can use the parameters you give it as variables inside the function. This is not only super cool, but amazingly useful. lets write our function and its parameters now:


function checkAABB(r1:MovieClip, r2:MovieClip, custW1:Number = 0, custH1:Number = 0,      custW2:Number = 0, custH2:Number = 0):Boolean{

//function stuff here

}


we are shoving lots of info into our function here, so I will explain it all:


r1 & r2 are our faithful rectangles


custW1 & custH1 are the numbers we want to set as our 'width' and 'height' for r1


custW2 & custH2 are the same thing, but for r2


You may notice that the custom widths and heights are set equivelant to something already. What this allows us to do is skip over those if we want, as they already have a pre-set value.


That means if we just type...


checkAABB(rectangle1, rectangle1);


... it will set the testing widths and heights to 0. Wait... we dont want that. Lets make some conditionals to help set it straight and make it easy on ourselves. If we dont want to type in a custom test width or height, just set it to the real width or height:


function checkAABB(r1:MovieClip, r2:MovieClip, custW1:Number = 0, custH1:Number = 0,      custW2:Number = 0, custH2:Number = 0):Boolean{

var wr1:Number;
var hr1:Number;
var wr2:Number;
var hr2:Number;

(custW1 == 0) ? wr1 = r1.width/2 : wr1 = custW1/2;
(custH1 == 0) ? hr1 = r1.height/2 : hr1 = custH1/2;
(custW2 == 0) ? wr2 = r2.width/2 : wr2 = custW2/2;
(custH2 == 0) ? hr2 = r2.height/2 : hr2 = custH2/2;

}

Ok, all set. Now if we dont enter a custon value for them, they automatically become the true width or height. Now just add the rest of your code and return overlap (since the function requires you to return a value with the type Boolean). It'll look something like this:

I really drug this tutorial on and on. Thats not very much code, but its flexible on rectangle size and faster than hitTestObject! Please look for the next tutorial, where I show you how to separate the rectangles when they overlap!


*Edit* Next tutorial is here: AABB to AABB - Separation

I have decided to completely overhaul my site. To my fellow flash developers, it is more developer centric now, and I will be coming out with tutorials, post-mortems, and other studies in the coming months. To my fans, and other people visiting this site, you can still view my games in the "games portfolio" page. You can also learn to make flash games like me by going to the developer resources page. I hope you enjoy the new look and new focus.


-Psyflash