切割Box2D对象(一)

来源:互联网 发布:c语言输出换行 编辑:程序博客网 时间:2024/04/28 14:17

转载自:http://www.9ria.com/news/2011/0714/23330.html

向你展示了我的video of my work in progress engine后,是时候教你用Box2D ver2.1来实现对象切割了
内容比较多,废话少说,马上开始
绘制激光刀
绘制激光飞船简单,它是成千上万个绘画游戏中的一个古老的话题“按下鼠标、移动鼠标、释放鼠标”。
当玩家按下鼠标时,从起点到当前鼠标位置绘制一条线段,表示激光线,当玩家松开鼠标时,显示最终的激光。
也就是说激光有两个端点:起点和终点。这些点存放在b2Segment变量中。当然变量名没有定性的要求,但是既然Box2D为我定义好了segment,为什么不用呢?
下面是代码:

package {        import Box2D.Dynamics.*;        import Box2D.Collision.*;        import Box2D.Collision.Shapes.*;        import Box2D.Common.Math.*;        import flash.display.Sprite;        import flash.events.MouseEvent;        public class Main extends Sprite {                private var worldScale:int=30;                private var canvas:Sprite;                private var laserSegment:b2Segment;                private var drawing:Boolean=false;                public function Main() {                        canvas = new Sprite();                        addChild(canvas);                        stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);                        stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);                        stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);                }                private function mousePressed(e:MouseEvent):void {                        drawing=true;                        laserSegment=new b2Segment();                        laserSegment.p1=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }                private function mouseMoved(e:MouseEvent):void {                        if (drawing) {                                canvas.graphics.clear();                                canvas.graphics.lineStyle(1,0xff0000);                                canvas.graphics.moveTo(laserSegment.p1.x*worldScale,laserSegment.p1.y*worldScale);                                canvas.graphics.lineTo(mouseX,mouseY);                        }                }                private function mouseReleased(e:MouseEvent):void {                        drawing=false;                        laserSegment.p2=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }        }}

我们来看一下用到的变量
worldScale:用来将Box2D中的“米”转换为像素,如果你对Box2D中的米还很陌生的话,请点击这里,在我们这个例子中1米表示30像素
canvas:用来绘制激光的画布
laserSegment:b2Segment类变量用来存储激光的起点和终点。
drawing:表示玩家是否正在绘画的一个布尔值变量
然后建立三个鼠标事件侦听器:一个是鼠标按下、一个是鼠标移动、另一个是鼠标弹起。
鼠标按下时:将drawing设置为true,因为实际我们已经开始绘制了,创建一个新的b2Segment实例,同时将它的p1属性(起点)设置为一个新的b2Vec2变量(可以理解为Flash的point对象),该属性的作用是将当前的鼠标坐标转换为Box2D单位。
当鼠标移动时:首先检查是否正在绘画过程中,然后从起点(laserSegment的p1属性)到鼠标当前位置绘制一个激光(一条细长的红线)。
当鼠标弹起时:首先将drawing设置为false,因为我们已经停止绘制了,将p2属性(终点)设置为一个新的b2Vec2变量,存储转换为Box2D单位的鼠标坐标,这一点跟“鼠标按下”里的处理是一样的。
现在,你可以用鼠标绘制激光了,测试一下:
http://www.emanueleferonato.com/wp-content/uploads/2011/06/Laser.swf
点击并拖动鼠标绘制激光。
现在我们需要一些用来切割的东西。


添加对象
下面我要创建三个静止的元素:floor、box、circle。这一步中,我们只是添加对象,所有你可能会觉得有点无聊,但是我希望你能注意依稀我创建circle的方法:因为Box2D本身并不只是弧线,所以我用12个端点绘制了一个近似circle的多边形。当然你可以用24或36个端点来实现更好的效果,我用的端点比较少,是出于方便理解的考虑的。在日常的项目工作中,我都是用36个顶点来绘制多边形的。
目前的代码如下:

package {        import Box2D.Dynamics.*;        import Box2D.Collision.*;        import Box2D.Collision.Shapes.*;        import Box2D.Common.Math.*;        import flash.display.Sprite;        import flash.events.MouseEvent;        import flash.events.Event;        public class Main extends Sprite {                private var world:b2World=new b2World(new b2Vec2(0,10),true);                private var worldScale:int=30;                private var canvas:Sprite;                private var laserSegment:b2Segment;                private var drawing:Boolean=false;                public function Main() {                        debugDraw();                        addStuff();                        canvas = new Sprite();                        addChild(canvas);                        addEventListener(Event.ENTER_FRAME, updateWorld);                        stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);                        stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);                        stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);                }                private function mousePressed(e:MouseEvent):void {                        drawing=true;                        laserSegment=new b2Segment();                        laserSegment.p1=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }                private function mouseMoved(e:MouseEvent):void {                        if (drawing) {                                canvas.graphics.clear();                                canvas.graphics.lineStyle(1,0xff0000);                                canvas.graphics.moveTo(laserSegment.p1.x*worldScale,laserSegment.p1.y*worldScale);                                canvas.graphics.lineTo(mouseX,mouseY);                        }                }                private function mouseReleased(e:MouseEvent):void {                        drawing=false;                        laserSegment.p2=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }                private function debugDraw():void {                        var debugDraw:b2DebugDraw = new b2DebugDraw();                        var debugSprite:Sprite = new Sprite();                        addChild(debugSprite);                        debugDraw.SetSprite(debugSprite);                        debugDraw.SetDrawScale(worldScale);                        debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);                        debugDraw.SetFillAlpha(0.5);                        world.SetDebugDraw(debugDraw);                }                private function addStuff():void {                        var floorBody:b2BodyDef= new b2BodyDef();                        floorBody.position.Set(11,16);                        var floorShape:b2PolygonShape = new b2PolygonShape();                        floorShape.SetAsBox(15,0.5);                        var floorFixture:b2FixtureDef = new b2FixtureDef();                        floorFixture.shape=floorShape;                        var worldFloor:b2Body=world.CreateBody(floorBody);                        worldFloor.CreateFixture(floorFixture);                        //                        var squareBody:b2BodyDef= new b2BodyDef();                        squareBody.position.Set(16,5);                        var squareShape:b2PolygonShape = new b2PolygonShape();                        squareShape.SetAsBox(2.5,2.5);                        var squareFixture:b2FixtureDef = new b2FixtureDef();                        squareFixture.shape=squareShape;                        var worldSquare:b2Body=world.CreateBody(squareBody);                        worldSquare.CreateFixture(squareFixture);                        //                        var circleVector:Vector.<b2Vec2>=new Vector.<b2Vec2>();                        var circleSteps:int=24;                        var circleRadius:Number=3                        for (var i:int=0; i<circleSteps; i++) {                                circleVector.push(new b2Vec2(circleRadius*Math.cos(2*Math.PI/circleSteps*i),circleRadius*Math.sin(2*Math.PI/circleSteps*i)));                        }                        var circleBody:b2BodyDef= new b2BodyDef();                        circleBody.position.Set(5,5);                        var circleShape:b2PolygonShape = new b2PolygonShape();                        circleShape.SetAsVector(circleVector,circleSteps);                        var circleFixture:b2FixtureDef = new b2FixtureDef();                        circleFixture.shape=circleShape;                        var worldCircle:b2Body=world.CreateBody(circleBody);                        worldCircle.CreateFixture(circleFixture);                }                private function updateWorld(e:Event):void {                        world.Step(1/30,10,10);                        world.ClearForces();                        world.DrawDebugData();                }        }}
代码相当多啊,但是大部分都是用来实现”调试绘制”(第42~51行)和添加多边形(第52~85行)的。你只需要看一下我是如何用一组b2Vec2对象,经过几何运算创建多边形,来实现”circle”效果的就可以了。
到这一步,实现的效果如下:
http://www.emanueleferonato.com/wp-content/uploads/2011/06/Laser1.swf
你仍然可以绘制激光,不过现在我们有了一些用来切割的东西了。
检测切入点
既然激光可以切割对象,那么每个被切割的对象肯定有一个切入点和一个切出点。一定要记得:激光可以一次切割多个对象。
谢天谢地,有了b2World的RayCast方法,这个实现起来就简单多了,我们来看一下RayCast的三个参数:

laserFired:切割触发的函数
laserSegment.p1:b2Vec2对象,表示切割开始的点
laserSegment.p2:b2Vec2对象,表示切割结束的点
laserFired回调函数包含了一个对我们很有用的参数:

fixture:被激光切割的对象
point:与激光接触的b2Vect2点(即我们要找的切入点)
normal:交叉点的单位向量
fraction:交互部分的激光长度,如果你需要知道交互激光长度占总长度比例的话,这个值会很有用。

记住每次激光切割对象时都会调用laserFired方法。
如果你不希望激光继续切割,返回0,那么激光会停止继续检测。
返回1,激光会继续切割其他的对象。
代码如下:
package {        import Box2D.Dynamics.*;        import Box2D.Collision.*;        import Box2D.Collision.Shapes.*;        import Box2D.Common.Math.*;        import flash.display.Sprite;        import flash.events.MouseEvent;        import flash.events.Event;        public class Main extends Sprite {                private var world:b2World=new b2World(new b2Vec2(0,10),true);                private var worldScale:int=30;                private var canvas:Sprite;                private var laserSegment:b2Segment;                private var drawing:Boolean=false;                public function Main() {                        debugDraw();                        addStuff();                        canvas = new Sprite();                        addChild(canvas);                        addEventListener(Event.ENTER_FRAME, updateWorld);                        stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);                        stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);                        stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);                }                private function mousePressed(e:MouseEvent):void {                        drawing=true;                        laserSegment=new b2Segment();                        laserSegment.p1=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }                private function mouseMoved(e:MouseEvent):void {                        if (drawing) {                                canvas.graphics.clear();                                canvas.graphics.lineStyle(1,0xff0000);                                canvas.graphics.moveTo(laserSegment.p1.x*worldScale,laserSegment.p1.y*worldScale);                                canvas.graphics.lineTo(mouseX,mouseY);                        }                }                private function mouseReleased(e:MouseEvent):void {                        drawing=false;                        laserSegment.p2=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }                private function debugDraw():void {                        var debugDraw:b2DebugDraw = new b2DebugDraw();                        var debugSprite:Sprite = new Sprite();                        addChild(debugSprite);                        debugDraw.SetSprite(debugSprite);                        debugDraw.SetDrawScale(worldScale);                        debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);                        debugDraw.SetFillAlpha(0.5);                        world.SetDebugDraw(debugDraw);                }                private function addStuff():void {                        var floorBody:b2BodyDef= new b2BodyDef();                        floorBody.position.Set(11,16);                        var floorShape:b2PolygonShape = new b2PolygonShape();                        floorShape.SetAsBox(15,0.5);                        var floorFixture:b2FixtureDef = new b2FixtureDef();                        floorFixture.shape=floorShape;                        var worldFloor:b2Body=world.CreateBody(floorBody);                        worldFloor.CreateFixture(floorFixture);                        //                        var squareBody:b2BodyDef= new b2BodyDef();                        squareBody.position.Set(16,5);                        var squareShape:b2PolygonShape = new b2PolygonShape();                        squareShape.SetAsBox(2.5,2.5);                        var squareFixture:b2FixtureDef = new b2FixtureDef();                        squareFixture.shape=squareShape;                        var worldSquare:b2Body=world.CreateBody(squareBody);                        worldSquare.CreateFixture(squareFixture);                        //                        var circleVector:Vector.<b2Vec2>=new Vector.<b2Vec2>();                        var circleSteps:int=12;                        var circleRadius:Number=3;                        for (var i:int=0; i<circleSteps; i++) {                                circleVector.push(new b2Vec2(circleRadius*Math.cos(2*Math.PI/circleSteps*i),circleRadius*Math.sin(2*Math.PI/circleSteps*i)));                        }                        var circleBody:b2BodyDef= new b2BodyDef();                        circleBody.position.Set(5,5);                        var circleShape:b2PolygonShape = new b2PolygonShape();                        circleShape.SetAsVector(circleVector,circleSteps);                        var circleFixture:b2FixtureDef = new b2FixtureDef();                        circleFixture.shape=circleShape;                        var worldCircle:b2Body=world.CreateBody(circleBody);                        worldCircle.CreateFixture(circleFixture);                }                private function updateWorld(e:Event):void {                        world.Step(1/30,10,10);                        world.ClearForces();                        if (laserSegment && !drawing) {                                world.RayCast(laserFired,laserSegment.p1,laserSegment.p2);                        }                        world.DrawDebugData();                }                private function laserFired(fixture:b2Fixture,point:b2Vec2,normal:b2Vec2,fraction:Number):Number {                        drawCircle(point,0xff0000);                        return 1;                }                private function drawCircle(origin:b2Vec2,color:Number):void {                        canvas.graphics.lineStyle(2,color);                        canvas.graphics.drawCircle(origin.x*worldScale,origin.y*worldScale,5);                }        }}

现在要为laserFired方法添加功能,绘制一个红色的圆圈,这样我们可以清楚的看到切入点。

结果如下:

http://www.emanueleferonato.com/wp-content/uploads/2011/06/Laser2.swf

绘制一个激光,让它穿过一个或多个对象,产看切入点位置的红色圆圈。现在我们要找到切出点。


检测切出点

因为RayCast方法只是实现激光的发生,而无法模拟激光穿过对象,所以Box2D无法找到切出点的位置。

好的,谢谢您的阅读。
….
等、等、等一下…因为激光是从A到B的一条线,我们可以想象另外一条从B到A的线。B到A的切入点刚好是A到B的切除点。这不正是我们想要的吗(这个方法只有在激光长度大于物体宽度时才适用)!
新增RayCast方法详见第91行。
代码如下:
package {        import Box2D.Dynamics.*;        import Box2D.Collision.*;        import Box2D.Collision.Shapes.*;        import Box2D.Common.Math.*;        import flash.display.Sprite;        import flash.events.MouseEvent;        import flash.events.Event;        public class Main extends Sprite {                private var world:b2World=new b2World(new b2Vec2(0,10),true);                private var worldScale:int=30;                private var canvas:Sprite;                private var laserSegment:b2Segment;                private var drawing:Boolean=false;                public function Main() {                        debugDraw();                        addStuff();                        canvas = new Sprite();                        addChild(canvas);                        addEventListener(Event.ENTER_FRAME, updateWorld);                        stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);                        stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);                        stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);                }                private function mousePressed(e:MouseEvent):void {                        drawing=true;                        laserSegment=new b2Segment();                        laserSegment.p1=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }                private function mouseMoved(e:MouseEvent):void {                        if (drawing) {                                canvas.graphics.clear();                                canvas.graphics.lineStyle(1,0xff0000);                                canvas.graphics.moveTo(laserSegment.p1.x*worldScale,laserSegment.p1.y*worldScale);                                canvas.graphics.lineTo(mouseX,mouseY);                        }                }                private function mouseReleased(e:MouseEvent):void {                        drawing=false;                        laserSegment.p2=new b2Vec2(mouseX/worldScale,mouseY/worldScale);                }                private function debugDraw():void {                        var debugDraw:b2DebugDraw = new b2DebugDraw();                        var debugSprite:Sprite = new Sprite();                        addChild(debugSprite);                        debugDraw.SetSprite(debugSprite);                        debugDraw.SetDrawScale(worldScale);                        debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);                        debugDraw.SetFillAlpha(0.5);                        world.SetDebugDraw(debugDraw);                }                private function addStuff():void {                        var floorBody:b2BodyDef= new b2BodyDef();                        floorBody.position.Set(11,16);                        var floorShape:b2PolygonShape = new b2PolygonShape();                        floorShape.SetAsBox(15,0.5);                        var floorFixture:b2FixtureDef = new b2FixtureDef();                        floorFixture.shape=floorShape;                        var worldFloor:b2Body=world.CreateBody(floorBody);                        worldFloor.CreateFixture(floorFixture);                        //                        var squareBody:b2BodyDef= new b2BodyDef();                        squareBody.position.Set(16,5);                        var squareShape:b2PolygonShape = new b2PolygonShape();                        squareShape.SetAsBox(2.5,2.5);                        var squareFixture:b2FixtureDef = new b2FixtureDef();                        squareFixture.shape=squareShape;                        var worldSquare:b2Body=world.CreateBody(squareBody);                        worldSquare.CreateFixture(squareFixture);                        //                        var circleVector:Vector.<b2Vec2>=new Vector.<b2Vec2>();                        var circleSteps:int=12;                        var circleRadius:Number=3;                        for (var i:int=0; i<circleSteps; i++) {                                circleVector.push(new b2Vec2(circleRadius*Math.cos(2*Math.PI/circleSteps*i),circleRadius*Math.sin(2*Math.PI/circleSteps*i)));                        }                        var circleBody:b2BodyDef= new b2BodyDef();                        circleBody.position.Set(5,5);                        var circleShape:b2PolygonShape = new b2PolygonShape();                        circleShape.SetAsVector(circleVector,circleSteps);                        var circleFixture:b2FixtureDef = new b2FixtureDef();                        circleFixture.shape=circleShape;                        var worldCircle:b2Body=world.CreateBody(circleBody);                        worldCircle.CreateFixture(circleFixture);                }                private function updateWorld(e:Event):void {                        world.Step(1/30,10,10);                        world.ClearForces();                        if (laserSegment && !drawing) {                                world.RayCast(laserFired,laserSegment.p1,laserSegment.p2);                                world.RayCast(laserFired,laserSegment.p2,laserSegment.p1);                                laserSegment=null;                        }                        world.DrawDebugData();                }                private function laserFired(fixture:b2Fixture,point:b2Vec2,normal:b2Vec2,fraction:Number):Number {                        drawCircle(point,0xff0000);                        return 1;                }                private function drawCircle(origin:b2Vec2,color:Number):void {                        canvas.graphics.lineStyle(2,color);                        canvas.graphics.drawCircle(origin.x*worldScale,origin.y*worldScale,5);                }        }}

运行结果如下:
http://www.emanueleferonato.com/wp-content/uploads/2011/06/Laser3.swf
绘制一条激光,让它穿过一个或这个更多的对象,看一下切入点和切出点效果。
以上是本文的全部内容。下次,我会继续讨论更多关于切割对象的内容。

原创粉丝点击