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是像素pxvar 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 worldvar 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);  //groundvar 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)}

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

mysql教程or怎么用_MySQL中or语句用法示例
1.mysql中or语法的使用,在mysql语法中or使用注意点. 项目遇到坑,遍历发放奖励数据查询错误!!! $sql = 'SELECT * FROM `vvt_spread_doubleegg_ ...
sql语句中的in用法示例_PHP中的循环语句和示例
sql语句中的in用法示例循环 (Loops) Imagine that we need a program that says "hello world" 100 times. ...
sql语句中的in用法示例_示例中JavaScript in操作符
sql语句中的in用法示例 One of the first topics you'll come across when learning JavaScript (or any other prog ...
mysql or_MySQL中or语句用法示例
1.mysql中or语法的使用,在mysql语法中or使用注意点. 项目遇到坑,遍历发放奖励数据查询错误!!! $sql = 'SELECT * FROM `vvt_spread_doubleegg_ ...
mysql数据库 or的用法_MySQL中or语句用法示例
1.mysql中or语法的使用,在mysql语法中or使用注意点. 项目遇到坑,遍历发放奖励数据查询错误!!! $sql = 'SELECT * FROM `vvt_spread_doubleegg_ ...
python hashlib_python中hashlib模块用法示例
我们以前介绍过一篇Python加密的文章:Python 加密的实例详解.今天我们看看python中hashlib模块用法示例,具体如下. hashlib hashlib主要提供字符加密功能,将md5和 ...
php dropdownlist,Yii2中DropDownList简单用法示例
本文实例讲述了Yii2中DropDownList简单用法.分享给大家供大家参考,具体如下: 这里以实际应用为例讲解Yii2 DropDownList用法. 有一张分类表,无限极分类那种,表结构如下,p ...
实用ExtJS教程100例-006：ExtJS中Window的用法示例
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window. 我们首先来创建一个窗口: var win = Ext.create("Ext.windo ...
Linux 中 make 命令用法示例
概述:make命令描述源程序间相互关系并自动编译,用于执行makefile文件中的预先设定的命令,诸如编译.运行.删除等等,可大大提高效率.在较大规模的系统中,人们希望对其中某个或者某一些模块的修改不 ...

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

在线运行地址

Egret 和 p2.js 坐标对比图

p2.js库的引用

代码

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

最新文章

热门文章