使用b2MouseJoint实现鼠标拖拽刚体的效果


要在Box2d中实现鼠标拖拽效果（当然在移动设备上就不是鼠标拖拽而是手指拖拽了），可以使用Box2d中定义的b2MouseJoint来制作。大体思路是，首先在ccTouchBegan事件中获取鼠标（以下不再区分鼠标或是手指）所在位置的刚体（如果有的话），接着在ccTouchMoved事件中通过更新b2MouseJoint的target的位置（更新为鼠标的当前位置），最后在ccTouchEnded事件中清理掉b2MouseJoint让刚体受力自由运动。
首先我们来完成获取鼠标所在位置的刚体的代码。
以cocos2d iOS with Box2d为模板创建Box2d工程（本文使用的是Box2d2.3.1版本），接着我们去掉HelloWorldLayer的addNewSpriteAtPosition方法中为盒子对象添加的纹理贴图部分（这样我们看到的就是原始的刚体骨架了，个人喜好哈哈），接着我们在HelloWorldLayer的init方法中把menu相关的代码都给注释掉，让我们的界面看着更简洁一些，然后使用循环，调用addNewSpriteAtPosition方法向场景中添加若干个盒子刚体来用于测试：
for (int i =0; i < 20; i++) {
   [self addNewSpriteAtPosition:ccp(s.width/2,s.height/2)];
}
添加完成后试运行一下：



这里我们添加了20个刚体。
接着把HelloWorldLayer的ccTouchesEnded方法全部注释掉。
接着我们让HelloWorldLayer继承ccTouchOneByOneDelegate协议，在HelloWorldLayer中重载两个方法用于注册和反注册touch事件分发：
-(void)onEnterTransitionDidFinish {
   [[[CCDirector sharedDirector]touchDispatcher] addTargetedDelegate:self priority:1 swallowsTouches:true];
}
 
-(void) onExit{
   [[[CCDirector sharedDirector]touchDispatcher] removeDelegate:self];
}
 
下面我们来说一下如何获取鼠标位置的刚体。
首先，鼠标的位置可以在touch事件中使用传入的参数touch来获取：
CGPointtouchLocation = [[CCDirector sharedDirector] convertToGL:[touchlocationInView:[touch view]]];
接着我们通过Box2d的AABB Query来获取某个区域内的所有fixture。
在工程中添加一个类MyQueryCallback，继承自b2QueryCallback：
类声明：
#import"Box2D.h"
 
classMyQueryCallback : public b2QueryCallback {
public:
   b2Body* body;
   MyQueryCallback();
   bool ReportFixture(b2Fixture* fixture);
};
类的方法实现：
#import"MyQueryCallback.h"
 
MyQueryCallback::MyQueryCallback(){
   body = nil;
}
 
boolMyQueryCallback::ReportFixture(b2Fixture* fixture) {
   body = fixture->GetBody();
   return false;
}
在方法实现中我们实现了ReportFixture方法，该方法作为AABBQuery的回调方法被调用。类中我们定义了一个b2Body刚体用来保存查询到的刚体对象。返回false表示停止继续查询，返回true则表示继续查询。
接着我们在HelloWorldLayer实现ccTouchBegan方法：
-(BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {

 //获取鼠标位置
   CGPoint touchLocation = [[CCDirectorsharedDirector] convertToGL:[touch locationInView:[touch view]]];
   MyQueryCallback callback;
   b2AABB aabb;

float margin = 0.00000000001f;

//定义一个AABB线框
   aabb.lowerBound.Set((touchLocation.x -margin) / PTM_RATIO, (touchLocation.y + margin) / PTM_RATIO);   //线框左上角
   aabb.upperBound.Set((touchLocation.x +margin) / PTM_RATIO, (touchLocation.y - margin) / PTM_RATIO);   //线框右下角
   world->QueryAABB(&callback,aabb);   //查询线框内的物体
   if (callback.body != nil) {
       //创建b2MouseJoint关节
   }
   
   return true;
}
在上面的代码中，首先以鼠标点击的位置为中心创建一个很小的矩形区域（即AABB），再定义我们自己的MyQueryCallback实例，调用QueryAABB方法来查询在AABB中的刚体，将结果反馈到MyQueryCallback中（通过ReportFixture方法）。
判断如果callback的body成员不为空（nil），说明鼠标点击的位置有刚体存在，然后就可以利用得到的刚体来创建b2MouseJoint了，下面是创建的具体代码：
if (mouseJoint!= nil) {
   world->DestroyJoint(mouseJoint);
   mouseJoint = nil;
}
body =callback.body;
b2MouseJointDefmouseJointDef;
b2BodyDefbodyDef;
b2Body*emptyBody = world->CreateBody(&bodyDef);   //创建一个空的刚体，这个刚体在b2MouseJoint中实际没有用到，只是为了满足创建Joint的一致性而使用，注意 不能是nil
mouseJointDef.bodyA= emptyBody;
mouseJointDef.bodyB= body;   //bodyB就是鼠标所在位置的刚体
mouseJointDef.target.Set(touchLocation.x/ PTM_RATIO, touchLocation.y / PTM_RATIO);   //设置Target，刚体就会向Target“飞去”
mouseJointDef.maxForce= 200;   //设置最大受力，受力越大，物体向Target飞过去的加速度就越快
mouseJoint =world->CreateJoint(&mouseJointDef);
注：需要在HelloWorldLayer中添加两个成员变量：
b2Body* body;
b2Joint*mouseJoint;
上面的代码中首先判断前一个mouseJoint是否已经清理掉了（因为这个成员是复用的，所以如果没有清理掉容易出问题）。接着通过定义b2MouseJointDef中的各项参数来创建关节（代码已经做过注释，不多赘述）。
完成后，还需要实现ccTouchMoved和ccTouchEnded两个方法：
-(void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event {
   CGPoint touchLocation = [[CCDirectorsharedDirector] convertToGL:[touch locationInView:[touch view]]];
   if (body != nil) {
       b2Vec2 target(touchLocation.x /PTM_RATIO, touchLocation.y / PTM_RATIO);
       ((b2MouseJoint*)mouseJoint)->SetTarget(target);
   }
}
 
-(void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
   if (mouseJoint != nil) {
       world->DestroyJoint(mouseJoint);
       mouseJoint = nil;
       body = nil;
   }
}
ccTouchMoved方法在鼠标移动的时候要实时更新MouseJoint的Target的位置，以便形成鼠标“拖拽”的效果。ccTouchEnded方法清理掉MouseJoint，这样物体在鼠标松开后便会回归到自然受力的状态（重力还有其他物体的力）。
好了，大功告成，测试一下效果：



哈哈，现在我们可以把盒子扔的满天飞了~~
 
好了，例子就到这里，如果有问题欢迎留言。