[Flash8] shape based collision detection

I had to do shape based collision detection like Grant Skinner describes here:
http://www.gskinner.com/blog/archive...8_shape_b.html

Try swf here:
http://img109.imageshack.us/my.php?image=test36cs.swf

My code here, mc with linkage name backmc is the background, mc back2 is the moving one and there is mc mouse inside back2 which will be dragged:

Code:

---

import flash.display.BitmapData;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Rectangle;
this.attachMovie ("backmc", "backmc", 1);
this.attachMovie ("back2", "backmc2", 2);
backmc2.mouse.startDrag (true);
this.onEnterFrame = function () {
        var myMatrix:Matrix = new Matrix ();
        var myCT:ColorTransform = new ColorTransform (0, 0, 0, 1, 0, 255, 255, 0);
        var myBmp:BitmapData = new BitmapData (400, 250, false);
        myBmp.draw (backmc, myMatrix, myCT, "normal");
        myCT = new ColorTransform (0, 0, 0, 1, 255, 255, 255, 0);
        myBmp.draw (backmc2, myMatrix, myCT, "difference");
        var cB:Rectangle = myBmp.getColorBoundsRect (0x00FFFFFF, 0x00FF0000, true);
        var collision:Boolean = true;
        if (cB.width == 0 and cB.height == 0) {
                collision = false;
        }
        _root.collision=collision;
};

---

/*originally posted by tonypa,moved to its own thread by tomsamson*/

Also, you could use built-in BitmapData.hitTest method:

"Performs pixel-level hit detection between one bitmap image and a point, rectangle or other bitmap image. No stretching, rotation, or other transformation of either object is considered when doing the hit test.

If an image is an opaque image, it is considered a fully opaque rectangle for this method. Both images must be transparent images to perform pixel-level hit testing that considers transparency. When you are testing two transparent images, the alpha threshold parameters control what alpha channel values, from 0 to 255, are considered opaque."

This example uses bitmapData.hitTest method:
http://img394.imageshack.us/my.php?image=test45ki.swf

Move circles with arrow keys. Notice how they wont move if any of the circles collides with any rectangle.

This is how it works:
*circles are squares are separate mcs
*from both mcs bitmapdata is created
*when arrow key is pressed bitmap.hittest is performed between 2 bitmaps moving starting point in correct direction by 1 pixel until speed value is reached or hittest returns true.

which method do you think you would use. this bitMap data hitTest seems better than getColorBoundsRect. But i noticed in your other post, i doesn't support rotation

I suppose it depends what you need. With getColorBoundsRect you can actually get the coordinates of the point colliding too. With bitmap.hitTest you only get true or false. But hitTest method is much easier to use.

If you want to rotate mcs, then you need to create new bitmapdata after rotation and draw mc into bitmapdata again.

ahhh, i see. So using the getColorBoundsRect method is kinda like shape flag hitTesting, i don't remember ever needing corrdinates from a hitTest, so this bitMapData hitTest is probably the way to go. Just another question Tonypa. Since you are the master of tiles (in my opinion). With the new scrolling engines, do you think a tileBased engine (one which sets graphics, collisions based on mathematics) will soon become obsolete. I mean, you will still use tile based methods, like recording Array positions, but hitTesting will be different. This bitMap data looks pixel perfect, i'd be interseted to know if it still operates at high speeds.

I dont think math based collision will ever be obsolete no matter what engine you use. I have not tested any of this for speed so I dont know really how fast the bitmap vs hittest performs. Plus, with math you can also get the point of collision which can be very important if your game involves physics like balls rolling down on slopes because of gravity. It all depends very much on what type of game you are building, most games dont need perfect collision detection, but some cant live without it.

is this only possible with bitmaps, or will it work with vectors?

Quote:

---

Originally Posted by Blips

is this only possible with bitmaps, or will it work with vectors?

---

It will work with both. You can convert any movie clip containing both bitmaps and vectors into bitmapdata object. The example with bitmapData.hitTest method actually uses only vectors, those circles and rectangles are all drawn in Flash. But like I said, you could use bitmaps (gif, png) too.

hey, how do you use BitmapData, cause I need it but don't understand it.

I have this code to detect collisions, but the cars get stuck when they're not actually touching:

for (n=1; n<=_root.maxNoOfCars; n++) {
carNo = "car"+n;
thisName = _name;
if (carNo == thisName) {
notThisCarNo = "";
} else {
notThisCarNo = carNo;
}
if (_root.cars[thisName].hitTest(_root.cars[notThisCarNo])) {
if (thisName == _root.activeCarNo) {
_root.speed *= -0.5;
} else {
speed *= -0.5;
}
}
}

How do I use the BitmapData for each car ???

Pretty useful but it isn't very effective in games and such where everything is animated and bitmap caching slows the runtime.

Thanks for the info, I learned a thing or two reading it.

That's interesting. this is the first time I read a good reason to upgrade to flash 8.
I guess this collision detection is CPU intensive. A benchmark would be very instructive.

Quote:

---

Originally Posted by Inglor

Pretty useful but it isn't very effective in games and such where everything is animated and bitmap caching slows the runtime.

Thanks for the info, I learned a thing or two reading it.

---

It depends, I was able to get about 50 things moving in which things were rotated, animated using bitmapData and it kept around 28 - 30 fps.

Using bitmap and (if(mc.hittest(_mousex, _mousey){} are practically the same thing I've noticed. If you look at my example (one that i've found) you'll see that it amounts to the same thing.

Quote:

---

Originally Posted by swak

Using bitmap and (if(mc.hittest(_mousex, _mousey){} are practically the same thing I've noticed. If you look at my example (one that i've found) you'll see that it amounts to the same thing.

---

Not really...

You are testing an exact point with the mc.hittest...(or in your example's case, you're testing a total of 8 points) while BitmapData, you can test a shape versus a shape.

EDIT: Actually, I just notice Tonypa's example pretty much shows this:

http://img394.imageshack.us/my.php?image=test45ki.swf

There are a bunch of circle... different sizes and shapes in this example. They can contact with different squares.

There are only 2 Bitmap hittest for everything in this example.

Is it possible to do bitmap data with vectors directly?

No, but it is possible to make a copy of the vectors into a bitmapData layer for hit testing purposes only.

It is basically what Tonypa is doing.

Download his example (see above) and play around with the two movie clips.

Add and remove shapes, draw different shapes.

The only conditions (for the circle movie clip anyhow) is that the shapes can not be positioned beyond the 0,0 point (I.E. you can draw something which goes from -20 to 20 because it will only test from 0 to 20).

-pXw

Quote:

---

Originally Posted by WilloughbyJackson

It depends, I was able to get about 50 things moving in which things were rotated, animated using bitmapData and it kept around 28 - 30 fps.

---

Not what I meant, in the sample the images are scrolled, scrolling doesn't require re-caching where actual fbf or tween animation (with scaling) does

Yes, its true, Inglor. Whenever you change the content (animation, tween etc) you would need to create new bitmapdata from the object. Turning bitmap caching on actually does exactly this, it creates bitmapdata object from the object then draws that bitmap instead of real mc.

But I honestly have seen very few games where collision is done with real animations. Most games simplify the collision to circle or rectangle which rarely changes through the game. If you want to detect collision between complex animation then what options do you have? The bitmapdata is only way to do it.

Circles and rectangles don't require hitTest to check if they hit stuff, you can just use math.

I do realise that BitmapData is currently probably the only reasonable option for this. The problem is that this rarely works in complex games with animation which is a disappointment.

I still appreciate the info

Thank you. It was my understanding that bitmapdata had to be done with bitmaps.

Quote:

---

Originally Posted by WilloughbyJackson

Not really...

You are testing an exact point with the mc.hittest...(or in your example's case, you're testing a total of 8 points) while BitmapData, you can test a shape versus a shape.

EDIT: Actually, I just notice Tonypa's example pretty much shows this:

http://img394.imageshack.us/my.php?image=test45ki.swf

There are a bunch of circle... different sizes and shapes in this example. They can contact with different squares.

There are only 2 Bitmap hittest for everything in this example.

---

Problem with this example. I can't reproduce it. Even if I copy over the exact code and exact object names that he uses it doesn't work. Could someone please show me what I'm doing wrong?

Quote:

---

Originally Posted by Inglor

I do realise that BitmapData is currently probably the only reasonable option for this. The problem is that this rarely works in complex games with animation which is a disappointment.

---

May I ask how you reached this conclusion?

Quote:

---

Originally Posted by swak

Problem with this example. I can't reproduce it. Even if I copy over the exact code and exact object names that he uses it doesn't work. Could someone please show me what I'm doing wrong?

---

bitmapData works a bit different from usual hit detection.

The first problem is Tonypa is taking a snapshot of the entire world, starting at point (0,0) or the upper left hand corner of the screen. This was not written for object to object collision (ball vs square) but object to background (ball vs square in a movie clip which fits over the root). The squares clip should be inside of something which has a registration point at 0,0 and that is what should be copied to bitmapData.

Secondly, bitmaps hittest similarly to how they attach... They start at the upper left hand corner. Thus the circle should have the registration point in the upper left hand corner.

Finally, because you are not moving ahead 1 pixel by 1 pixel, you're going to need something to tell how far into a target the object has travelled. For that, Tonypa did another experiment with using the colorRect overlap which can tell you how far your object has overlapped the background. Is this the best solution, who knows. This is all still pretty new.

-pXw

Attached is the corrected file...

Thank you. It's a bit funky though.