用P2刚体属性实现贴图

作者: ladeng6666 分类: HTML5 发布时间: 2015-05-23 23:44 阅读: 4,418

上一节,我们学习了P2物理引擎的基本用法,并使用P2DebugDraw绘制出模拟结果。实际上,只要知道了刚体的坐标、角度,并相应的更新图片素材的位置等属性,就可以轻松的实现贴图啦。
本节,我们就来学习一下刚体常用的属性,这些属性主要分为3大类:

4

角度相关属性

  •  angle :角度。刚体的角度
  • angularDamping :角速度阻尼。刚体在角速度方向上收到的阻尼
  • angularForce :扭力。刚体在角速度方向上收到的扭力
  • angularVelocity :角速度。刚体的角速度
  • previousAngle :前角度。上一次step()执行后刚体的角度
  • interpolatedAngle :后角度。下一次step()刚体预计的角度

速度相关属性

  • position :坐标。刚体的坐标位置
  • damping :速度阻尼。刚体在线性速度方向上收到的阻尼
  • force :作用力。刚体在线性速度方向上收到的扭力
  • velocity :速度。刚体的速度
  • previousPosition :前坐标。上一次step()执行后刚体的坐标
  • interpolatedPosition :后坐标。下一次step()刚体预计的坐标

其他属性

  • type :刚体类型。刚体当前应用的类型,Dynamic、Kinematic或Static
  • fixedRotation :锁定角度。锁定角度后,刚体角度不发生变化,可以用于横版游戏人物
  • gravityScale :重力本例。=0时,刚体不受重力影响;<0时,刚体向上移动。
  • mass :刚体质量。刚体的质量,用于作用力等需要质量的公式运算
  • inertia :角速度惯性。刚体在角速度上的惯性,值越大惯性越大
  • shapes :形状。刚体中绑定的所有形状清单

举个栗子

掌握了刚体的这些属性,给物理游戏贴图,简直就和扣鼻屎一样的简单和爽快了,在P2中实现的贴图效果如下图所示:

bodyImageDemo


大痔过程

创建示例的大痔过程如下:

1>为刚体body自定义一个任意名称的属性,如userData,利用这个属性为刚体绑定一个贴图对象。
需要说明的是,Egret团队为p2中的Body类添加了一个数组类型的displays属性。本例中我按照Box2D里的习惯,添加了userData属性,来绑定自定属性,包括素材图片。

2>遍历世界中的每一个刚体,并访问刚体的position和angle属性。

3>根据刚体的角度和坐标,来更新贴图的位置和角度,实现贴图与刚体的同步运动。

完整的代码如下:

需要说明的是,以上没有加载素材相关的代码,为了更专注p2物理引擎的示例代码,加载素材的代码部分,被我集中到了AbstractP2Test.ts文件中了,你可以下载源代码进行查看。
如果你对素材的加载还不是很熟悉,请参考@郭少瑞_NeoGuo  的教程http://bbs.egret-labs.org/thread-248-1-1.html

代码很简单,重点是:
1>getBitmapByRes()函数中,创建的Bitmap对象,记得通过anchorOffsetX/Y设置控制点坐标,因为位图加载进来之后,默认是以左上角为初始原点的。
2>在bindAsset()函数中,通过userData属性,为刚体绑定图片素材。因为刚体与素材的尺寸不一样,所以这里通过scaleX/Y调整了图像素材asset的尺寸。
3>在loop()函数中,根据刚体的position和angle(弧度)属性,更新图像素材userData的属性。

点击链接下载原文件

http://yun.baidu.com/s/1gdALIQf

下集预告
P2中的形状

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注