Adding, removing and skinning bodies with NAPE

December 17, 2012 • Actionscript 3, Flash by Emanuele Feronato • 4 Comments

With the increasing popularity and development of NAPE, which now reaches version 2.0, it’s time to start looking at it and writing some tutorials.

I already showed you a quick comparation between Box2D and Nape in Box2D Vs Nape: Hello both worlds, today I am showing you how to create and destroy a box with a mouse click, and how to skin bodies.

So if you click with the mouse on this movie you will:

* Create a crate if you clicked on an empty space
* Destroy a crate if you clicked on it

And the whole thing is managed by this script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import nape.geom.Vec2;
	import nape.phys.Body;
	import nape.phys.BodyList;
	import nape.phys.BodyType;
	import nape.shape.Polygon;
	import nape.space.Space;
	import nape.util.ShapeDebug;
	public class Main extends Sprite {
		// world creation with gravity
		private var world:Space=new Space(new Vec2(0,500));
		public function Main() {
			// static body creation with origin at pixels 320,500
			var staticFloor:Body=new Body(BodyType.STATIC,new Vec2(320,500));
			// new 640x40 box creation
			var floor:Polygon=new Polygon(Polygon.box(640,40));
			// elasticity property, similar to Box2D restitution
			floor.material.elasticity=0.5;
			// adding polygon to body
			staticFloor.shapes.add(floor);
			// adding body to world
			staticFloor.space=world;
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(MouseEvent.CLICK,handleClick);
		}
		private function handleClick(e:MouseEvent):void {
			// getting all bodies at a given point (mouse coords)
			var bodies:BodyList=world.bodiesUnderPoint(new Vec2(mouseX,mouseY));
			// if any...
			if (bodies.length>0) {
				for (var i:int = 0; i < bodies.length; i++) {
					// getting the body
					var body:Body=bodies.at(i);
					// destroying it and removing its graphic asset if dynamic
					// we don't want to remove the floor although it's outside the stage
					if (body.type==BodyType.DYNAMIC) {
						removeChild(body.userData.sprite);
						world.bodies.remove(body);
					}
				}
			}
			else {
				// creation of a dynamic body, same thing as the static floor
				var dynamicBox:Body=new Body(BodyType.DYNAMIC,new Vec2(mouseX,mouseY));
				var block:Polygon=new Polygon(Polygon.box(50,50));
				block.material.elasticity=0.5;
				block.material.density=1;
				dynamicBox.shapes.add(block);
				// setting its custom data
				dynamicBox.userData.sprite=new Crate();
				addChild(dynamicBox.userData.sprite);
				dynamicBox.space=world;
			}
		}
		private function update(e:Event):void {
			world.step(1/30,10,10);
			// looping though bodies
			var bodies:BodyList=world.bodies;
			for (var i:int = 0; i < bodies.length; i++) {
				var body:Body=bodies.at(i);
				if(body.userData.sprite!=null){
					// adjusting graphic asset position
					body.userData.sprite.x=body.position.x
					body.userData.sprite.y=body.position.y
					body.userData.sprite.rotation=body.rotation*57.2957795;
				}
			}
		}
	}
}

package {

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import nape.geom.Vec2;

import nape.phys.Body;

import nape.phys.BodyList;

import nape.phys.BodyType;

import nape.shape.Polygon;

import nape.space.Space;

import nape.util.ShapeDebug;

public class Main extends Sprite {

// world creation with gravity

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

public function Main() {

// static body creation with origin at pixels 320,500

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

// new 640x40 box creation

var floor:Polygon=new Polygon(Polygon.box(640,40));

// elasticity property, similar to Box2D restitution

floor.material.elasticity=0.5;

// adding polygon to body

staticFloor.shapes.add(floor);

// adding body to world

staticFloor.space=world;

addEventListener(Event.ENTER_FRAME, update);

stage.addEventListener(MouseEvent.CLICK,handleClick);

}

private function handleClick(e:MouseEvent):void {

// getting all bodies at a given point (mouse coords)

var bodies:BodyList=world.bodiesUnderPoint(new Vec2(mouseX,mouseY));

// if any...

if (bodies.length>0) {

for (var i:int = 0; i < bodies.length; i++) {

// getting the body

var body:Body=bodies.at(i);

// destroying it and removing its graphic asset if dynamic

// we don't want to remove the floor although it's outside the stage

if (body.type==BodyType.DYNAMIC) {

removeChild(body.userData.sprite);

world.bodies.remove(body);

}

else {

// creation of a dynamic body, same thing as the static floor

var dynamicBox:Body=new Body(BodyType.DYNAMIC,new Vec2(mouseX,mouseY));

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

block.material.elasticity=0.5;

block.material.density=1;

dynamicBox.shapes.add(block);

// setting its custom data

dynamicBox.userData.sprite=new Crate();

addChild(dynamicBox.userData.sprite);

dynamicBox.space=world;

}

private function update(e:Event):void {

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

// looping though bodies

var bodies:BodyList=world.bodies;

for (var i:int = 0; i < bodies.length; i++) {

var body:Body=bodies.at(i);

if(body.userData.sprite!=null){

// adjusting graphic asset position

body.userData.sprite.x=body.position.x

body.userData.sprite.y=body.position.y

body.userData.sprite.rotation=body.rotation*57.2957795;

}

Set up your NAPE project using the swc in the official download page and start playing with it.

Rate this post: 1 Star

(13 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 4 comments

Adding, removing and skinning bodies with NAPE – Emanuele Feronato « eaflash

on December 18, 2012 at 10:39 am

[...] on http://www.emanueleferonato.com Share this:TwitterFacebookLike this:LikeBe the first to like [...]
Rahyar

on December 18, 2012 at 12:49 pm

Tank you :)
yas

on December 18, 2012 at 10:47 pm

Hi Emanuele,
you prefer to use cloth or box2d
any difference ?
Thank you.
yas

on December 18, 2012 at 10:48 pm

Sorry i mean
you prefer to use nape or box2d.

Emanuele Feronato

italian geek and PROgrammer

Adding, removing and skinning bodies with NAPE

This post has 4 comments

Adding, removing and skinning bodies with NAPE – Emanuele Feronato « eaflash

Rahyar

yas

yas