Several methods of COCOS2D-HTML5 collision detection

Source: Internet
Author: User

The collision in the game is still more, such as the collision of character and character, the collision of character and the wall, the collision of characters and monsters, etc., all need
Perform a collision detection to trigger a certain event


Recently in the attempt to make a small game need to use collision detection, and then to check the information, and in the forum to ask questions such as found a relatively satisfactory collision detection method, recorded here


Now you know the method is three, the following records and analyze their respective advantages and disadvantages
1, is the official provision, according to Getboundingbox (); method obtains the range of the collision object to be detected, then according to Rectintersectsrect (), the method to determine whether there is overlap between the two sprites to be detected, and the collision occurs;
Advantages: Suitable for the detection of regular rectangular objects collision, simple, direct
Cons: For complex graphics unfriendly, the detection of collisions is inaccurate, the use of a kind of inexplicable feeling

var dollrect = Sprite.getboundingbox (), var dollheadrect = This.catchHand.getBoundingBox (); if (Cc.rectintersectsrect ( Dollrect, Dollheadrect)) {      //crash Event}


2, the second is found on the Internet, I feel a bit of trouble, but relative to the first, for irregular objects to support the better some

Here according to the upper and lower middle point of the boundingbox to determine the collision, so that the detection of more accurate
Pros: Make collision detection a bit more accurate
Cons: 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)) {          //Clash     }



3, the third is I use now, but this for the size of the rules, that is close to the square is better, but for the shape can be complex
This collision detection is to add a RADIUS attribute to the sprite, set the sprite as the origin, radius radius of the collision area, and then to determine whether the distance of the center point of the two elves is less than the sum of the radius, if it is a collision;
Advantages: more accurate, simple
Cons: Not friendly for long picture collisions
Want to judge distance first to know a method: Pdistance (); This method is COCOS2D-HTML5 to get the two coordinate points between the method, using this method we can get two Elf center distance

     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}//     for the 33rd method and deepened a bit, so that the wizard of the rectangle class can also have a good judgment,     // The main is to set the X and Y direction of the different radius, and then go to determine the     var Distancex = Math.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;     }



Summary: To sum up, collision detection method more than one, (there should be other methods I do not know) in the appropriate time to choose the right method is the best,

More COCOS2D-HTML5 development articles can focus on the Touchsnow blog: http://blog.makeapp.co

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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.