Sorry, your browser doesn't support Canvas.

Object Collision

On the left canvas, It illustrates how display object collision works in CasualJS Framework.

Collision Approach

Firstly, each display object has a bound rectangle, you can get it with DisplayObject.getRect(). We compute the intersection of the two rectangles of comparing objects, if so, we check the bitmap pixels within the intersection rectangle to see if they are collision.

Methods to use:
DisplayObject.getRect(target);
DisplayObject.hitTestObject(object, usePixelCollision, tolerance);


The second parameter "usePixelCollision" determines whether to use pixel collision or simple rectangle collision.

For example:
var bmp1 = new Bitmap(img1);
stage.addChild(bmp1);
var bmp2 = new Bitmap(img2);
stage.addChild(bmp2);

trace(bmp1.hitTestObject(bmp2, false));
trace(bmp1.hitTestObject(bmp2, true));