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)
    }