Several methods of cocos2d-html5 Collision Detection

There are still many collisions in the game, such as the collision between roles and roles, the collision between roles and walls, and the collision between roles and monsters.
Collision Detection to trigger certain events


I recently used collision detection when trying to create a small game. I checked the information and asked a question in the forum. I found a satisfactory collision detection method. I recorded it here.


There are three methods I know. The following describes and analyzes their respective advantages and disadvantages.
1. It is officially provided. Get the range of the collision object to be detected based on the getBoundingBox (); method, and then rectIntersectsRect (); method to Determine whether the two elves to be checked overlap. If yes, a collision occurs;
Advantage: it is suitable for detecting and colliding regular rectangular objects. It is simple and direct.
Disadvantages: unfriendly to complex graphics and inaccurate collision detection.

Var dollRect = sprite. getBoundingBox (); var dollHeadRect = this. catchHand. getBoundingBox (); if (cc. rectIntersectsRect (dollRect, dollHeadRect) {// collision event}

2. The second type is found on the Internet. I feel a little troublesome, but it is better to support irregular objects than the first type.

Here, the collision is determined based on the center points of the upper, lower, and lower BoundingBox to make the detection more accurate.
Advantage: more accurate Collision Detection
Disadvantage: Trouble

Var box1 = sprite1.getBoundingBox (); var bottom = cc. p (box1.x + box1.width/2, box1.y); var right = cc. p (box1.x + box1.width, box1.y + box1.height/2); var left = cc. p (box1.x, box1.y + box1.height/2); var top = cc. p (box1.x + box1.width/2, box1.y + box1.height); var box2 = sprite2.getBoundingBox (); if (cc. rectContainsPoint (box2, left) | cc. rectContainsPoint (box2, right) | cc. rectContainsPoint (box2, top) | cc. rectContainsPoint (box2, bottom) {// collision}

3. The third type is what I use now. However, this is a good rule for the size, that is, it is better to approach a square, but it can be complicated for the shape.
This collision detection is to add a radius attribute to the sprite, set the sprite to center as the origin, radius as the radius of the collision area, and then determine whether the distance between the two genie centers is less than the sum of radius, if yes, a collision occurs;
Advantage: more accurate and simple
Disadvantage: unfriendly to long image collisions
To determine the distance first you need to know a method: pDistance (); this method is the cocos2d-html5 to get the method between two coordinate points, using this method we can get the distance between two sprite centers

Var sprite = this. dolls3 [I]; var distance = cc. pDistance (this. catchHand. getPosition (), sprite. getPosition (); var radiusSum = sprite. radius + this. catchHand. radius; cc. log ("distance:" + distance + "; radius:" + radiusSum); if (distance <radiusSum) {// collision} // The third three methods are further deepened, so that the Genie of the rectangle class can have a good judgment, // set different Radius for X and Y respectively, and then judge var distanceX = Math respectively. abs (this. catchHand. getPositionX ()-sprite. getPositionX (); var distanceY = Math. abs (this. catchHand. getPositionY ()-sprite. getPositionY (); var radiusYSum = sprite. radiusY + this. catchHand. radius; if (distanceX <sprite. radiusX & distanceY <radiusYSum) {this. catchDollSucceed (sprite); return ;}

Conclusion: In summary, there are more than one collision detection method (I do not know another method). It is best to select the appropriate method when appropriate,

More cocos2d-html5 development articles can follow touchsnow blog: http://blog.makeapp.co

You can also go to my personal blog site: Melove I love http://www.melove.net