cocos2d-html5 碰撞检测的几种方法

游戏中的碰撞还是比较多的,比如角色与角色的碰撞,角色与墙壁的碰撞,角色与怪物的碰撞等,都需要

进行碰撞的检测,来触发一定的事件

最近在尝试制作一个小游戏的时候需要用到碰撞检测,然后就查了下资料,并在论坛进行提问等算是找到了比较满意的碰撞检测方法,这里记录下来

现在自己知道的方法算是有了三种了,下面一一记录并分析下他们各自的优缺点

1、就是官方提供的,根据getBoundingBox();方法获取要检测的碰撞物体的范围,然后再根据rectIntersectsRect();方法进行判断需要检测的两个精灵是否有重叠,有则发生碰撞;

优点:适合对规则的矩形物体进行检测碰撞,简单,直接

缺点:对于复杂图形不友好,对于碰撞的检测不准确,使用中有种莫名其妙的感觉

var dollRect = sprite.getBoundingBox();
var dollHeadRect = this.catchHand.getBoundingBox();
if(cc.rectIntersectsRect(dollRect, dollHeadRect)){
      //发生碰撞事件
}

2、第二种是在网上找到的,我感觉有些麻烦,不过相对于第一种,对于不规则物体支持的好了一些

这里根据BoundingBox 的 上下左右的中间点来判断碰撞,使检测的更准确一些

优点:使碰撞检测更准确一点

缺点:麻烦

    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)){
          //发生碰撞
     }

3、第三种就是我现在使用的,不过这个针对大小比较规矩,即接近正方形比较好,但是对于外形可以复杂

这个碰撞检测就是要给精灵添加一个radius属性,设置精灵以中心为原点,radius为半径的碰撞区域,然后去判断两个精灵的中心点的距离是否小于radius之和,如果是则发生碰撞;

优点:更准确,简单

缺点:对于长的图片碰撞不友好

想判断距离首先要知道一个方法:pDistance();这个方法是cocos2d-html5获取两个坐标点之间的方法,使用这个方法我们就可以获取两个精灵中心的距离

     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){
         //发生碰撞
     }

     //针对第三三种方法又加深了一下,使得对矩形类的精灵也能有好的判断,
     //主要就是分别对X和Y方向设置不同的Radius,然后去进行分别判断
     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;
     }

总结:综上所述,碰撞检测的方法不止一种,(应该还有其他的方法是我不知道的)在适合的时候选择合适的方法才是最好的,

更多cocos2d-html5开发文章可以关注牛人 touchsnow的博客:http://blog.makeapp.co

也可以去我的个人博客站点:Melove 我爱http://www.melove.net

cocos2d-html5 碰撞检测的几种方法,布布扣,bubuko.com

时间: 2024-10-15 00:08:38

cocos2d-html5 碰撞检测的几种方法的相关文章

html5中让页面缩放的4种方法

html5中让页面缩放的4种方法 2013-10-22 14:45:03 分类: Web开发 1.viewport这种方法,不是所有的浏览器都兼容 2.百分比这种方法,可以兼容大部分浏览器,但是修改幅度比较大.main .login .txt1{margin-top:8.59375%; position:relative;}3.css transform这种方法,可以兼容大部分浏览器,但是页面的位置是居中的.w320{transform: scale(1,1);-ms-transform: sc

将HTML5封装成android应用APK文件的几种方法(转载)

越来越多的开发者热衷于使用html5+JavaScript开发移动Web App.不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数.一方面,用户在使用习惯上,不喜欢在浏览器上输入复杂的网址:另一方面,Html5 Web App 存放在服务器端,在每次使用时需要进行数据传递,会造成流量浪费.有些开发者不想接触复杂的JAVA代码,那么,有什么办法,既可以使用HTMl5开发应 用,又可以将其简单封装成APK文件呢? 一.Android SDK中的WebView1.

让你的HTML5&amp;CSS3网站在老IE中也能正常显示的3种方法

起初,IE其实也是一款非常有进取心的浏览器.但经过一段时间的蛰伏后,它已经成为了我们生活中的一道障碍.微软现在又重新开始向其它浏览器发起挑战,但事实情况是,新版的现代IE浏览器一直滞后于谷歌浏览器和火狐浏览器.我们还不得不想办法兼容早期的IE浏览器.下面提到的三种方法能快捷轻松的让你的HTML5&CSS3网站在微软的主要浏览器中也能神奇的运行! htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元

Html5 页面中 JavaScript 启动调用的三种方法比较

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 首先,来看一下 Html5 页面引用 JavaScript 代码的几种方式: 1.Html5 页面中使用 <script>  标签容纳

HTML &lt;!DOCTYPE&gt; 标签 布局引用的几种方法 行级元素与块级元素

HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</title> </head> <body> 文档的内容...... </body> </html> <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTM

表单验证--几种方法总结

表单验证--几种方法总结 HTML5中custom data-*特性与asp.net mvc 3 表单验证:http://www.2cto.com/kf/201204/127526.htmljQuery html5Validate基于HTML5表单验证插件:http://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/基于Bootstrap+jQuery.validate F

总结调用Flash的几种方法

一.Adobe 提供的方法 <object width="200" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <param name="

7种方法解决移动端Retina屏幕1px边框问题

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

cocos2dx之实现扑克牌翻转效果的三种方法

*************************************************************************************** 时间:2015-04-10 作者:Sharing_Li 转载注明出处:http://blog.csdn.net/sharing_li/article/details/44980493 **********************************************************************