用PhysicsEditor快速创建自定义Box2D刚体(一)
PhysicsEditor,相信很多人都已经很熟悉了,通过它的可视化编辑界面,点一点,拉一拉就可以轻松创建任意的多边形刚体模型,并将这个模型数据导出成我们所需的格式,例如AS3类。PhysicsEditor支持Box2D、Cocos2d、Nape等多种2D物理引擎。闲话少说,我们马上开始学习PhysicsEditor。
PS:如果你喜欢学习英文资料,可以参考这里。
在学习PhysicsEditor之前,先讲一下它是uhe跟Flash一起工作的。学习新事物就要和我们熟悉的东西联系到一起,这样才能理解的更快,不是吗?!大约有下面几个步骤:
- 在PhysicsEditor中创建好刚体模型后(怎么创建,稍后再讲),导出成一个PhysicsData.as类。这个类中有一个createBody方法,用来创建刚体,以及保存了刚体的顶点数据。
- 把在PhysicsEditor中用来创建刚体模型的图像导入到Flash中,稍后作为刚体的userData使用。当然,如果不需要userData,可以省略这一步。
- 创建文档类,键入代码,创建一个基本的Box2D世界。
- 在文档类中,创建一个PhysicsData实例对象,用下面的代码创建刚体。然后正常的更新Box2D世界就可以了。
以拉登大叔的头像为例,实现的效果如下,点击舞台创建头像。
[swfobject]702[/swfobject]
具体的用PhysicsEditor创建刚体模型和导入PhysicsData类的方法,我们下一节继续介绍。上面示例的完整代码和注释如下:
package { import Box2D.Collision.b2WorldManifold; import Box2D.Common.Math.b2Vec2; import Box2D.Dynamics.b2Body; import Box2D.Dynamics.b2World; import Box2D.Dynamics.Contacts.b2Contact; import flash.display.Bitmap; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; /** * ... * @author ladeng6666 */ public class Main extends Sprite { private var world:b2World; private var phyicsData:PhysicsData; public function Main() { createWorld();//创建世界 phyicsData = new PhysicsData(); //添加事件侦听器 addEventListener(Event.ENTER_FRAME, loop); stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); } //创建Box2D世界 private function createWorld():void { //创建Box2D世界 world = world = new b2World(new b2Vec2(0, 10), true); //添加调试视图 addChild(LDEasyBox2D.createDebug(world)); LDEasyBox2D.stage = stage; LDEasyBox2D.createWrapWall(world, this); } private function onMouseDown(me:MouseEvent):void { //用拉登大叔的头像创建userData,并添加到舞台上 var userData:Bitmap = new Bitmap(new ladeng6666(0, 0)); addChild(userData); //用physicsData实例的createBody方法创建刚体,参数的重点是第一个 //它是在PhysicsEditor中添加的图像的名称,不要Flash库里的图像名称混为一谈 //现在不明白也没关系,下一节我们会仔细学习 var body:b2Body = phyicsData.createBody("ladeng6666", world, b2Body.b2_dynamicBody, userData); //设置刚体的坐标 var position:b2Vec2 = new b2Vec2(mouseX / phyicsData.ptm_ratio, mouseY / phyicsData.ptm_ratio); position.Subtract(body.GetLocalCenter()); body.SetPosition(position); } private function loop(e:Event):void { var body:b2Body = world.GetBodyList(); //遍历所有的刚体,更新它们的userData的坐标个角度 for (; body; body = body.GetNext()) { if (body.GetUserData() != null) { body.GetUserData().x = body.GetPosition().x * phyicsData.ptm_ratio; body.GetUserData().y = body.GetPosition().y * phyicsData.ptm_ratio; body.GetUserData().rotation = body.GetAngle() *180/Math.PI; } } LDEasyBox2D.updateWorld(world); } } }
源文件下载地址
联系作者
ladeng6666(0, 0)怎么带两个参数啊,ladeng6666是什么元件?我怎么加图片,图片的位置都不和刚体重合啊。????
ladeng6666(0,0)是库里的图片,是BitmapData的子类,(0,0)表示图像的其实坐标!
我用一个图片创建一个刚体,如果不给这个刚体设置坐标的话,他也是在我的图片中物体所在位置。但是在给他添加图片的时候,图片的位置就不和刚体在一起了。必须要给刚体设置位置吗?
我知道原因了,哈哈
要记得实时更新贴图的坐标,另外注意把刚体的重心移动到中心位置!
拉登,你是哪的?把你加入我的博客导航
这跟我是哪里的有关系吗?
博客导航 是要分类的啊 , 分 地区, 博客种类
好吧,我是山东的
ok,搞定了。
大叔你的教程很有用,我是做C++的,还是能学到很多东西,就是不知 physicseditor 导出plist,如何跟刚体关联起来,不知大叔是否知道。
将刚体关联起来?不好意思,我没看明白你的意思,能解释的更详细一点吗?
我使用physic editor1.09试用版,nape 2.09 ,starling 1.3做项目
为什么
physic editor导出的data文件
ret.graphic = graphic;
ret.graphicUpdate = function(b:Body):void {
var gp:Vec2 = b.localToWorld(offset);
graphic.x = gp.x;
graphic.y = gp.y;
graphic.rotation = (b.rotation*180/Math.PI)%360;
}
always wrong!
您好,刚体和贴图不能完全对上呢?
PhysicsEditor导出的plist文件中,除了包含坐标顶点,还包括一些密度,摩擦,等的物理属性。所有这些是和刚体有个结合,关联的问题。我现在遇到的问题也是无法使用plist文件里的坐标顶点,我以为只是把那些坐标直接抄写到代码b2vec2()中,结果运行崩溃,所以请再详细说说导出plist文件后,它是怎么跟box2d实现交互结合的。对了,我导出的文件格式是box2d generic (PLIST)这个格式的。
謝謝您用心花時間教導我們Flash!
谢谢关注,我会持续写出更多的教程,另外我在撰写一本Box2D物理游戏开发的书籍,待上市后,我会在网站上公布,欢迎持续关注!
拉登老师 你好。有个问题需要请教一下您:
通过您博客下载的源代码直接编译可用,但是如果我用flash cs6新建一个as3文档,然后把舞台属性的as类链接到你源代码的类 编译,其他都正常 但是四周的墙有问题,addChild(LDEasyBox2D.createDebug(world)); 这句
你的fla编辑出来 四周是绿墙,自己新建的as3文档 编译出来 只会在舞台00原点出现一个绿色的小十字,我看我新建的fla跟你的位移区别就是AS3设置的库路径那里 你的fla多了几个flex.swc 、core.swc 难道是flash的版本不同的原因?
可能是应为没有抓取到舞台的尺寸,就执行了createWall()函数,如果可以的话,你可以把源文件发给我,我帮你看看,我的邮箱是ladeng6666@163.com
。。
学习学习