用PhysicsEditor快速创建自定义Box2D刚体(一)

PhysicsEditor,相信很多人都已经很熟悉了,通过它的可视化编辑界面,点一点,拉一拉就可以轻松创建任意的多边形刚体模型,并将这个模型数据导出成我们所需的格式,例如AS3类。PhysicsEditor支持Box2D、Cocos2d、Nape等多种2D物理引擎。闲话少说,我们马上开始学习PhysicsEditor。

PS:如果你喜欢学习英文资料,可以参考这里

在学习PhysicsEditor之前,先讲一下它是uhe跟Flash一起工作的。学习新事物就要和我们熟悉的东西联系到一起,这样才能理解的更快,不是吗?!大约有下面几个步骤:

  1. 在PhysicsEditor中创建好刚体模型后(怎么创建,稍后再讲),导出成一个PhysicsData.as类。这个类中有一个createBody方法,用来创建刚体,以及保存了刚体的顶点数据。
  2. 把在PhysicsEditor中用来创建刚体模型的图像导入到Flash中,稍后作为刚体的userData使用。当然,如果不需要userData,可以省略这一步。
  3. 创建文档类,键入代码,创建一个基本的Box2D世界
  4. 在文档类中,创建一个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);
		}

	}

}

 源文件下载地址

联系作者

公众号:拉小登 | 微博:拉登Dony | B站:拉小登Excel

23 Replies to “用PhysicsEditor快速创建自定义Box2D刚体(一)”

  1. ladeng6666(0, 0)怎么带两个参数啊,ladeng6666是什么元件?我怎么加图片,图片的位置都不和刚体重合啊。????

  2. 我用一个图片创建一个刚体,如果不给这个刚体设置坐标的话,他也是在我的图片中物体所在位置。但是在给他添加图片的时候,图片的位置就不和刚体在一起了。必须要给刚体设置位置吗?

  3. 大叔你的教程很有用,我是做C++的,还是能学到很多东西,就是不知 physicseditor 导出plist,如何跟刚体关联起来,不知大叔是否知道。

  4. 我使用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;
    }

  5. PhysicsEditor导出的plist文件中,除了包含坐标顶点,还包括一些密度,摩擦,等的物理属性。所有这些是和刚体有个结合,关联的问题。我现在遇到的问题也是无法使用plist文件里的坐标顶点,我以为只是把那些坐标直接抄写到代码b2vec2()中,结果运行崩溃,所以请再详细说说导出plist文件后,它是怎么跟box2d实现交互结合的。对了,我导出的文件格式是box2d generic (PLIST)这个格式的。

  6. 谢谢关注,我会持续写出更多的教程,另外我在撰写一本Box2D物理游戏开发的书籍,待上市后,我会在网站上公布,欢迎持续关注!

  7. 拉登老师 你好。有个问题需要请教一下您:
    通过您博客下载的源代码直接编译可用,但是如果我用flash cs6新建一个as3文档,然后把舞台属性的as类链接到你源代码的类 编译,其他都正常 但是四周的墙有问题,addChild(LDEasyBox2D.createDebug(world)); 这句
    你的fla编辑出来 四周是绿墙,自己新建的as3文档 编译出来 只会在舞台00原点出现一个绿色的小十字,我看我新建的fla跟你的位移区别就是AS3设置的库路径那里 你的fla多了几个flex.swc 、core.swc 难道是flash的版本不同的原因?

  8. 可能是应为没有抓取到舞台的尺寸,就执行了createWall()函数,如果可以的话,你可以把源文件发给我,我帮你看看,我的邮箱是ladeng6666@163.com

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注