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 _width:Number;
        private var _height:Number;
        private var _info:String; 
 
        private static const PADDING:Number = 5;
 
        public function Console(width: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方法執行的時候，物理世界依然進行着計算，此時對剛體操作是會出問題的。

源碼下載