Pixel Perfect Collision Detection

I am currently playing with a few idea's and most of them require some form of pixel perfect collision detection between sprites.. I have a .png image (with transparency) that I draw into a sprite and would like to know how to get pixel perfect collision…

Viewing 1 to 20 (23 Total)
Pixel Perfect Collision Detection

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

I am currently playing with a few idea's and most of them require some form of pixel perfect collision detection between sprites.. I have a .png image (with transparency) that I draw into a sprite and would like to know how to get pixel perfect collision detection.

Most AS3 implementations require the .getBounds() function, which does not exist on cpp targets.

Have any of you got a method that you would like to share tongue out

Thanks,

Tags:
Posted on October 13, 2011 at 6:13 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

How odd, I've literally just had this issue :p

I ended up porting over some old pixel perfect collision detection AS3 class i had lying around (cant remember where it came from, its not mine and the original coder hasn't put any info / comments in it).

It's here if you want it smiling

Posted on October 13, 2011 at 7:17 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

Just remembered it came from an old flash game tutorial series by Michael J Williams, don't think the class was his though.

Anyways since it's [the tutorial] been around for a fair few years there's a good chance its outdated and theres some nicer, shinier ways to do it, but I've just tested it now (admittedly without any proper benchmarks) and it seems fast enough.

Let me know how you get on.

Posted on October 13, 2011 at 7:22 PM

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

Re: Pixel Perfect Collision Detection

Great thanks for that!

However, It only works for Flash Targets!

When you compile anything other than flash (cpp), The compiler complains about a few missing functions! Here's the output:

C:\Users\Me\Documents\Projects\OnlineProjects\PixelCollisionTest>haxelib run nme test
"Test.nmml" webos
Source/PixelPerfectCollisionDetection.hx:18: characters 24-41 : nme.display.DisplayObject has no field getBounds
Source/PixelPerfectCollisionDetection.hx:19: characters 24-41 : nme.display.DisplayObject has no field getBounds
Source/PixelPerfectCollisionDetection.hx:33: characters 4-54 : Invalid arguments
Source/PixelPerfectCollisionDetection.hx:33: characters 4-54 : Function 'draw' requires arguments : source, ?matrix, ?colorTransform, ?blendMode, ?clipRect, ?smoothing
Called from ? line 1
Called from InstallTool.hx line 403
Called from InstallTool.hx line 83
Called from installers/InstallerBase.hx line 112
Called from installers/WebOSInstaller.hx line 27
Called from installers/InstallerBase.hx line 1005
Called from InstallTool.hx line 218
Uncaught exception - Error running: haxe Export/webos/haxe/release.hxml

Posted on October 13, 2011 at 7:30 PM

Zaphod

Zaphod
Total Posts: 218
Joined: September 15, 2011

Re: Pixel Perfect Collision Detection

I want to help with this error:
Source/PixelPerfectCollisionDetection.hx:33: characters 4-54 : Function 'draw' requires arguments : source, ?matrix, ?colorTransform, ?blendMode, ?clipRect, ?smoothing

blendMode argument in bitmapdata's draw method should be BlendMode in flash only and String in all the other targets.

Posted on October 14, 2011 at 12:44 AM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

Zaphod, give it one of these:

#if flash
alpha1.draw(alpha2, null, null, BlendMode.LIGHTEN);
#else
alpha1.draw(alpha2, null, null, "LIGHTEN");
#end

The tricky bit for me is getting the bounding rectangles, since the cpp targets don't have the function DisplayObject.getBounds(...)

Been trying to replicate the getBounds function but not having too much luck at the moment.

Any ideas anyone?

Posted on October 14, 2011 at 4:40 AM

Zaphod

Zaphod
Total Posts: 218
Joined: September 15, 2011

Re: Pixel Perfect Collision Detection

I forgot to say that blendMode in cpp must be lowercase.

Posted on October 14, 2011 at 8:17 AM

singmajesty

singmajesty
Total Posts: 2191
Joined: August 25, 2011

Re: Pixel Perfect Collision Detection

In a game I created with NME, I wanted pixel-perfect point detection, for mouse overs.

At first I checked for object collision, then checked the pixel color to make sure it was not transparent, but I instead switched to a system where I could define a custom hit area for an object (as a series of points), and I used the vector drawTo commands to create an invisible vector shape. This was nice, actually, because all my graphics could be rendered in a single layer if I wanted, and I could sort my hit area objects so that the most important objects had priority, even if they were visually under something else.

As for game collision, I ended up using Box2D to handle my collisions. None of this, however, means that getBounds () should not be implemented in NME, but I thought I would share what I used smiling

Posted on October 14, 2011 at 6:35 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

Ok, I've sort of fixed the class... ... ... I think... ... (would need more testing maybe).

I did this by cobbling together a getBounds type system of my own using the following two functions:

public static function GetBoundingRectangle(objectgrinisplayObject):Rectangle {
var rect = object.transform.pixelBounds;
ApplyParentScaleToRectangle(rect, object.parent);

return rect;
}

public static function ApplyParentScaleToRectangle(rect:Rectangle, parentgrinisplayObjectContainer) {
rect.x = rect.x / parent.scaleX;
rect.y = rect.y / parent.scaleY;

if (parent.parent != null) {
ApplyParentScaleToRectangle(rect, parent.parent);
}
}

It works with the test cases I have and the class now compiles to cpp without any moaning (havent run it on a device just yet).

I've updated the .zip file with the new class. Here's the linky link.

Any thoughts?

Posted on October 14, 2011 at 6:57 PM

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

Re: Pixel Perfect Collision Detection

Just tried the new class levelbylevel and it's a no go.. It compiles without errors, but no collisions are detected.

I think this is because on cpp the object.transform.pixelBounds is null..

I just tested a trace on the var rect and all its values are 0.

Looking deeper into nme, the pixelbounds function returns "alloc(Null)", so pixel bounds wont work sad

Posted on October 14, 2011 at 7:05 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

Alas, lol, back to the drawing board...

I can of course just define a rectangle using localToGlobal on the stage for the object's coordinates then it's width and height variables. The problem comes the minute you rotate the object.

I need to come up with a method of getting and axis aligned bounding box for any display object that takes into account it's rotation. But its late and my trigonometry has never really been up to par ;)

Posted on October 14, 2011 at 7:10 PM

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

Re: Pixel Perfect Collision Detection

Probably not the best idea, but would it be possible to create a temporary DisplayObject for each displayObject the collision is between, and then adding them as a child to the temporary displayObject, then grabbing the width + height (Will work for if it rotated I think..), thus creating the bounding box, even when its rotated...

If you understand tongue out

Posted on October 14, 2011 at 7:13 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

I did try something similar to that, made my display objects disappear from the stage for some reason :p To be fair the attempt was lost amongst a million different "solutions" with lots of traces and lots of commented out code :p

Posted on October 14, 2011 at 7:17 PM

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

Re: Pixel Perfect Collision Detection

Haha, This is currently what I'm doing for my bounding box collision test with rotated sprites (They're rectangles, but they are rotated at either 0, 90, 180, 270 degrees, so it's ok)

See attached image


Just tried what I said before, and yeah, My sprites disappear from the stage too... lol

Attachments: explanation.png
Posted on October 14, 2011 at 7:21 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

Nice drawing smiling

I can calculate the width and height of the rotate displayobject, but where I struggle is in getting its position. How're you doing that?

I found whose code it was to begin with, it's the AS3 CollisionDetectionKit (available here) by Corey O'Neil. In case anyone's interested smiling

Posted on October 14, 2011 at 7:41 PM

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

Re: Pixel Perfect Collision Detection

I'm just trying to re-create what I had before I re-wrote all of this code actually, And I can't seem to do it. I had buried my image within 2 sprites to get what I needed, or something..

To be honest, I'm lost..

Posted on October 14, 2011 at 7:44 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

I've drawn a rubbish diagram to show what I need. If anyone knows any high-school level maths to help me, id well appreciate it, lol

Picture here

Posted on October 14, 2011 at 7:53 PM

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

Re: Pixel Perfect Collision Detection

I found this for you on stackoverflowhttp://stackoverflow.com/questions/6657479/aabb-of-rotated-sprite...

Have a look at the image! Looks like gold to me!

Posted on October 14, 2011 at 7:58 PM

levelbylevel

levelbylevel
Total Posts: 35
Joined: September 14, 2011

Re: Pixel Perfect Collision Detection

That is infact gold:

Since the width and height of the rotated DisplayObject are actually the correct values. All we need to use that fantastic little diagram (which has now been saved for many a years useful service) for is calculating the correct point for the top left corner. I ended up with the following, which is a bit wordy, sorry:

public static function GetBoundingRectangle(objectgrinisplayObject):Rectangle {
var rotation = object.rotation;
if (rotation < 0) {
rotation = 360 + rotation;
}

var position = new Point(object.x, object.y);
if ((rotation > 0) && (rotation < 360)) {
if (rotation < 90) {
position.x -= object.height * Math.sin(rotation);
}
else if (rotation == 90) {
position.x -= object.width;
}
else if (rotation < 180) {
position.x -= object.width;
position.y -= object.width * Math.sin(rotation);
}
else if (rotation == 180) {
position.x -= object.width;
position.y -= object.height;
}
else if (rotation < 270) {
position.x -= object.height * Math.sin(rotation);
position.y -= object.height;
}
else if (rotation == 270) {
position.y -= object.height;
}
else {
position.y -= object.width * Math.sin(rotation);
}
}

return (new Rectangle(position.x, position.y, object.width, object.height));
}

It's not particularly ellegent looking code, but it does seem to work on flash (on iPhone it's collision detection seems a little off, ill look into this).

It does make the, somewhat limiting, assumption that the two DisplayObjects your checking for collision against are children of the same DisplayObjectContainer.

I'll work on it some more but for now, I've updated the .zip and here's the linky link.

Night night all.

Posted on October 14, 2011 at 9:18 PM

wtsnz

wtsnz
Total Posts: 74
Joined: September 11, 2011

Re: Pixel Perfect Collision Detection

I've tried the class you linked too above and it work-ish, Like you said, the collision detection is off on cpp targets (by quite a lot!)

Has anyone made any progress in the last few days? I've not..

Posted on October 17, 2011 at 8:20 PM
« Previous12Next »