In cocos2d-js, if we want to check collision between two object, we usually use this method

var collision = cc.rectIntersectsRect(rect1, rect2);

rect1 and rect2 are the texture bounds of the objects. But on many conditions, the bounds contains some transparent areas,  and we don’t need these transparent area to check collision. So we enable Flax to edit the collider in Flash visually!

On previous tutorial, we took the soldier as example, now again!

In Flash, create a MovieClip symbol and set its linkage class to “Collider.Rect” and draw a rectangle in it. Note that the rectangle center is placed on the (0, 0) point. We call it as collider(We planned to provide another collider type “Collider.Circle”, but in working now! ).

Then get to back to the soldier, and drag the collider into it. Move the collider to the proper position and scale the width or height to cover the area you want to check collision. And name the collider to “collider__main”, see the red rectangle below! After exported by Flax, the collision will be checked by the red rectangle area.

On previous tutorial, we named all kinds of anchors to “anchor__xxxxx”. For collider, we use the same name rule: “collider__xxxxx”. You can create many colliders if you want, for example “collider__head”, “collider__arm” etc, and “xxxxx” always can be accessed in the game by this method

var anim = lg.assetsManager.createDisplay(“res/soldier.json”, “soldier”);

this.addChild(anim);

//var mainCollider = anim.mainCollider;

var headCollider = anim.getCollider(“head”);

//var headRect = headCollider.getRect();

var collision = headCollider.checkCollision(otherCollider);

In the future, we plan to support advanced physic edit instead of this kind of simple collider only!

Note: besides the “collider__main”, another special collider name in Flax is “collider__view”, it is used to define the visible or draggable area in lg.ScrollPane.