让刚体听我的——鼠标拖动Box2D刚体

时间:2021-09-17 18:36:54
在前面我们学习了键盘+ ApplyForce、ApplyImpulse和SetLinearVelocity 来控制刚体运动。 今天我们学习一下用 MouseJointDef 实现鼠标拖动刚体运动。

鼠标拖动刚体运动,这在Flash中实现起来是非常简单的:鼠标按下之后,调用startDrag()方法,这样对象就会跟随鼠标移动;鼠标弹起后,调用stopDrag()方法,停止拖动。

听起来确实很简单,那么这个方法是否适用于Box2D刚体呢?如果你看过掉落的苹果 教程,可以知道,Box2D的所有刚体都绘制在一个debugSprite中,也就是说,通过鼠标事件,我们只能获取debugSprite,并且只能执行对debugSprite的拖动,因此所有的刚体全部同时动起来,无法多每个刚体单独拖动,所以这条路行不通了。

有人可能会说了,每个刚体不是都有userData对象吗?它们都是DisplayObject,调用它们的鼠标事件,执行拖动,再更新刚体的坐标就好了。但是我想说的是,Box2D是用刚体来驱动userData的,而不是用userData来更新刚体的坐标,否则会跟Box2D内部的计算引起冲突,所以这条路也行不通了。

说了这么多,还是回到正确的方法上来。Box2D中有一个b2MouseJointDef对象,可以帮我们实现这个功能。

b2MouseJointDef是一个关节(关于关节,我会专门写一篇教程来介绍,大家稍安勿躁),用于链接鼠标和被拖动的刚体,它主要包含下面几个属性:
  • bodyA:关节连接的一个节点
  • bodyB:关节连接的另外一个节点
  • maxForce:限制鼠标关节上可以施加的最大的力,这里通常需要乘以刚体的质量multiplier * mass * gravity

了解了鼠标关节(这里我只简单的介绍这么多,在后面的教程我会专门介绍Box2D里的关节),接下来,我们开始编写拖动过程。

鼠标是否滑过刚体
首先,要确定是否在刚体上,并找出这个刚体。在Flash中,我们调用DisplayObject的MOUSE_OVER方法,可以判断鼠标是否滑过该对象。

与Flash不同,Box2D用b2World世界的QueryPoint方法来实现这个功能,QueryPoint方法如下:
  1. public function QueryPoint(
  2.     callback:Function,
  3.     p:b2Vec2
  4. ):void
复制代码
QueryPoint方法会遍历world中所有的刚体,判断p点是否在刚体上,如果是,则将刚体对应的b2Fixture传入到callBack函数中。然后我可以利用b2Fixture.GetBody()方法获取刚体,具体代码如下:
  1.         private function getBodyAtMouse():b2Body
  2.         {
  3.             //转换鼠标坐标单位,除以30从m该为px
  4.             var mouseVector:b2Vec2 = new b2Vec2(mouseX / 30, mouseY / 30);
  5.             //鼠标下的刚体
  6.             var bodyAtMouse:b2Body = null;
  7.             //queryPoint函数中要用到的回调函数,注意,它必须有一个b2Fixture参数
  8.             function callBack(fixture:b2Fixture):void {
  9.                 if ( fixture == null) return;
  10.                 //如果fixture不为null,设置为鼠标下的刚体
  11.                 bodyAtMouse = fixture.GetBody();
  12.             }
  13.             //利用QueryPoint方法查找鼠标滑过的刚体
  14.             world.QueryPoint(callBack, mouseVector);
  15.             //返回找到的刚体
  16.             return bodyAtMouse;
  17.         }
复制代码
拖动刚体
找到鼠标点击的刚体后,下面是拖动刚体。前面说过,我们是用鼠标关节MouseJointDef来实现拖动刚体,所以针对拖动过程,我创建鼠标关节,然后把点击的刚体设置为关节的一个节点,然后鼠标关节的目标点位鼠标点,并实时更新就好了,代码如下:
  1.         private function startDragBody(body:b2Body):void {
  2.             if (body == null) return;//如果鼠标下的刚体不为空
  3.             _isDragBodyWithMouse = true;//设置拖动标识为true
  4.             //创建鼠标关节需求
  5.             var mouseJointDef:b2MouseJointDef = new b2MouseJointDef();
  6.             mouseJointDef.bodyA = world.GetGroundBody();//设置鼠标关节的一个节点为空刚体,GetGroundBody()可以理解为空刚体
  7.             mouseJointDef.bodyB = body//设置鼠标关节的另一个刚体为鼠标点击的刚体
  8.             mouseJointDef.target.Set(mouseX / 30, mouseY / 30);//更新鼠标关节拖动的点
  9.             mouseJointDef.maxForce = 1000;//设置鼠标可以施加的最大的力

  10.             //创建鼠标关节
  11.             _mouseJoint = world.CreateJoint(mouseJointDef) as b2MouseJoint;

  12.         }
  13.         private function loop(e:Event):void
  14.         {
  15.             LDEasyBox2D.updateWorld(world);
  16.             //如果有鼠标关节存在,更新鼠标关节的拖动点
  17.             if (_mouseJoint != null) {
  18.                 var mouseVector:b2Vec2 = new b2Vec2(mouseX / 30, mouseY / 30);
  19.                 _mouseJoint.SetTarget(mouseVector);
  20.             }
  21.         }
复制代码

完整的代码和注释如下:

package
{
    import Box2D.Collision.b2AABB;
    import Box2D.Collision.Shapes.b2Shape;
    import Box2D.Common.Math.b2Vec2;
    import Box2D.Dynamics.b2Body;
    import Box2D.Dynamics.b2Fixture;
    import Box2D.Dynamics.b2World;
    import Box2D.Dynamics.Joints.b2MouseJoint;
    import Box2D.Dynamics.Joints.b2MouseJointDef;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import flash.ui.Keyboard;

    /**
     * http://www.ladeng6666.com
     * @author ladeng6666
     */
    public class Main extends Sprite
    {
        //创建世界的基本元素
        private var world:b2World;
        private var debugSprite:Sprite;
        private var body:b2Body;

        private var vector:b2Vec2 = new b2Vec2();

        private var _isDragBodyWithMouse:Boolean;
        private var _mouseJoint:b2MouseJoint;

        public function Main()
        {
            world=LDEasyBox2D.createWorld();
            addChild(LDEasyBox2D.createDebug(world));

            LDEasyBox2D.createWrapWall(world, stage);

            createBodies();

            //侦听事件
            addEventListener(Event.ENTER_FRAME, loop);
            stage.addEventListener(MouseEvent.MOUSE_DOWN, onStageMouseDown);
            stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
        }

        private function getBodyAtMouse():b2Body
        {
            //转换鼠标坐标单位,除以30从m该为px
            var mouseVector:b2Vec2 = new b2Vec2(mouseX / 30, mouseY / 30);
            //鼠标下的刚体
            var bodyAtMouse:b2Body = null;
            //queryPoint函数中要用到的回调函数,注意,它必须有一个b2Fixture参数
            function callBack(fixture:b2Fixture):void {
                if ( fixture == null) return;
                //如果fixture不为null,设置为鼠标下的刚体
                bodyAtMouse = fixture.GetBody();
            }
            //利用QueryPoint方法查找鼠标滑过的刚体
            world.QueryPoint(callBack, mouseVector);
            //返回找到的刚体
            return bodyAtMouse;
        }

        private function onStageMouseUp(e:MouseEvent):void
        {
            //鼠标弹起后,设置鼠标拖动标识为false
            if (_isDragBodyWithMouse ) {
                _isDragBodyWithMouse = false;
                //同时删除鼠标关节
                if (_mouseJoint != null) {
                    world.DestroyJoint(_mouseJoint);
                    _mouseJoint = null;
                }

            }
        }

        private function onStageMouseDown(e:MouseEvent):void
        {
            _isDragBodyWithMouse = true;
            startDragBody(getBodyAtMouse());
        }
        private function startDragBody(body:b2Body):void {
            if (body == null) return;//如果鼠标下的刚体不为空
            _isDragBodyWithMouse = true;//设置拖动标识为true
            //创建鼠标关节需求
            var mouseJointDef:b2MouseJointDef = new b2MouseJointDef();
            mouseJointDef.bodyA = world.GetGroundBody();//设置鼠标关节的一个节点为空刚体,GetGroundBody()可以理解为空刚体
            mouseJointDef.bodyB = body//设置鼠标关节的另一个刚体为鼠标点击的刚体
            mouseJointDef.target.Set(mouseX / 30, mouseY / 30);//更新鼠标关节拖动的点
            mouseJointDef.maxForce = 1000;//设置鼠标可以施加的最大的力

            //创建鼠标关节
            _mouseJoint = world.CreateJoint(mouseJointDef) as b2MouseJoint;

        }

        private function createBodies():void
        {
            var bodiesNum:Number = 4;
            for (var i:int = 0; i < bodiesNum; i++) {
                //创建矩形刚体
                LDEasyBox2D.createBox(world, Math.random()*stage.stageWidth, 50, 50, 50);
            }

        }
        private function loop(e:Event):void
        {
            LDEasyBox2D.updateWorld(world);
            //如果有鼠标关节存在,更新鼠标关节的拖动点
            if (_mouseJoint != null) {
                var mouseVector:b2Vec2 = new b2Vec2(mouseX / 30, mouseY / 30);
                _mouseJoint.SetTarget(mouseVector);
            }
        }
    }

}