Egret中p2.js用法示例及解析_小球落地

在线运行地址

点我网页看效果

扫描二维码手机看效果

Egret 和 p2.js 坐标对比图

p2.js库的引用

地面被我注释掉了，需要的话将其中两端注释（L50-55，L105）去掉即可。代码里我没有考虑地面贴图的高度，你实际用的话，创建p2.js 平面时需要考虑地面贴图的像素高度。

p2.js 库的引用：

第一步：从这儿Github把libsrc下载下来，往Egret游戏项目的目录一丢，注意和index.html同一层级。

第二步：修改egretProperties.json，modules数组里增加个

{

“name”: “physics”,

“path”: “./libsrc”

}

说明：本文采用的是 egret 3.x版本，其他版本未测试。

参考

http://blog.csdn.net/xjh7777/article/details/50404615

代码

private createGameScene():void {

/*
* 说明：首先要清楚，egret和p2.js是两个坐标系独立没有关联的库，
* 需要我们手动代码进行转换和关联。
* 关键的几步：
*
* 1. 转换坐标和度量
*    p2.js坐标原点左下角，向上向右（重力为负）
*    egert坐标原点左上角，向右向下
*    p2.js使用MKS(米 千克 秒),egert使用px像素
*
* 2. 将egert图元贴到p2.js body上
*    p2body.displays = [egert里面的displayobject]
*
*/
console.log("start");

//准备工作
var stageH: number = egret.MainContext.instance.stage.stageHeight;
var stageW: number = egret.MainContext.instance.stage.stageHeight;
var circlePosX: number = 100;   //把球摆放在距离屏幕左上角为100,100px位置
var circlePosY: number = 100;
var circleR: number = 50;

/*
* 说明：
* 先创造egert外观更方便，因为创建p2.js body时需要
* 根据屏幕像素位置(egert位置)计算p2.js body的位置。
*/

//设置p2.js和egret二者距离的度量衡转换比例
//p2.js 单位是MKS(米 千克 秒)，egert是像素px
var factor:number = 50;
//可理解为p2.js的一米长度是egert中屏幕的50px

//第一步：创建egert图像外观

//创建圆
var circleVsl: egret.Shape = new egret.Shape();
circleVsl.graphics.beginFill(0xffffff);
circleVsl.graphics.drawCircle(0,0,circleR);//千万不要填写x,y坐标为非零值，后果自负
circleVsl.graphics.endFill();
circleVsl.x = circlePosX;
circleVsl.y = circlePosY;
this.addChild(circleVsl);      //立即加到场景里

//        //创建地面
//        var groundVsl: egret.Shape = new egret.Shape();
//        groundVsl.graphics.beginFill(0xaaccdd);
//        groundVsl.graphics.drawRect(0,stageH-10,stageW,10);
//        groundVsl.graphics.endFill();
//        this.addChild(groundVsl);      //立即加到场景里

//创建一个没有绑定p2.js的同样的圆，作为参照物
var temp: egret.Shape = new egret.Shape();
temp.graphics.beginFill(0xaaccdd);
temp.graphics.drawCircle(0,0,circleR);
temp.graphics.endFill();
temp.x = circlePosX;
temp.y = circlePosY;
this.addChild(temp);      //立即加到场景里

//题外话：运行到此可以看到浅色小球和浅色地板

//第二步：创建独立的p2物理世界
//create world
var world: p2.World = new p2.World({
gravity: [0,-9.82]
});         //p2.js坐标原点左下角，向上向右（重力为负）
world.sleepMode = p2.World.BODY_SLEEPING;

//将egret坐标的100，100像素转换为p2.js中的米(注意Y方向)
var circlePosXInP2: number = circlePosX / factor;
var circlePosYInP2: number = (stageH - circlePosY) / factor;
var circleRInP2: number = circleR / factor;     //半径也要转换

var circleBody: p2.Body = new p2.Body({
mass: 1,
position: [circlePosXInP2,circlePosYInP2]    //重中之重
});
var circleShape: p2.Circle = new p2.Circle({
radius: circleRInP2
});
circleBody.addShape(circleShape);

//ground
var groundShape = new p2.Plane();   //在p2.js中默认从原点扩展为平面
var groundBody = new p2.Body({
mass: 0     //在p2.js中质量为0的物体不会动
});
groundBody.addShape(groundShape);

//将circle和ground加入重力世界
world.addBody(circleBody);
world.addBody(groundBody);

//第三步：将p2.js物理引擎和egret关联
circleBody.displays = [circleVsl];
//        groundBody.displays = [groundVsl];

//第四步：p2.js世界动起来
egret.Ticker.getInstance().register(function(dt) {
//p2.js的世界时间流逝
world.step(dt / 1000);

//看不到的p2物体在下落，egret的外观图片也要时刻更新位置

/*
* 小球下落
* egert    y坐标变大(正数)
* p2.js    y坐标减小(正数)
* 二者之和就是屏幕高度
*/
circleVsl.x = circleBody.position[0] * factor;
circleVsl.y = stageH - circleBody.position[1] * factor;

},this);

//根据name关键字，异步获取一个json配置文件，name属性请参考resources/resource.json配置文件的内容。
// Get asynchronously a json configuration file according to name keyword. As for the property of name please refer to the configuration file of resources/resource.json.
RES.getResAsync("description_json", null, this)
}