Cocos-js 之 使用Chipmunk实现碰撞 跟 碰撞的监听

Cocos-js 之 使用Chipmunk实现碰撞 和 碰撞的监听

这两天在用cocos-js  开发一个一堆小球碰来碰去的游戏,就打算选择一款物理引擎来简化代码。第一开始打算用box2d(网上一片好评),但是看看之后发现box2d适用于js-HTML版本,对js打包版本(jsb)是不适用的(我没有深入探究,不知道是不是)。于是打算使用Chipmunk来开发。但由于Chipmunk没有js文档,只有C++版本的(官网地址:http://chipmunk-physics.net/),百度也找不到合适的教程,在做碰撞监听这块儿时,废了很大功夫,在一定程度上是根据C++文档来猜js中对应的函数的。。。所以做完之后,写出这篇博客来方便有同样需求的哥们儿。(但不知效果如何)

博客中如有错误的地方,请大家指出,谢谢!


Cocos IDE工程代码免费下载地址:http://download.csdn.net/detail/u013647453/8910481

(目前功能有随机产生小球,点击屏幕产生小球,小球碰撞的监听和处理)

(注释掉的代码大家可以忽略)


1.先对Chipmunk的核心进行简单介绍。(摘自Cocos官方文档:http://cn.cocos2d-x.org/tutorial/show?id=2706)


Chipmunk物理引擎有一些自己的核心概念,这些核心概念主要有: 
空间(space):物理空间,所有物体都在这个空间中发生。
物体(body):物理空间中的物体。
形状(shape):物体的形状。
关节(joint):用于连接两个物体的约束。

使用Chipmunk物理引擎进行开发的一般步骤,如下图所示。

Cocos-js  之  使用Chipmunk实现碰撞      跟    碰撞的监听


2.游戏Demo的概述

  • 只有一个scene:PlayingScene和一个layer:PlayingLayer。大家只需要关注PlayingLayer中代码即可。
  • PlayingLayer代码结构概述:(重点关注红色标注的函数代码)
ctor():
initPhysicsWorld:创建物理空间(space),设置重力,设置空间边缘及其弹性、摩擦和碰撞检测要用到的参数:shape.setCollisionType(constant),这个参数相当于物体的一个标志。对于所有参与碰撞的物体,要监听其碰撞的话都应该设置这个标志,在添加碰撞监听、处理监听到的事件时都要用到。
scheduleUpdate:调用update函数,用来告诉Chipmunk引擎更新界面。
schedule:每两秒调用addBall()来随机添加一个小球。
onEnter():
this.space.addCollisionHandler
COLLISION_TYPEA, COLLISION_TYPEB  //要监听的两种碰撞物体的标志
collisionBegin,  collisionPre, collisionPost, collisionSeparate //碰撞过程的回调函数):
space添加碰撞监听,需要针对每个碰撞的情况来添加监听。小球游戏中参与碰撞的物体有:上、左、右边界;下边界小球(因为小球碰到下边界将来要特殊处理,所以在这里把边界分为两部分)。碰撞的情况有:小球和小球;小球和上、左、右边界;小球和下边界。那么这里需要添加三类监听。
cc.EventListener.create():手势监听,用来监听触摸手势,在触摸位置添加小球。

update():用来告诉Chipmunk引擎更新界面。

addBall():在空间(space)中添加物体。添加body:设置形状、位置、速度;添加shape:设置形状、弹性、摩擦和碰撞检测要用到的参数;添加sprite。

碰撞后的回调函数:(摘自http://my.oschina.net/lonewolf/blog/173593)

collisionBegin():碰撞开始时调用,碰撞处理代码可以放在这里

collisionPre():持续碰撞(相交),可以设置相交时独自的摩擦,弹力等

collisionPost():调用完collisionPre后,做后期处理,比如计算破坏等

collisionSeparate():物体分开,当删除一个shape时也会调用


3.从下图的角度来看Chipmunk

Cocos-js  之  使用Chipmunk实现碰撞      跟    碰撞的监听

重点函数及其完成的功能

initialPhysicsWorld:创建物理空间(space),指定空间边界。

addBall:创建空间中的物体,创建空间中的形状,链接精灵与物体。

addCollisionHandler:检测(监听)碰撞。

collisionBegin:处理碰撞。

简化的过程是这样的:

创建一个space,给space添加物体。然后只需要通知Chipmunk更新界面就行了(update函数)。

附加解释:

边界是不动的物体,小球是动的物体。

Chipmunk更新界面时是根据space设置的属性:gravity等;边界的属性:弹性、摩擦、碰撞物体的标志;小球的属性:初速度、位置、弹性、摩擦、碰撞物体的标志   这些属性,然后通过时间的推移,并处理过碰撞之后,来计算并更新小球未来的位置的。

给space添加的碰撞监听其实就是告诉Chipmunk在物体碰撞的过程中(碰到、相交、分离),如果碰撞的两个物体的COLLISION_TYPE(碰撞物体的标志)跟传递的两个参数一致的话,就调用所传递的collisionBegin,collisionPre,collisionPost,collisionSeparate函数。


4.代码解读

详细代码就请大家下载代码来看吧,加了英文注释(欢迎吐槽),一方面是中文编码问题,另一方面是我自己的习惯问题,不习惯的哥们儿还请见谅,不过都是常见英文,比较容易理解。

Cocos IDE工程代码免费下载地址:http://download.csdn.net/detail/u013647453/8910481
(注释掉的代码大家可以忽略)

为什么不把代码贴上来呢?

因为我在读别人博客的时候,感觉把代码分散开来,然后在代码前加一句说明并没有实际意义,相对直接读有注释的源代码来说,后者可以有一个整体的感觉,而非零散的代码片段,另外加上注释后,并不会影响对代码的理解。


主要参考的博客:

http://my.oschina.net/lonewolf/blog/173593

http://www.cnblogs.com/linn/p/3656041.html

http://cn.cocos2d-x.org/tutorial/show?id=2706


Chipmunk官网(有C++ API文档和一些教程):

http://chipmunk-physics.net/


如有谬误,欢迎指出,谢谢!


最后,附上Android真机的运行截图(其实没什么用):

Cocos-js  之  使用Chipmunk实现碰撞      跟    碰撞的监听

版权声明:本文为博主原创文章,未经博主允许不得转载。