Box2D教程5碰撞检测

Box2D教程1-创建碰撞世界

Box2D教程2-鼠标交互

Box2D教程3-刚体绑定外观

Box2D教程4-复杂刚体的复杂外观

Box2D教程5-碰撞检测

之前我们已经了解了如何通过Box2D创建一个物理世界，给刚体添加复杂材质，鼠标交互。在游戏开发里面我们通常要判断两个物体相互碰撞了，然后进行相应的操作。比如“愤怒的小鸟”，当小鸟碰撞到箱子的时候，我们需要知道这两个物体碰撞了，然后判断碰撞的力度（后面的教程会讲），然后对箱子进行操作。这个教程就是用来处理Box2D的碰撞检测问题。

这个教程仍然基于先前的教程，关于如何创建一个物理世界，这里就不解释了。为了要实现碰撞检测，需要使用到Box2D的B2ContactListener类。该类是一个抽象类，不能直接被实例化，它包含四个方法：BeginContact, EndContact, PreSolve, PostSolve，我们必须先继承它创建自定义的ContactListener，然后override你需要的方法。这个教程主要检测两个物体产生碰撞以及碰撞结束。因此我们override BeginContact（开始碰撞）和EndContact（碰撞结束）方法。

首先我们创建一个简单的物理世界，四个边框和三个球体，这在先前的教程有详细说明

package
{
    import Box2D.Collision.Shapes.b2CircleShape;
    import Box2D.Collision.Shapes.b2PolygonShape;
    import Box2D.Collision.Shapes.b2Shape;
    import Box2D.Collision.b2AABB;
    import Box2D.Common.Math.b2Vec2;
    import Box2D.Dynamics.Joints.b2MouseJoint;
    import Box2D.Dynamics.Joints.b2MouseJointDef;
    import Box2D.Dynamics.b2Body;
    import Box2D.Dynamics.b2BodyDef;
    import Box2D.Dynamics.b2DebugDraw;
    import Box2D.Dynamics.b2Fixture;
    import Box2D.Dynamics.b2FixtureDef;
    import Box2D.Dynamics.b2World;
 
    import comingx.jingle.common.Console;
    import comingx.jingle.common.CustomContactListener;
    import comingx.jingle.events.CollisionEvent;
    import comingx.jingle.userdata.BallUserData;
 
    import flash.display.GradientType;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Matrix;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
 
    [SWF(width="500",height="300",frameRate="30")]
    public class Box2DCheckCollision extends Sprite
    {
        //屏幕像素单位转换成物理世界的距离单位
        private const PIXEL_TO_METER:Number = 30;
 
        //物理世界
        private var world:Box2D.Dynamics.b2World;
 
        private var _mouseXWorldPhys:Number;
        private var _mouseYWorldPhys:Number;
        private var _mouseXWorld:Number;
        private var _mouseYWorld:Number;
 
        private var _mousePVec:b2Vec2 = new b2Vec2();
        private var _groundBody:b2Body;
        private var _mouseJoint:b2MouseJoint;
 
        private var mouseDown:Boolean = false;
 
        private var console:Console;
 
        public function Box2DCheckCollision()
        {
            drawBackground();
            createWorld();
            createWall();
            createBall();
            createDebugDraw();
            addEventListener(Event.ENTER_FRAME, handleEnterFrame);
            addEventListener(MouseEvent.MOUSE_DOWN,handleMouseDown);
            addEventListener(MouseEvent.MOUSE_UP,handleMouseUp);
            addEventListener(MouseEvent.CLICK,handleMouseUp);
            addEventListener(Event.MOUSE_LEAVE,handleMouseUp);
        }
 
        private function createWorld():void
        {
            //重力向量
            var gravity:b2Vec2 = new b2Vec2(0,9.0);
            //是否休眠
            var doSleep:Boolean = true;
            world = new b2World(gravity,doSleep);
            world.SetWarmStarting(true);
        }
 
        private function createWall():void
        {
            //1.需要创建的墙刚体
            var leftWall:b2Body;
            //2.刚体定义
            var leftWallBodyDef:b2BodyDef = new b2BodyDef();
            //刚体类型和位置
            leftWallBodyDef.type = b2Body.b2_staticBody;
            //注意刚体的注册中心都是在物体的中心位置
            leftWallBodyDef.position.Set(10/PIXEL_TO_METER, stage.stageHeight/2/PIXEL_TO_METER);
            //工厂模式创建刚体
            leftWall = world.CreateBody(leftWallBodyDef);
 
            //3.刚体修饰物定义
            var leftWallFixtureDef:b2FixtureDef = new b2FixtureDef();
            //密度
            leftWallFixtureDef.density = 1.0;
            //摩擦粗糙程度
            leftWallFixtureDef.friction = 0.3;
            //力度返回程度（弹性）
            leftWallFixtureDef.restitution = 1.0;
 
            //4.创建墙形状
            var leftWallShape:b2PolygonShape = new b2PolygonShape();
            //此处参数为宽和高度的一半值
            leftWallShape.SetAsBox(10/PIXEL_TO_METER, stage.stageHeight/2/PIXEL_TO_METER);
 
            //将形状添加到刚体修饰物
            leftWallFixtureDef.shape = leftWallShape;
 
            leftWall.CreateFixture(leftWallFixtureDef);
 
 
            //下面创建其他三面墙，共用leftwall的几个变量
            leftWallBodyDef.position.Set((stage.stageWidth-10)/PIXEL_TO_METER, stage.stageHeight/2/PIXEL_TO_METER);
            var rightWall:b2Body = world.CreateBody(leftWallBodyDef);
            rightWall.CreateFixture(leftWallFixtureDef);
 
 
            leftWallBodyDef.position.Set( stage.stageWidth/2/PIXEL_TO_METER, (stage.stageHeight-10)/PIXEL_TO_METER);
            var bottomWall:b2Body = world.CreateBody(leftWallBodyDef);
            leftWallShape.SetAsBox(stage.stageWidth/2/PIXEL_TO_METER, 10/PIXEL_TO_METER);
            bottomWall.CreateFixture(leftWallFixtureDef);
 
            leftWallBodyDef.position.Set( stage.stageWidth/2/PIXEL_TO_METER, 10/PIXEL_TO_METER);
            var topWall:b2Body = world.CreateBody(leftWallBodyDef);
            topWall.CreateFixture(leftWallFixtureDef);
        }
 
        private function createBall():void
        {
            var ballDef:b2BodyDef = new b2BodyDef();
            ballDef.type = b2Body.b2_dynamicBody;
            ballDef.position.Set(50/PIXEL_TO_METER,30/PIXEL_TO_METER);
            var ballBig:b2Body = world.CreateBody(ballDef);
 
            var circleShape:b2CircleShape  = new b2CircleShape(30/PIXEL_TO_METER);
 
            var ballFixtureDef:b2FixtureDef = new b2FixtureDef();
 
            ballFixtureDef.shape = circleShape;
            ballFixtureDef.density = 1.0;
            ballFixtureDef.restitution = 0.5;
 
            ballBig.CreateFixture(ballFixtureDef);            
 
            ballDef.position.Set(200/PIXEL_TO_METER, 30/PIXEL_TO_METER);
            var ballMedium:b2Body = world.CreateBody(ballDef);
            circleShape = new b2CircleShape(20/PIXEL_TO_METER);
            ballFixtureDef.shape = circleShape;
            ballMedium.CreateFixture(ballFixtureDef);
 
            ballDef.position.Set(400/PIXEL_TO_METER, 30/PIXEL_TO_METER);
            var ballSmall:b2Body = world.CreateBody(ballDef);
            circleShape = new b2CircleShape(15/PIXEL_TO_METER);
            ballFixtureDef.shape = circleShape;
            ballSmall.CreateFixture(ballFixtureDef);
        }
 
        private function createDebugDraw():void
        {
            //创建一个sprite，可以将测试几何物体放入其中
            var debugSprite:Sprite = new Sprite();
            addChild(debugSprite);
            var debugDraw:b2DebugDraw = new b2DebugDraw();
            debugDraw.SetSprite(debugSprite);
            //设置边框厚度
            debugDraw.SetLineThickness(1.0);
            //边框透明度
            debugDraw.SetAlpha(1.0);
            //填充透明度
            debugDraw.SetFillAlpha(0.5);
            //设置显示对象
            debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
            //物理世界缩放
            debugDraw.SetDrawScale(PIXEL_TO_METER);
            world.SetDebugDraw(debugDraw);
        }
 
        private function handleEnterFrame(evt:Event):void
        {
            UpdateMouseWorld();
            mouseDrag();
 
            var timeStep:Number = 1/30;
            var velocityInterations:int = 10;
            var positionIterations:int = 10;
 
            world.Step(timeStep,velocityInterations,positionIterations);
            //在2.1版本清除力，以提高效率
            world.ClearForces();
            //绘制
            world.DrawDebugData();
        }
 
        private function drawBackground():void
        {
            var bg:Sprite = new Sprite();
            var matrix:Matrix = new Matrix();
            matrix.translate(100,100);
            bg.graphics.beginGradientFill(GradientType.RADIAL,[0xffffff,0xffaa00],[0.3,0.2],[0,255],matrix);
            bg.graphics.drawRect(0,0,stage.stageWidth,stage.stage.stageHeight);
            bg.graphics.endFill();
            addChild(bg);
 
            //tips
            var tf:TextField = new TextField();
            tf.text = "拖动球产生碰撞";
            tf.autoSize = TextFieldAutoSize.LEFT;
            var fomat:TextFormat = new TextFormat("Kai,华文楷体", "20", 0x555555);
            tf.setTextFormat(fomat);
            tf.x = tf.y = 30;
            addChild(tf);
        }
 
        private function UpdateMouseWorld():void
        {
            _mouseXWorldPhys = this.mouseX / PIXEL_TO_METER;
            _mouseYWorldPhys = this.mouseY / PIXEL_TO_METER;
 
            _mouseXWorld = this.mouseX;
            _mouseYWorld = this.mouseY;
        }
        private function getBodyAtMouse(includeStatic:Boolean = false):b2Body
        {
            _mousePVec.Set(_mouseXWorldPhys,_mouseYWorldPhys);
            var aabb:b2AABB = new b2AABB();
            aabb.lowerBound.Set(_mouseXWorldPhys - 0.001, _mouseYWorldPhys - 0.001);
            aabb.upperBound.Set(_mouseXWorldPhys + 0.001, _mouseYWorldPhys + 0.001);
            var body:b2Body = null;
            var fixture:b2Fixture;
 
            function getBodyCallback(fixture:b2Fixture):Boolean
            {
                var shape:b2Shape = fixture.GetShape();
                if(fixture.GetBody().GetType() != b2Body.b2_staticBody || includeStatic)
                {
                    var inside:Boolean = shape.TestPoint(fixture.GetBody().GetTransform(), _mousePVec);
                    if(inside)
                    {
                        body = fixture.GetBody();
                        return false;
                    }
                }
                return true;
            }
            world.QueryAABB(getBodyCallback, aabb);
            return body;
        }
 
        private function mouseDrag():void
        {
            if(mouseDown && !_mouseJoint)
            {
                var body:b2Body = getBodyAtMouse(); 
                if(body)
                {
                    var md:b2MouseJointDef = new b2MouseJointDef();
                    md.bodyA = world.GetGroundBody();
                    md.bodyB = body;
 
                    md.target.Set(_mouseXWorldPhys,_mouseYWorldPhys);
                    md.collideConnected = true;
                    md.maxForce = 300.0 * body.GetMass();
                    _mouseJoint = world.CreateJoint(md) as b2MouseJoint;
                    body.SetAwake(true);
                }
            }
 
            if(!mouseDown)
            {
                if(_mouseJoint)
                {
                    world.DestroyJoint(_mouseJoint);
                    _mouseJoint = null;
                }
            }
 
            if(_mouseJoint)
            {
                var p2:b2Vec2 = new b2Vec2(_mouseXWorldPhys,_mouseYWorldPhys);
                _mouseJoint.SetTarget(p2);
            }
        }
 
        public function handleMouseDown(e:MouseEvent):void
        {
            mouseDown = true;
        }
 
        public function handleMouseUp(e:MouseEvent):void
        {
            mouseDown = false;
        }
    }
}

下面为关键代码
1. 创建自定义的ContactListener

package comingx.jingle.common
{
    import Box2D.Dynamics.Contacts.b2Contact;
    import Box2D.Dynamics.b2ContactListener;
 
    import comingx.jingle.events.CollisionEvent;
    import comingx.jingle.userdata.BallUserData;
 
    import flash.events.EventDispatcher;
 
    public class CustomContactListener extends b2ContactListener
    {
        public var eventDispatcher:EventDispatcher;
 
        public function CustomContactListener()
        {
            eventDispatcher = new EventDispatcher();
        }
 
        override public function BeginContact(contact:b2Contact):void
        {
            var collisionEvent:CollisionEvent = new CollisionEvent(CollisionEvent.COLLISION_START);
            //墙的userdata为null，排除与墙的碰撞
            if(contact.GetFixtureA().GetBody().GetUserData() != null && contact.GetFixtureB().GetBody().GetUserData() != null)
            {
                collisionEvent.bodyAName = (contact.GetFixtureA().GetBody().GetUserData() as BallUserData).name;
                collisionEvent.bodyBName = (contact.GetFixtureB().GetBody().GetUserData() as BallUserData).name;
                eventDispatcher.dispatchEvent(collisionEvent);
            }
        }
 
        override public function EndContact(contact:b2Contact):void
        {
            var collisionEvent:CollisionEvent = new CollisionEvent(CollisionEvent.COLLISION_END);
            if(contact.GetFixtureA().GetBody().GetUserData() != null && contact.GetFixtureB().GetBody().GetUserData() != null)
            {
                collisionEvent.bodyAName = (contact.GetFixtureA().GetBody().GetUserData() as BallUserData).name;
                collisionEvent.bodyBName = (contact.GetFixtureB().GetBody().GetUserData() as BallUserData).name;
                eventDispatcher.dispatchEvent(collisionEvent);
            }
        }
    }
}

b2ContactListener的是个方法将会每次Box2D计算时执行，因此它会不停的运行，只要有物体产生碰撞。那么我们如何知道我们想要的物体碰撞，即哪个球和哪个球碰撞了？Box2D碰撞的两个物体通过contact.GetFixtureA().GetBody()和contact.GetFixtureB().GetBody()这两个方法获取。我们预先给这两个刚体的UserData设置一个对象，对刚体进行命名，用来识别各个刚体，这样可以根据名字来知道碰撞的双方分别是什么。因此我们创建BallUserData类，存储刚体名字（还可以有其他数据，如果你需要的话）

package comingx.jingle.userdata
{
    import flash.display.Sprite;
 
    public class BallUserData
    {
        public var name:String;
        public var sprite:Sprite;
        public function BallUserData(name:String = "unanmed", sprite:Sprite = null)
        {
            this.name = name;
            this.sprite = sprite;
        }
    }
}

其中name属性标识了这个刚体的名字，sprite属性我们可以为其指定一个刚体外观。这样我们通过这个方法对刚体UserData进行赋值，从而给三个球命名，以期望在碰撞的时候知道是谁和谁碰撞了。
在入口类的createBall()方法中添加如下代码：

//对刚体进行命名
ballBig.SetUserData(new BallUserData("big"));
ballMedium.SetUserData(new BallUserData("medium"));
ballSmall.SetUserData(new BallUserData("small"));

我们看到在CustomContactListener中当两个碰撞物体的UserData不为NULL的时候（墙的UserData为NULL），即球不是与墙碰撞而是与球碰撞，此时可以抛出自定义的碰撞事件，并在事件中保存碰撞对象的名字。从而你可以在需要的地方侦听这个事件并获取到碰撞双方的名字，做相应的逻辑处理。

下面是CollisionEvent：

package comingx.jingle.events
{
    import flash.events.Event;
 
    public class CollisionEvent extends Event
    {
        public static const COLLISION_START:String = "collision_start";
        public static const COLLISION_END:String = "collision_end";
 
        public var bodyAName:String = "";
        public var bodyBName:String = "";
 
 
        public function CollisionEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

2. 将ContactListener添加到物理世界
为物理世界添加碰撞侦听，并且为自定义事件创建逻辑处理。

private function initContactListener():void
        {
            var customContactListener:CustomContactListener = new CustomContactListener();
            customContactListener.eventDispatcher.addEventListener(CollisionEvent.COLLISION_START, handleCollisionStart);
            customContactListener.eventDispatcher.addEventListener(CollisionEvent.COLLISION_END, handleCollisionEnd);
            world.SetContactListener(customContactListener);
        }
        private function handleCollisionStart(evt:CollisionEvent):void
        {
            console.addInfo(">>--<<" + evt.bodyAName + "和" + evt.bodyBName + "碰撞");
        }
 
        private function handleCollisionEnd(evt:CollisionEvent):void
        {
            console.addInfo("<<-->>" + evt.bodyAName + "和" + evt.bodyBName + "分离");
        }

其中console为一个输出窗口用来显示trace信息的

package comingx.jingle.common
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
 
    public class Console extends Sprite
    {
        private var _tf:TextField;
        private var _Number;
        private var _height:Number;
        private var _info:String; 
 
        private static const PADDING:Number = 5;
 
        public function Console(Number = 200, height:Number = 200)
        {
            super();
            _width = width;
            _height = height;
            _info = "";
            _tf = new TextField();
            init();
        }
 
        private function init():void
        {
            initBG();
            initTextField();
        }
 
        private function initBG():void
        {
            this.graphics.beginFill(0x000000);
            this.graphics.drawRect(0,0,_width,_height);
            this.graphics.endFill();
        }
 
        private function initTextField():void
        {
            _tf.width = _width - PADDING * 2;
            _tf.height = _height - PADDING * 2;
            _tf.x = PADDING;
            _tf.y = PADDING;
            _tf.wordWrap = true;
            _tf.multiline = true;
 
            _tf.text = _info;
            _tf.textColor = 0xffffff;
            addChild(_tf);
        }
 
        public function set Info(infoString:String):void
        {
            if(_info != infoString)
            {
                _info = infoString;
            }
        }
 
        public function get Info():String
        {
            return _info;
        }
 
        public function addInfo(infoString:String):void
        {
            _info = _info + "\n" + infoString;
            _tf.text = _info;
            _tf.scrollV = _tf.maxScrollV;
        }
    }
}

最后，如果你要想愤怒的小鸟那样，碰撞之后将某个物体消失掉，那么你最好不要在handleContactStart中处理逻辑，应该在此方法中添加一个flag，然后在handleEnterFrame中，根据flag，来处理逻辑，因为handleContactStart方法执行的时候，物理世界依然进行着计算，此时对刚体操作是会出问题的。

源码下载