Getting started with PhysicsEditor and Nape

Short tutorial how to use PhysicsEditor with Nape

Full source code to this example project is available on GitHub.

Initializing and importing

First import nape sources and also the physics data:

package;

import nape.space.Space;
import nape.phys.Body;
import nape.phys.BodyType;
import nape.phys.Material;
import nape.shape.Polygon;
import nape.geom.Vec2;

import PhysicsData;

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.PixelSnapping;

Loading the sprites

Load the sprite resources:

//graphical assets.
@:bitmap("icecream.png")  class IceCream  extends BitmapData {}
@:bitmap("hamburger.png") class Hamburger extends BitmapData {}
@:bitmap("drink.png")     class Drink     extends BitmapData {}
@:bitmap("orange.png")    class Orange    extends BitmapData {}

The main class

The main class contains the complete code for the example. First of all there you need some helper functions creating physics bodies from the loaded PhysicsData:

static function icecream () return PhysicsData.createBody("icecream", bitmap(new IceCream (0,0)))
static function hamburger() return PhysicsData.createBody("hamburger",bitmap(new Hamburger(0,0)))
static function drink    () return PhysicsData.createBody("drink",    bitmap(new Drink    (0,0)))
static function orange   () return PhysicsData.createBody("orange",   bitmap(new Orange   (0,0)))

The main method itself now contain all the code to glue this together:

Initialize the stage and create a Nape space with gravity pointing down:

var stage = flash.Lib.current.stage;
var space = new Space(new Vec2(0,600));

Create a border of static polygons as container for the dropping objects:

var border = new Body(BodyType.STATIC);
border.shapes.add(new Polygon(Polygon.rect(0,-400,-40,stage.stageHeight+400)));
border.shapes.add(new Polygon(Polygon.rect(stage.stageWidth,-400,40,stage.stageHeight+400)));
border.shapes.add(new Polygon(Polygon.rect(0,stage.stageHeight,stage.stageWidth,40)));
border.space = space;

Now register a material for the bouncy id used inside the PhysicsEditor for the objects:

PhysicsData.registerMaterial("bouncy", new Material(10));

Add a function which can be called from a timer to add items to the scene:

var factory = [icecream,hamburger,drink,orange];
function fall() {
    //generate a random one of our objects.
    var body = factory[Std.int(Math.random()*factory.length)]();
    stage.addChild(body.graphic);
    body.space = space;

    //random position above stage
    body.position.setxy(Math.random()*(stage.stageWidth-100)+50,-200);
    body.rotation = Math.PI*2*Math.random();

    //rsemi-randomised velocity.
    body.velocity.y = 350;
    body.angularVel = Math.random()*10-5;
};

Use a timer function to add objects to the scene using the fall() function from above.

stage.addEventListener(flash.events.Event.ENTER_FRAME, function(_) {
    //until we have 30 objects, drop an object every 30 time steps
    if(space.timeStamp%30==0 && space.bodies.length<30) fall();

    //run simulation
    space.step(1/60);
});