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

在线运行地址

点我网页看效果
扫描二维码手机看效果

Egret 和 p2.js 坐标对比图

p2.js库的引用

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

2. p2.js 库的引用：
   第一步：从这儿Github把libsrc下载下来，往Egret游戏项目的目录一丢，注意和index.html同一层级。
   第二步：修改egretProperties.json，modules数组里增加个

   {
   “name”: “physics”,
   “path”: “./libsrc”
   }
   说明：本文采用的是 egret 3.x版本，其他版本未测试。

3. 参考
   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)    }