2. 用p2DebugDraw实现模拟视图一p2.js详细教程

p2DebugDraw下载地址    

2. 用p2DebugDraw实现模拟视图：

• 因为P2只是进行了物理模拟计算，没有对模拟结果进行渲染，可以基于Egret引擎编写渲染绘图的类，如p2DebugDraw。
• p2DebugDraw类的构造函数为： 

function p2DebugDraw(world:p2.World, sprite:egret.Sprite) 
// 其中，world是P2中创建的world对象，sprite是Stage中一个Sprite对象。p2DebugDraw将使用基本绘图的API，在sprite对象中绘制所有刚体、关节等物理对象。

 

• p2DebugDraw提供了很多属性和方法： 
  • 1）isDrawAABB:boolean：是否绘制刚体的AABB最小包围框，默认false 
  • 2）drawDebug()：绘制P2物理引擎中的所有刚体、关节等对象，需要实时调用实时更新 
  • 3）drawShape()：绘制P2世界中的任意形状，使用时要确保形状对应刚体已添加到world 

// drawShape()方法的结构为： 
function drawShape(shape:p2.Shape, color?:number, fillColor?:boolean):void 
// shape为要绘制的Shape对象；
// color为要绘制的颜色，缺省时根据类型设置颜色；
// fillColor指示是否填充颜色，默认true，填充色与边框色相同。 

• • 4）drawConvex()：将vertices数组中保存的任意多个顶点坐标，逐个使用线段连接起来，绘制出多边形。此方法不受P2刚体约束，可在任意需要情况下使用。 

function drawConvex( vertices:number[][], color:number, alpha:number=1, fillColor:boolean = true ):void 
// vertices保存了需要绘制的多边形顶点数组；
// color为多边形的边框颜色；
// alpha为多边形填充颜色透明度；
// fillColor为是否填充颜色，默认true，填充色与边框色相同。

• • 5）drawCircle()：在指定位置以指定的半径绘制圆形，该方法不受P2刚体约束，可在任意需要情况下使用。 

function drawCircle( pos:number[], radius:number, color:number, alpha:number=1, fillColor?:boolean ):void 
// 其中，pos为圆形绘制的目标位置，radius为圆形半径。

• • 6）drawSegment()：在两点之间绘制线段，结构为： 

function drawSegment( start:number[], end:number[], color:number):void 
// 其中，start为线段起点，end为线段终点，color为线段颜色。 

• • 7）drawVecAt()：在指定点at处绘制向量v。用来显示出刚体速度，结构为： 

function drawVecAt( v:number[],at:number[], color:number, markStart:boolean=false ):void 
// 其中，v为要绘制的向量；at为开始绘制向量的起点；color为向量颜色；markStart为是否用圆点表示出向量的起点，默认false。

• • 8）drawVecTo()：绘制向量v，指向指定点to。 

function drawVecTo( v:number[],to:number[], color:number, markStart:boolean=false ):void 
// 其中，v为要绘制的向量；to为向量的终点；color为绘制的颜色；markStart为是否用圆点表示出向量的终点，默认false。

 

• 示例代码： 

class SampleP2APPWithDebugDraw extends egret.DisplayObjectContainer{ 
    public constructor(){ 
    super(); 
        this.createP2App(); 
    } 
    private world:p2.World; 
    private factor:number=30; 
    private debugDraw:p2DebugDraw; 
    public createP2App():void{ 
        this.world=new p2.World(); 
        var world=this.world; 
        world.gracity=[0,0]; 
        var shape:p2.Box=new p2.Box({width:100/this.factor, height:50/this.factor}); 
        var body:p2.Body=new p2.Body({mass:1}); 
        body.position=[275/this.factor, 100/this.factor]; 
        body.addShape(shape); 
        worldBody(body); 
        var sprite:egret.Sprite=new egret.Sprite(); 
        this.addChild(sprite); 
        this.debugDraw=new p2DebugDraw(world, sprite); 
        this.addEventListener(egret.Event.ENTER_FRAME, this.loop, this); 
    } 
    private loop(e.egret.Event):void{ 
        this.world.step(1/60); 
        this.debugDraw.drawDebug(); 
    } 
} 
//p2DebugDraw仿照Box2d中的b2DebugDraw，用不同颜色和形状表示不同类型的刚体、关节等对象，粉色为动态刚体、紫色为可动刚体、绿色为静态刚体、黑色线段为关节、红色线段为弹簧、绿色线段为刚体与关节点的偏移量、圆的为关节节点