【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象
重力的方向和地面的问题
p2
中默认的方向是从上到下,如果重力默认是正数
的话,物体放到世界中是会从上面往下面飘的p2
中plane
地面默认的方向是y
轴的方向,而在p2
中y
轴的方向默认是从上往下首先来看,重力
gravity
是正数,并且plane
地面在视图中间,小球是怎么运动// 创建世界
this.world = new p2.World()
this.world.sleepMode = p2.World.BODY_SLEEPING
this.world.gravity = [0,5]
// 设置弹性属性
this.world.defaultContactMaterial.restitution = 1; // 创建地面
this.planeBody = new p2.Body({
position:[egret.MainContext.instance.stage.stageWidth/2,egret.MainContext.instance.stage.stageHeight/2]
})
let plane = new p2.Plane()
小球受重力的影响从上往下掉,没有问题,并且即使是在地面下面,地面的方向也是从上往下,小球下到地面之后依旧是从上往下运动
下面把世界的重力改成从下往上,相当于漂浮的感觉
可以看到
plane
下方,也就是在p2
引擎中的y轴正方向地面上
的小球依照物理定律,自由落地,从下往上落到地面上plane
上方,也就是p2
物理引擎中的地下世界,是会奇怪的往地面上跑总体来说:在
p2
物理世界中,地面上的物体,遵循自由落体和牛顿引力相关运动原理,但是默认方向是从上往下的Y
轴方向,所以如果地面在最下面的话,需要将plane
地面水平翻转180‘
,并且此时重力可以设置为正数
,达到从上往下的效果正确的效果是这样的:
实现代码
// 创建世界
this.world = new p2.World()
this.world.sleepMode = p2.World.BODY_SLEEPING
this.world.gravity = [0,5]
// 设置弹性属性
this.world.defaultContactMaterial.restitution = 1; // 创建地面
this.planeBody = new p2.Body({
position:[egret.MainContext.instance.stage.stageWidth/2,egret.MainContext.instance.stage.stageHeight/2]
})
let plane = new p2.Plane()
this.planeBody.angle = Math.PI // 地面需要旋转180度,不然是从上往下
生成阻碍方块,并且不允许方块有重叠区域
实现原理:
纵坐标可以设定在同一水平线上,横坐标位置随机,通过随机数生成位置,并且通过随机数确定方块的大小,生成第二个随机方块的时候判断时候与前面生成的所有方块有重叠部分` 半径 只差的绝对值 < 半径值和`, 如果有重叠部分的话,嵌套调用,如果没有的话,即生成新的方块
实现代码:
private randomNum(minNum,maxNum):number{ // 生成随机数的方法,借鉴自菜鸟教程
switch(arguments.length){
case 1:
return parseInt(Math.random() * minNum+1 + '',10);
break;
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
return 0;
break;
}
} private genereteBox():void{
/**
* 生成随机个障碍盒子
*/
let stageHeight = egret.MainContext.instance.stage.stageHeight // 获取屏幕高度
let stageWidth = egret.MainContext.instance.stage.stageWidth // 获取屏幕宽度 let count = this.randomNum(1,4) // 生成的障碍个数 let arr = [] let generatePosition = ()=>{ // 保证this指向问题
let size = this.randomNum(30,70)
let location = this.randomNum(size,stageWidth-size)
if(arr.length === 0){
arr.push({
size:size,
location:location
})
return [size,location]
}else{
for(let index = 0;index<arr.length;index++){
if((Math.abs(location-arr[index].location)) < (size + arr[index].size)){
console.log(size,location)
return generatePosition()
}
}
arr.push({
size:size,
location:location
})
return [size,location]
}
}
for(let index = 0;index<count;index++){
let [size,location] = generatePosition()
let react:egret.Shape = this.createBox(size)
let reactShape: p2.Shape = new p2.Box({
width:size,
height:size
})
let reactBody:p2.Body = new p2.Body({
type:p2.Body.STATIC,
position:[
location,stageHeight-size
],
})
reactBody.addShape(reactShape)
reactBody.displays = [react]
this.world.addBody(reactBody)
}
}
点击生成小球逻辑
实现逻辑
1.生成小球刚体,形状,及绑定贴图 2.生成小球的位置为点击事件的位置 3.绑定到`egret`的点击事件上
实现代码
//步骤1,2
private generateBall(locationX:number,locationY:number):void{
var ball:egret.Shape
var ballShape:p2.Shape
var ballBody:p2.Body ball = this.createBall()
ballShape = new p2.Circle({
radius:10
})
ballBody = new p2.Body({
position:[locationX,locationY],
mass:50,
overlaps:false
})
ball.width = (<p2.Circle>ballShape).radius*2
ball.height = (<p2.Circle>ballShape).radius*2
ball.anchorOffsetX = ball.width/2
ball.anchorOffsetY = ball.height/2
ballBody.addShape(ballShape)
ballBody.displays = [ball]
this.world.addBody(ballBody)
} // 步骤3 this.addEventListener(egret.TouchEvent.TOUCH_TAP,(e:egret.TouchEvent)=>{
this.generateBall(e.localX,e.localY) // e.localX和e.localY 可以拿到点击事件的点击X或者y
},this)
小球碰撞出现锚点问题,即碰撞不是发生在边缘,而是感觉发生在球心或者什么位置
原因分析:
1.可能是因为贴图的视觉中心和 刚体的中心没有设置在一起 在`egret`贴图的中心,默认是在坐标左上角 但是在`p2`物理引擎中,默认的图形锚点确是在刚体的中心 所以在使用两个合并时需要将贴图的锚点中心设置到和刚体中心一样 
代码如下:
private createBox(width:number,angle:number):egret.Shape{
var box = new egret.Shape()
box.graphics.beginFill(0x0000ff)
box.graphics.drawRect(0,0,width,width)
box.graphics.endFill()
box.anchorOffsetX = box.width/2
box.anchorOffsetY = box.height/2
box.rotation = angle * 180 / Math.PI;
console.log('box rotation : ' + box.rotation)
this.addChild(box)
return box
}
小球和方块出现重叠的现象,而且碰撞中心感觉只是在小球的中心点,并不是小球的边缘碰撞
问题现象:

检查原因:
原来是小球贴图`egret.shape`和小球物理引擎中刚体的大小不一样`p2.body` 小球的刚体结构实际上是在贴图内部的一个小区域
代码如下:
//修改后
private generateBall(locationX:number,locationY:number):void{
var ball:egret.Shape
var ballShape:p2.Shape
var ballBody:p2.Body
var size:number = 10
ball = this.createBall(size*2) // size是刚体半径的大小,生成小球贴图的时候需要两倍大小,因为egret drawCirle是直径
ballShape = new p2.Circle({
radius:size
})
ballBody = new p2.Body({
position:[locationX,locationY],
mass:50
})
ball.width = (<p2.Circle>ballShape).radius*2 // 小球宽度也是直径
ball.height = (<p2.Circle>ballShape).radius*2 // 小球高度页是直径
ball.anchorOffsetX = ball.width/2 //参考下一个问题
ball.anchorOffsetY = ball.height/2
ballBody.addShape(ballShape)
ballBody.displays = [ball]
this.world.addBody(ballBody)
}
贴图的旋转和刚体的旋转数值明明设置的是一样的,但是旋转角度和碰撞反应感觉角度并不正确
问题原因:
`egret`中表示旋转的`rotate`属性是弧度制 而 `p2`中表示旋转的`angle`属性是角度制,即在`p2`中写多少度就是旋转多少度,但是在`egret`的贴图中需要将角度转换为弧度 转换公式如下
数学上是用弧度而非角度,因为360的容易整除对数学不重要,而数学使用弧度更方便。角度和弧度关系是:2π弧度=360°。从而1°≈0.0174533弧度,1弧度≈57.29578°。
- 角度转换为弧度公式:弧度=角度÷180×π
2)弧度转换为角度公式: 角度=弧度×180÷π
** 代码如下:**
```typescript
protected freshFrame():void{
this.world.step(1)
var len:number = this.world.bodies.length
for(let index = 0;index<len;index++){
var body:p2.Body = this.world.bodies[index]
var display: egret.DisplayObject = body.displays[0]
display.x = body.position[0]
display.y = body.position[1]
display.rotation = body.angle * 180/ Math.PI
}
}
在两侧填上阻止的墙壁,形成密闭的环境
【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象的更多相关文章
- 最近这两天看了关于H5游戏开发的一个教程,实践很短暂,看了很多理论的东西,现在呢也只是想回忆回忆关于EUI的部分知识吧
首先我了解了什么是Egret: Egret中文就是白鹭的意思,Egret是一套H5游戏开发的软件.(纯粹属于个人理解) 其次我对以下几款软件的相关知识做了些了解: Egret Engine(引擎),E ...
- 今天我看了一个H5游戏EUI的例子,我都快分不清我到底是在用什么语言编译了代码了,作为刚刚学习H5游戏开发的菜鸟只能默默的收集知识
今天看了一个EUI的demo,也是接触H5游戏开发的第五天了,我想看看我能不能做点什么出来,哎,自己写果然还是有问题的.在看EUI哪一个demo的时候就遇见了一些摇摆不定的问题,我觉得提出来 1.to ...
- 关于h5游戏开发,你想了解的一切都在这儿!
2020年,受疫情影响,线下产业红利褪去,线上迎来的新一轮的高峰.众多商家纷纷抓住了转型时机,开启了流量争夺战.H5游戏定制无疑是今年引流的大热门.如何开发一款有趣.有爆点.用户爱买单的好游戏呢? ...
- 为什么选择H5游戏开发定制?
为什么选择H5游戏开发定制? 随着微信H5游戏推广带来的显著效果,越来越多的商家已经加入到游戏营销的队伍中来, 对H5小游戏有了解的商家都知道,[模板游戏]的价格往往低于[定制游戏]的价格,可是为什么 ...
- 2、Cocos2dx 3.0游戏开发找小三之引擎简单介绍
尊重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27094663 引擎简单介绍 Cocos2d-x 的 ...
- H5游戏开发之抓住小恐龙
第一次写技术性博文,以前都只是写一些生活感想,记录一些生活发生的事情. 博主大三学生一枚,目前学习JS一年多,还处于学习阶段,有什么说的不好的希望大牛指点下,由于第一次写博文,排版什么的有待改进,希望 ...
- H5游戏开发:贪吃蛇
贪吃蛇的经典玩法有两种: 积分闯关 一吃到底 第一种是笔者小时候在掌上游戏机最先体验到的(不小心暴露了年龄),具体玩法是蛇吃完一定数量的食物后就通关,通关后速度会加快:第二种是诺基亚在1997年在其自 ...
- H5游戏开发之多边形碰撞检测
2D多边形碰撞检测介绍这是一篇论证如何在2D动作游戏中执行碰撞检测的文章(Mario,宇宙入侵者等),为了保证它的高效性和精确性,碰撞检测是以多边形为基础的,而不是以sprite为基础.这是两种不同的 ...
- cocos2d-x ios游戏开发初认识(八) 触摸事件与碰撞检測
玩过植物大战僵尸都知道,要在草坪里放一朵向日葵或者其他的植物仅仅需触摸那个植物将其拖入到想要摆放的位置,这事实上就是这节要写的触摸事件.还能够发现当我们的僵尸出来的时候,我们的小豌豆会发子弹攻击僵尸, ...
随机推荐
- 编写Java程序_输入本部门五位员工的薪资,并根据用户输入的序号为指定员工进行提薪。若用户输入序号出现越界,则提示错误。
要求说明: 输入本部门五位员工的薪资,并根据用户输入的序号为指定员工进行提薪.若用户输入序号出现越界,则提示错误. 运行效果如图: 实现代码: import java.util.Scanner; pu ...
- 编写Java程序,用户在网上购买商品(good),当用户买了一本书(book)、一顶帽子(hat)或者买了一双鞋子(shoe),卖家就会通过物流将商品邮寄给用户,使用简单工厂模式模拟这一过程。
查看本章节 查看作业目录 需求说明: 编写Java程序,用户在网上购买商品(good),当用户买了一本书(book).一顶帽子(hat)或者买了一双鞋子(shoe),卖家就会通过物流将商品邮寄给用户, ...
- Unity——ShaderLab基础
1.格式 Shader "Custom/MyShader" //命名+右键创建shader路径 { //属性必须在代码里声明才能使用 Properties{ //属性,会出现在in ...
- 【Linux】Linux没有网络,可能的解决方法
[root@localhost etc]# cd /etc/sysconfig/network-scripts/ [root@localhost network-scripts]# ll 修改此文件中 ...
- gogs安装与说明(docker)
作为一个开发,少不了和git打交道,像github,gitee是很流行的git线上托管平台,而我们也搭建自己的git托管平台,有条件的可以使用gitlab,它对硬件有要求,像博主这种没条件用虚拟机的, ...
- XPTH定位总结
xpath定位总结:nodename 选取此节点的所有子节点. / :从根节点选取.绝对定位 //:从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置. 相对定位(推荐使用相对定位) . :选取 ...
- Selenium_获取浏览器名称和版本(5)
from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...
- mongodb用户权限管理的CRUD
https://blog.csdn.net/weixin_34332905/article/details/88759759?utm_medium=distribute.pc_relevant.non ...
- How to run a batch file each time the computer loads Windows
https://www.computerhope.com/issues/ch000322.htm#:~:text=Press Start%2C type Run%2C and press Enter. ...
- layui type:2 iframe子页面向父页面传值
需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...