Recently I’ve needed some shape based hit detection in As 3.0 so as a starting point I decided to convert Grant’s CollisionDetection class. I’ve split the code out into 3 methods and optimized it a bit by creating a BitmapData as small as possible .
Here’s a description and example of each of the methods.
ComplexHitTestObject
[as]HitTest.complexHitTestObject( target1:DisplayObject, target2:DisplayObject, accuracy:Number );[/as]
Returns a Boolean depending on whether the 2 DisplayObjects passed as parameters are overlapping each other. The 3rd parameter specifies how accurate the test it. The higher the number, the greater the size the BitmapData is drawn internally, and therefore the scale at which the 2 DisplayObjects are drawn onto the BitmapData. The default for the accuracy parameter is 1. If you try and pass a value of 0 or less the method will thorw an error.
IntersectionRectangle
[as]HitTest.intersectionRectangle( target1:DisplayObject, target2:DisplayObject );[/as]
Returns a Rectangle matching the co-ordinates where the boundaries of the 2 DisplayObjects passed as parameters overlap. This method does a simple test much like hitTestObject().
ComplexIntersectionRectangle
[as]HitTest.complexIntersectionRectangle( target1:DisplayObject, target2:DisplayObject, accuracy:Number );[/as]
ComplexIntersectionRectangle example
Returns a Rectangle matching the co-ordinates where the 2 DisplayObjects passed as parameters overlap. The 3rd parameter specifies how accurate the test it. The higher the number, the greater the size the BitmapData is drawn internally, and therefore the scale at which the 2 DisplayObjects are drawn onto the BitmapData. The default for the accuracy parameter is 1. If you try and pass a value of 0 or less the method will thorw an error.
You can view the source in any of the examples above by right clicking and selecting ‘View source’. Each include the HitTest class, also included below.
[as]package ws.tink.display
{
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
public class HitTest
{
public static function complexHitTestObject( target1:DisplayObject, target2:DisplayObject, accurracy:Number = 1 ):Boolean
{
return complexIntersectionRectangle( target1, target2, accurracy ).width != 0;
}
public static function intersectionRectangle( target1:DisplayObject, target2:DisplayObject ):Rectangle
{
// If either of the items don’t have a reference to stage, then they are not in a display list
// or if a simple hitTestObject is false, they cannot be intersecting.
if( !target1.root || !target2.root || !target1.hitTestObject( target2 ) ) return new Rectangle();
// Get the bounds of each DisplayObject.
var bounds1:Rectangle = target1.getBounds( target1.root );
var bounds2:Rectangle = target2.getBounds( target2.root );
// Determine test area boundaries.
var intersection:Rectangle = new Rectangle();
intersection.x = Math.max( bounds1.x, bounds2.x );
intersection.y = Math.max( bounds1.y, bounds2.y );
intersection.width = Math.min( ( bounds1.x + bounds1.width ) – intersection.x, ( bounds2.x + bounds2.width ) – intersection.x );
intersection.height = Math.min( ( bounds1.y + bounds1.height ) – intersection.y, ( bounds2.y + bounds2.height ) – intersection.y );
return intersection;
}
public static function complexIntersectionRectangle( target1:DisplayObject, target2:DisplayObject, accurracy:Number = 1 ):Rectangle
{
if( accurracy <= 0 ) throw new Error( “ArgumentError: Error #5001: Invalid value for accurracy”, 5001 );
// If a simple hitTestObject is false, they cannot be intersecting.
if( !target1.hitTestObject( target2 ) ) return new Rectangle();
var hitRectangle:Rectangle = intersectionRectangle( target1, target2 );
// If their boundaries are no interesecting, they cannot be intersecting.
if( hitRectangle.width * accurracy < 1 || hitRectangle.height * accurracy < 1 ) return new Rectangle();
var bitmapData:BitmapData = new BitmapData( hitRectangle.width * accurracy, hitRectangle.height * accurracy, false, 0×000000 );
// Draw the first target.
bitmapData.draw( target1, HitTest.getDrawMatrix( target1, hitRectangle, accurracy ), new ColorTransform( 1, 1, 1, 1, 255, -255, -255, 255 ) );
// Overlay the second target.
bitmapData.draw( target2, HitTest.getDrawMatrix( target2, hitRectangle, accurracy ), new ColorTransform( 1, 1, 1, 1, 255, 255, 255, 255 ), BlendMode.DIFFERENCE );
// Find the intersection.
var intersection:Rectangle = bitmapData.getColorBoundsRect( 0xFFFFFFFF,0xFF00FFFF );
bitmapData.dispose();
// Alter width and positions to compensate for accurracy
if( accurracy != 1 )
{
intersection.x /= accurracy;
intersection.y /= accurracy;
intersection.width /= accurracy;
intersection.height /= accurracy;
}
intersection.x += hitRectangle.x;
intersection.y += hitRectangle.y;
return intersection;
}
protected static function getDrawMatrix( target:DisplayObject, hitRectangle:Rectangle, accurracy:Number ):Matrix
{
var localToGlobal:Point;;
var matrix:Matrix;
var rootConcatenatedMatrix:Matrix = target.root.transform.concatenatedMatrix;
localToGlobal = target.localToGlobal( new Point( ) );
matrix = target.transform.concatenatedMatrix;
matrix.tx = localToGlobal.x – hitRectangle.x;
matrix.ty = localToGlobal.y – hitRectangle.y;
matrix.a = matrix.a / rootConcatenatedMatrix.a;
matrix.d = matrix.d / rootConcatenatedMatrix.d;
if( accurracy != 1 ) matrix.scale( accurracy, accurracy );
return matrix;
}
}
}[/as]
DUDE!!! This is sweet! Thanks for posting!
Cheers,
Sam
Great! But: in addition to this I wonder if someone found a 100% working solution for dragged objects leaving the stage bounds. In your examples the circle may disappear and never seen again.
Grüße
_____
Arne
[...] Home About Tink » Blog Archive » AS 3.0 HitTest Tink » Blog Archive » AS 3.0 HitTest June 25th, 2007 Lea [...]
Thanks. Very handy.
But when try to view the source, I’m taken to http://intlstore.mozilla.org
@Arne
You can do this easily in AS 3.0 by adding a listener to the Stage object.
stage.addEventListener( MouseEvent.MOUSE_LEAVE, onStageMouseLeave ):
@Benny
I have no idea why that is???
Here’s the links to the source
ComplexHitTestObject source
IntersectionRectangle source
ComplexIntersectionRectangle source
Thanks for the links. The view source seems to be working fine now. Dumping my cache seemed to sort it. Using firefox 1.8.1.4 on a mac…
[...] f Grant Skinner’s Collision Detection class in AS 3.0. Good stuff, have a look see. This entry was posted on Monday, June 25th, 2007 a [...]
greetings,
wondering if you have any examples of the hit test using AS3 and something
like a maze ?
peace!
@ swearingen
nope, have you gave it a go?
no, I’m afraid it’s above me (for now) …
Please forgive this newbie for being so stupid, but I don’t know how to get this into a .fla file and get it to work. Is there no .fla file? Or can you post a link to ComplexHitTestObject.fla? I’m afraid to come back here and read the comments ;-o
Thank you! Saved me alot of headakes compared to the cryptic BitmapData.hittest(). Very easy to use.
/Jonas
Hi,
will this work for rotated objects? Rotated display objects in flex will leave a transparent box behind. Are these treated accordingly?
This should work for any shapes at any rotation. I’ve not tested them in Flex it was original put together for a car game.
I not sure what you mean by display objects leave transparent boxes behind. Can you describe a user case so I understand what you mean little more.
@ Glen
sorry for such a sloooow reply I missed this one. You need to have a look into using external classes. You should find lots of info on using the Document Class in Flash 9, that would be a good start.
Hi Tink,
Actually I tested it with rotated objects and it worked. The accuracy has to be around 6 or more.
However it seemed that it was a bit slow. What’s the best accuracy value to use to strike a balance between efficiency and accuracy?
By the transparent box I mean that taking the example of a rectangle being rotated at 45 degrees it still is a rectangle. Images rotated in flex always rotate around a rectangle. For example even the hitTestObject of AS doesn’t work properly when 2 rotated objects at 45 collided. you will notice that one moving towards the other will hit the “transparent” area.
I don’t know how to explain correctly hope you meant what I mean. but no problem you’r seem to really take care of it.
Thanks again! You saved me a lot of work. The hitTest out there don’t really work and most of them told me they were never tested with rotated objects. but this one works. Amazingly enough you didn’t use the hitTest method of the BitmapData class.
Right your talking about the bounding box, there isn’t actually a transparent rectangle there.
Generally I would go with using an accuracy of 1. This means all objects are drawn at their actual size.
I used these classes in a small game I recently developed in my own time, after swearing for days searching for a solution to the lack of accurate collision detection in AS3. (I still cannot believe there is no function to do this in 3, when hitTest() in AS2 could do it!)
Anyway, I really appreciate your work on this – saved me a lot of headaches. And if you want to try the game for yourself, have a link! ;]
games.aneuri.net/paperplane
Hey Aneurin
The game was pretty cool. Cheers!
Hello Tink,
This seems like some very nice coding indeed. Been looking for some decent hitTest stuff.
Is it possible to get this code working for non-sprite objects? (like flash movieclips of more complex shapes).
I saw in Aneurin that this seem to be at work, but with all I’ve tried i cant seem to get to work. I’m still a bit new to AS3 so that may be why…
Ether way thanks for sharing your hard work!
@ iSc00t
It should work with any kind of DisplayObject (i.e. anything you can put in a display list and see on screen).
If you having it working with Sprite’s it should work in exactly the same way with other DisplayObjects.
@ Tink
Got it working good now (had a silly order mistake). Thank you very much again!
If I get this project up and running I’ll send you a link and give you credit for the coding if you want it.
Hey iSc00t
I’d love to see a link for the finished project, but don’t worry about a link. I would suggest you use the version in our new code repository and that has a license added to the code.
http://code.google.com/p/tink/
[...] やっとビットマップの中に入れたーっとちょっと喜んでます。 http://www.tink.ws/blog/as-30-hittest/ の HitTest と http://d.hatena.ne.jp/nitoyon/20071002/potrace の [...]
hi Tink,
will u marry me?
love,
john.
Thanks for the great script! It was critical for a flash heatmap app I am building. I’ll be sure to mention the props in the source – and hopefully i’ll remember to link you to it once it’s done
Having a bit of trouble with the hit test working from a loaded SWF. What I mean by that is i created a game which uses the your hit test. Works fantastic. Once I load that game SWF into another SWF though, the hit test just won’t work. Best I can figure is it has something to do with all the “root” references in the class. I’ve tried a hundred different things but still can’t get it to work. Any ideas?
Update to my previous comment. Loading the SWF into the main display list of another SWF works, but loading it into the display list of a movieclip which sits on the main stage won’t work.
Hey Aaron
I have come across this problem before, and I’m pretty sure its the following lines.
var rootConcatenatedMatrix:Matrix = target.root.transform.concatenatedMatrix;
matrix.a = matrix.a / rootConcatenatedMatrix.a;
matrix.d = matrix.d / rootConcatenatedMatrix.d;
To confirm this can you see if you get a different value for
target.root.transform.concatenatedMatrix
in the situation where it doesn’t work correctly?
Yes, I do get a different value, but only for tx and ty. In the single SWF instance I get (a=1, b=0, c=0, d=1, tx=0, ty=0). Loading the game SWF into a movieclip sitting on the main stage of the second SWF I get (a=1, b=0, c=0, d=1, tx=512, ty=384), tx and ty reporting the original SWF’s location relative to the second SWF’s main stage(in the middle of the stage).
I learned something more though. Importing the game SWF into the main stage of the second SWF works (which we knew), unless you reposition it. As long as the game SWF resides at 0,0 the game functions. Reposition it though and the hit test no longer works. I’m sure you noticed this as well but just in case I figured I would put it out there.
In all possible versions that I’ve tried out (single SWF, double SWF main stage, double SWF movieclip, etc.), they all report back a=1, b=0, c=0, d=1 but tx and ty are the only things that change. Let me know if this helps or if you have any other questions. I’m very interested in seeing if we can get this to work. Thanks again.
do you think you could mock up a very simple example (maybe just circles that hit like the examples above), and then send it me, so I can see if i can resolve the problem.
You can get me at blogATtink.ws
[...] ; return matrix; } } } 原地址http://www.tink.ws/blog/as-30-hittest/ 相关文章flash as3的文字描边效果 [...]
Nice work, but if one of the DisplayObjects is masked (mc1.mask = mymask;), the complexHitTestObject returns also true. I mean, if the one objects is partially hidden and I move with another object on these hidden elements, complexHitTestObject returns true… I hope you know what I mean and can give me an solution?
Thanks Tink,
The hitTestObject method wasn’t working for me when i wanted to compare label positions ( so that i would not get label overlaps on a map ) it returned true but not until the labels were very very far apart!.
This sorted it
Thanks
any solution to this addChild/position problem?
Great Class! Saved me loads of time man! THX
Thanx!
Thanks Tink,
It’s very useful,
for people in search for a solution in particle system (like 500 Objects) I recommend:
private function hitTest(point:DisplayObject):Boolean{
var pt1:Point = new Point(impactZone.x, 300);
var pt2:Point = new Point(point.x,point.y);
return impactZone.bitmapData.hitTest(pt1, 0xFF, pt2);
}
(impactZone is a bitmap ).
It`s very fast if you can live with only a point check.
regards Patrick
Hi Tink, thanks for the great class.
I am having the same problem as Aaron with the collision detection not working in a swf loaded into a larger swf (but working fine in a single swf). I was able to resolve the problem with the in built hitTestPoint method by using localToGlobal on the point, but i’m not sure how to employ a similar solution with a display object.
Did you or Aaron resolve the problem using your class? Would love to know a solution.
Many thanks
Michael
I never did find a solution and had to end up putting everything in one SWF.
I had the above problems in the project I originally ported this for and as I remember the error was due to a change in the values on rootConcatenatedMatrix.
To solve it I remember finding the difference between the value when it was running in it’s own SWF, and when it was loaded into another, and just mutiplied the values to compensate.
This was at a very early stage in the release of Flash Player 9, and whilst testing the project I found that the change in rootConcatenatedMatrix could be different each time I tested.
If this is the case can you please confirm by posting here.
Hi Tink, thanks for the reply.
I agree, I think this is exactly what’s happening. If I do a hitTestPoint I can trace out the difference and fix it with a root.localToGlobal
I just don’t know how to, or where to add the difference in the more complex hitText.
I’m using Flash Player 10 and I am actively checking for version 9.0.28 so i’m not sure if that would be an issue.
Thanks for your assistance mate
its these lines you’d have to amend
matrix.a = matrix.a / rootConcatenatedMatrix.a;
matrix.d = matrix.d / rootConcatenatedMatrix.d;
check the diff between rootConcatenatedMatrix.a and rootConcatenatedMatrix.d, when running in its own SWF of loaded into another, and then multiply or divide to normalize the values to what they would be when running inside their own SWF.
Tink,
Mate! thanks for your help. Got it working. It was actually the matrix.tx and ty values (which makes sense now I think about it). I have put in a very quick and dirty amendment but when I get time after the project is finished i’ll clean it up and send it to you if your interested … but this is essentially what i’ve done.
if(ConsoleSettings.OFFSET_STAGE){
matrix.tx = matrix.tx – ConsoleSettings.TX_OFFSET;
matrix.ty = matrix.ty – ConsoleSettings.TY_OFFSET;
}
ConsoleSetting is obviously my class where I keep all my console settings (hmmm).
Thanks again mate, if you’re ever in Melbourne ping me an e-mail and i’ll buy you a beer.
Michael
I think I found a weird bug…
the collision works when an object moves… however there is this funny situation that when two objects are collided .. sometimes the complexHitTestObject returns true and sometimes false (when both objects are not moving)
why is this?
[...] onclick=”javascript:pageTracker._trackPageview(‘/outgoing/www.tink.ws/blog/as-30-hittest/’);” href=”http://www.tink.ws/blog/as-30-hittest/”>http://www.tink.ws/blog/as-30-hittest/ の HitTest と http://d.hatena.ne.jp/nitoyon/20071002/potrace の [...]
@tink @aaron did you guys ever decide on a fix for this hitTest issue when loaded into another SWF and not set to 0,0?
Looks like Micheal fixed it but I’m not sure how I can implement it. Is there a way we can do this instead the Class itself or what are the options?
well I got it working for me! I guess I spoke a little prematurely. Its not a flexible fix but it does the trick. all that needs to be added is.
matrix.tx = matrix.tx – (250); //set to the x-cords of the game
matrix.ty = matrix.ty – (250); //set to the y-cords of the game
where the 250’s are where the SWF is being loaded. So this will have to change. but its a HACK for it to work quickly. Cheers!
Tink, thanks for share this awesome class !
The test i have done works like a charm !
The hitTest of the bitmap Data Class was really horrible to use.
For now i have tested with some png, and even when the objects are rotating, it works perfectly !
Thanks again !
Dimebagplan.
oops, sorry for double post, i have also the same problem as Aaron and Michael…
When i load it from a swf.
The collision don’t work anymore.
Do you know how to fix it ?
Thanks.
see corbanb’s solution above
[...] っていましたが 下記の手法では、画像単位で取れるようになりました。 http://www.tink.ws/blog/as-30-hittest/ 最近、仕事も多いので、誰か手伝ってください！ Today, 11:35 AM Leave a rep [...]
[...]
Hier is een klasse voor op de pixel hittest Tink Blog Archive AS 3.0 HitTest
__________________
[...]
thank you! worked flawless and saved me some time!
Hi Tink !
Thanks for this amazing work…
I’m trying to check for collision between circles that are rotated on the X axis (as if they were lying on a floor).
Is there a way to do so with your class (you said it should work at any rotation, but I assume you meant any 2D rotation) or will I have to check in 2D before applying 3D transformation ?
Thanks again.
I did mean any 2D rotation but can’t you just do the test on the 2D axis (x, y), and then just plot the points onto your 3D axis (x, z)?
I guess I’ll have to do it that way.
Thanks for your reply, and again for sharing your work.
Hey Tink, you have no idea how much this is appreciated. Thanks!
Hey There !
Really Great Class, thank you a lot Tink !
[...] a function to create a Intersection Retangle in the hitting area. Very useful in game development. (http://www.tink.ws/blog/as-30-hittest/) MochiDigits “MochiDigits provides a quick, and easy way for developers to encode their sensitive numbers [...]
[...] 為了解決這個問題 有人就開發了好用的class出來分享啦！！ as2版跟as3版(我當然是用as3來測試囉！) 真的是讓這件事情變得無比的愉快 只要判斷： [...]
I plan on using this code in an open-source AS3 platformer engine, but I’d like your permission first. Obviously you’ll get credit. Some pre-pre-pre-alpha samples are available on request.
Hi Ian
Please feel free to use it.
Thanks a lot! I plan on posting at least some of the engine soon.
What a great class!
I’m using it to detect valid/invalid drop positions in drag-n-drop within an as3isolib’s isometric scene.
That accuracy parameter is very useful
Thanks for sharing, Tink!
Looks like everyone has moved to the draw+draw.difference approach, I’m updating my version right now. Doesn’t look like anyone has found a faster generic pixel-perfect test.
The accuracy parameter is an interesting tweak. Do you find it gains you much performance? My tests don’t show much difference between bitmap datas of different sizes (other than reduced memory), the most expensive step seems to be the setup and draws (at any usable size).
[...] f his version is that it assumes the two objects have the same parent. Next, the venerable Tink posted his version that uses the same technique as The Actionscript Man but factors a more complicate [...]
Hey Tink. Great class! So far I’ve figured it out.
Only problems I’ve had were 1) your AS parser parses smilies – had to go in and fix two errors, but not a big deal.
and 2) a little stranger error. Upon first using complexHitTestObject, I got a constant FALSE, perplexing me. Upon using complexIntersectionRectangle and tracing the values, the x and y values change when there is a collision, but the width/height remain 0, hence the constant false being returned.
Any fix?
Thanks
`SiN
H SINT4X
If you make a simple example, enable ‘view source’, then post the link here I’ll take a look.
cheers
Tink
Tink, do you know how to solve this? I used two displayObject to detect either they collide or not and it returned sometimes true sometimes false. It doesn’t a problem when they are far apart–it returns true but it’s like that when they are near.
btw, the displayObject are vector image.
here is the code:
public static function isHitting(hitter:DisplayObject,hittee:DisplayObject,parent:DisplayObject,precision:Number):Boolean
{ if(hittee.hitTestObject(hitter))
{
var rect1:Rectangle = hitter.getBounds(parent);
var rect2:Rectangle = hittee.getBounds(parent);
var rectInt:Rectangle = rect1.intersection(rect2);
return searchCommon(hitter,hittee,rectInt,parent,precision)
}
else
{
return false;
}
}
public static function searchCommon(object1:DisplayObject,object2:DisplayObject,rect:Rectangle,parent:DisplayObject,precision:Number):Boolean
{
var returnValue:Boolean = false;
var p:Point = new Point();
for (var j:int = rect.y; j <= rect.y +rect.height && returnValue == false; j+=precision) {
if (returnValue == true) {
break;
}
else {
for (var i:int = rect.x; i <= rect.x + rect.width; i+=precision) {
p.x = i;
p.y = j;
p = parent.localToGlobal(p);
if(object1.hitTestPoint(p.x,p.y, true) == true && object2.hitTestPoint(p.x,p.y, true) == true)
{
returnValue = true;
break;
}
}
}
}
return returnValue;
}
If I use this class in a SWF (say, to hit test 2 squares) and then load that SWF into another SWF at a y or x of anything but zero, it seems to break.
Example:
var loader:Loader = new Loader();
loader.load(new URLRequest(“HitTest.swf”));
loader.y = 200;
addChild(loader);
in order to fix this I had to change
if( !target1.root || !target2.root || !target1.hitTestObject( target2 ) ) return new Rectangle();
// Get the bounds of each DisplayObject.
var bounds1:Rectangle = target1.getBounds( target1.root );
var bounds2:Rectangle = target2.getBounds( target2.root );
to
if( !target1.stage || !target2.stage || !target1.hitTestObject( target2 ) ) return new Rectangle();
// Get the bounds of each DisplayObject.
var bounds1:Rectangle = target1.getBounds( target1.stage );
var bounds2:Rectangle = target2.getBounds( target2.stage );
which messes up the intersectionRectangle function iff I wanted to use that for anything beyond internal use for the HitTest class. Lucky for me, I don’t need that for anything else.
I’m not going to try and fix this any further, but I thought you might be interested.
I love the possibilities that are opened up with this.
I used it with an inverted track clip and a sleigh for our companies viral campaign (http://www.d2digital.co.uk/viral.aspx) to test for the sleigh crashing into the side of the road.
I posted the car/sleigh script on my blog; http://www.d2digital.co.uk/blog/actionscript_3_code_for_a_2d_driving_car.aspx
Good work and thanks for enabling us to do much more cool stuff!
Nick
Hi-
I posted a while back asking for permission to use this class in a game engine I was building and you might be interested in seeing how useful it was to me. Check out flyte-engine.org if you’re curious. Your class has been renamed Collision, I hope that’s all right. Thanks a lot!
Fantastic code! Good job.
Thanks a bundle! Your hit test did the trick when my client said the hitTest wasn’t accurate. It’s insane that Flash doesn’t have a built in complex hit test? Or am I missing something? In AS2 wasn’t there a shapeFlag hit test? I don’t know why they don’t have something like that built in for AS3!
How do you enable “view Source” for flash projects? I did a quick google search and didn’t see anything.