Box2D Vs Nape: Hello both worlds

July 30, 2012 • Actionscript 3, Box2D, Flash by Emanuele Feronato • 13 Comments

Nape is an open source physics engine written I Haxe by Luca Deltodesco which is also available for AS3 as swc library and is going to generate some interest about it.

In this post, I am creating a simple Hello World for both engines, with a dynamic square falling over a static floor, and explain the difference between the scripts.

Box2D

This is the script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class MainBox2D extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,10),true);
		private var worldScale:Number=30;
		public function MainBox2D() {
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			var debugSprite:Sprite = new Sprite();
			addChild(debugSprite);
			debugDraw.SetSprite(debugSprite);
			debugDraw.SetDrawScale(worldScale);
			debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
			debugDraw.SetFillAlpha(0.5);
			world.SetDebugDraw(debugDraw);
			var bodyDef:b2BodyDef=new b2BodyDef;
			bodyDef.position.Set(320/worldScale,460/worldScale);
			var polygonShape:b2PolygonShape=new b2PolygonShape();
			polygonShape.SetAsBox(320/worldScale,20/worldScale);
			var fixtureDef:b2FixtureDef=new b2FixtureDef();
			fixtureDef.shape=polygonShape;
			var staticFloor:b2Body=world.CreateBody(bodyDef);
			staticFloor.CreateFixture(fixtureDef);
			bodyDef.position.Set(320/worldScale,0/worldScale);
			bodyDef.type=b2Body.b2_dynamicBody;
			polygonShape.SetAsBox(25/worldScale,25/worldScale);
			fixtureDef.shape=polygonShape;
			var dynamicBox:b2Body=world.CreateBody(bodyDef);
			dynamicBox.CreateFixture(fixtureDef);
			addEventListener(Event.ENTER_FRAME, update);
		}
		private function update(e:Event):void {
			world.Step(1/30,10,10);
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

package {

import flash.display.Sprite;

import flash.events.Event;

import Box2D.Dynamics.*;

import Box2D.Collision.*;

import Box2D.Collision.Shapes.*;

import Box2D.Common.Math.*;

public class MainBox2D extends Sprite {

private var world:b2World=new b2World(new b2Vec2(0,10),true);

private var worldScale:Number=30;

public function MainBox2D() {

var debugDraw:b2DebugDraw = new b2DebugDraw();

var debugSprite:Sprite = new Sprite();

addChild(debugSprite);

debugDraw.SetSprite(debugSprite);

debugDraw.SetDrawScale(worldScale);

debugDraw.SetFlags(b2DebugDraw.e_shapeBit);

debugDraw.SetFillAlpha(0.5);

world.SetDebugDraw(debugDraw);

var bodyDef:b2BodyDef=new b2BodyDef;

bodyDef.position.Set(320/worldScale,460/worldScale);

var polygonShape:b2PolygonShape=new b2PolygonShape();

polygonShape.SetAsBox(320/worldScale,20/worldScale);

var fixtureDef:b2FixtureDef=new b2FixtureDef();

fixtureDef.shape=polygonShape;

var staticFloor:b2Body=world.CreateBody(bodyDef);

staticFloor.CreateFixture(fixtureDef);

bodyDef.position.Set(320/worldScale,0/worldScale);

bodyDef.type=b2Body.b2_dynamicBody;

polygonShape.SetAsBox(25/worldScale,25/worldScale);

fixtureDef.shape=polygonShape;

var dynamicBox:b2Body=world.CreateBody(bodyDef);

dynamicBox.CreateFixture(fixtureDef);

addEventListener(Event.ENTER_FRAME, update);

}

private function update(e:Event):void {

world.Step(1/30,10,10);

world.ClearForces();

world.DrawDebugData();

}

and this is the result:

Here we go with next engine:

Nape

This is the script:

package {

import flash.display.Sprite;

import flash.events.Event;

import nape.geom.Vec2;

import nape.phys.Body;

import nape.phys.BodyType;

import nape.shape.Polygon;

import nape.space.Space;

import nape.util.ShapeDebug;

public class MainNape extends Sprite {

private var world:Space=new Space(new Vec2(0,500));

private var debug:ShapeDebug=new ShapeDebug(640,480,0x00ff00);

public function MainNape() {

addChild(debug.display);

var staticFloor:Body=new Body(BodyType.STATIC,new Vec2(320,460));

staticFloor.shapes.add(new Polygon(Polygon.box(640,40)));

staticFloor.space=world;

var dynamicBox:Body=new Body(BodyType.DYNAMIC,new Vec2(320,0));

var block:Polygon=new Polygon(Polygon.box(50,50));

dynamicBox.shapes.add(block);

dynamicBox.space=world;

addEventListener(Event.ENTER_FRAME, update);

}

private function update(e:Event):void {

debug.clear();

world.step(1/30,10,10);

debug.draw(world);

debug.flush();

}

and this is the result

Now, let’s see the differences:

World creation

Box2D: everything is managed by a b2World object, which wants the gravity in the constructor.

1	private var world:b2World=new b2World(new b2Vec2(0,10),true);

Nape: the world is a Space object, which wants the gravity in the constructor:

1	private var world:Space=new Space(new Vec2(0,500));

Vec2 is basically the same as b2Vec2. Also notice gravity is defined using different scales, I personally prefer Box2D approach as it’s intended as real world gravity.

Debug Draw

Box2D: debug draw in Box2D allows great customization, including what to display (shapes, joints, and so on), scale and fill alpha, but you’ll have to write some lines of code:

var debugSprite:Sprite = new Sprite();

addChild(debugSprite);

debugDraw.SetSprite(debugSprite);

debugDraw.SetDrawScale(worldScale);

debugDraw.SetFlags(b2DebugDraw.e_shapeBit);

debugDraw.SetFillAlpha(0.5);

world.SetDebugDraw(debugDraw);

Nape: debug draw in Nape is easier to setup but it does not allow customization. Just declare a variable defining the viewport and the main color:

1	private var debug:ShapeDebug=new ShapeDebug(640,480,0x00ff00);

and then you are ready to add debug draw to Display List:

1	addChild(debug.display);

I’m personally finding Box2D debug draw more elegant, thanks to filled shapes.

Adding a simple box

Box2D: even adding a box can be quite a task for beginners, you have to create a body definition, then shape, then a fixture to attach the shape to the body.

var bodyDef:b2BodyDef=new b2BodyDef;

bodyDef.position.Set(320/worldScale,460/worldScale);

var polygonShape:b2PolygonShape=new b2PolygonShape();

polygonShape.SetAsBox(320/worldScale,20/worldScale);

var fixtureDef:b2FixtureDef=new b2FixtureDef();

fixtureDef.shape=polygonShape;

var staticFloor:b2Body=world.CreateBody(bodyDef);

staticFloor.CreateFixture(fixtureDef);

Not the most intuitive thing, but it allows a lot of customization. Also, Box2D works in meters and you will have to convert it to pixels.

Nape: basic shapes are really easy to crate with Nape you just need to define a body and a shapes.

var staticFloor:Body=new Body(BodyType.STATIC,new Vec2(320,460));

staticFloor.shapes.add(new Polygon(Polygon.box(640,40)));

staticFloor.space=world;

And as you can see it works with pixels.

World update

Updating the world is a critical process as it renders the world in our Flash movie

Box2D: in three lines we make the simulation run and draw:

world.Step(1/30,10,10);

world.ClearForces();

world.DrawDebugData();

The core lies in Step method which runs in this case the simulation at 1/30 seconds at time.

Nape: it’s basically the same, step method handles the simulation.

debug.clear();

world.step(1/30,10,10);

debug.draw(world);

debug.flush();

And that’s all at the moment. As you can see, there isn’t that much difference between these two engines when dealing with basic projects. During next days I’ll show you something more complicated.

Rate this post: 1 Star

(21 votes, average: 5.00 out of 5)

Loading ...

Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 13 comments

GamyGuru

on July 30, 2012 at 11:54 pm

Great Article…. Keep up writing…. :)

Regards,
GamyGuru (http://gamyguru.wordpress.com)
sv

on July 31, 2012 at 7:44 am

Looking forward to the more complicated examples.
Veeramani

on August 1, 2012 at 10:54 am

Which is the best one?…. Emanuele
Veeramani

on August 1, 2012 at 11:00 am

How to download the NAPE AS Folder emanuele
Julian

on August 1, 2012 at 7:45 pm

@Veeramani: Just switch to Haxe! It’s awesome. Don’t you bother with adobe ;). Also with Haxe you can still generate swf files if you want to. I haven’t that much experience with nape but as far as I can see you will save some code with nape and it has a few features that box2d doesn’t have.

In future projects we will also try to use nape. Looks like a great phy engine with great additions compared to box2d. Thanks for the tut!
Bengan

on August 2, 2012 at 9:12 am

Box2dweb vs flash, which is faster ?
The game at http://pixsansar.com/box2dweb-jumping-and-puzzle-ball-menu is very cool and tough which is built using box2dweb.
Luca Deltodesco

on August 4, 2012 at 3:19 pm

The nape debug drawers do permit customisation: there are flags that can be set to enable/disable the drawing of different things and you can define your own colouring by setting the colour dynamic method, or set the transform object to scale/translate/rotate the debug view operations.

You cannot ask it to draw shapes with fills but there’s no reason I cannot add that option if people want it, it was not included because the nape demos tend to have too many objects so that drawing fills (or even using flash api in the first place instead of the BitmapDebug drawer) becaomes prohibitively slow.

Also the colour argument is not the main colour to draw with. it is a background colour (which in the case of shape debug is only used when it comes to deciding what colour to tint objects with when they go to sleep which is why in your image they have turned green; this is to avoid the use of alpha which again is slower. Had the background colour been set to black, then when the object goes to sleep they would have been darkened instead; for instance the constraints demo http://deltaluca.me.uk/docnew/swf/Constraints.html the background colour is set as 0×333333 and the objects that go to sleep are tinted so as to blend into the background)
fred

on August 4, 2012 at 3:36 pm

Nape is about a zillion times faster than box2d.
tle

on August 7, 2012 at 3:00 am

I have ever used Nape before, and I like Nape more than Box2d.
Maras

on August 22, 2012 at 8:22 pm

I’m using only Box2D but some Nape performance demos are really impressive!
Selim Abidin

on October 18, 2012 at 5:28 pm

i am one of fans of Box2D physics lib. I’ve never used Nape Physics Engine but it is obvious the fastest Nape and it is seems easier compored Box2D. Tests i have examined a few comparison tests between Nape and Box2D Alc. Nape was faster compored Box2D alc. Maybe when we dig more between two engine, we can see good and bad sides better But after Adobe PF, Nape deserves to be more popular. I suppose i will continue with Nape.

http://deltaluca.me.uk/forum/index.php/t/385/d0988a65879a4912b6bcb7cd892323bf/
ADev

on February 23, 2013 at 9:02 pm

I saw a great box2d/nape side-by-side demo where you can click the mouse to create creates that fall down to the floor and stack up. It had a black background.

Anyone see that demo? I’d love to check it out again.

Thanks!
Using the Nape v2.0+ Physics Engine in ActionScript 3 | Jean-Philippe Côté

on April 5, 2013 at 4:58 am

[...] I highly recommend you try it out. For a more detailed comparison between the two, check out this comparison by Emanuele [...]

Emanuele Feronato

italian geek and PROgrammer

Box2D Vs Nape: Hello both worlds

This post has 13 comments

GamyGuru

sv

Veeramani

Veeramani

Julian

Bengan

Luca Deltodesco

fred

tle

Maras

Selim Abidin

ADev

Using the Nape v2.0+ Physics Engine in ActionScript 3 | Jean-Philippe Côté