• About
• AIR Applications
  • ImageSizer
  • Screentweetr
• Blog
• Contact

Psyked *

it’s easy once you know how.

Simple Box2D – Custom Polygon creation.

Posted by James - 11/01/10 at 09:01:33 am

I’ve been working on some classes to simplify Box2D for Actionscript developers (See previous post for a quick intro).  The latest update to these classes introduces couple of minor ideas, and one gosh-darned awesome idea, if I do say so myself.  Let’s start with the awesome things, and move on from there…

Awesome thing: Creating Custom Polygons

Or rather the methods for creating them.  Shapes in Box2D come in three basic flavours – circle, rectangle and custom polygon.  Moreover, everything must be convex (no inny bits), have no more than 8 sides, and can’t have holes.  On the plus side you can still make larger, more complex objects out of smaller ones – but it all involves a lot of thinking.

So, here’s the solution – or rather, the options.

Polygon creation option #1 – Creating a polygon from an array of points.

Using some clever triangulation code from Splashdust.net, there’s a simple method for creating any custom shape from an array of Point objects.  With this method you can create a shape with any number of sides, and not worry about whether the shape is concave or convex.  It’ll still break if the edges of your shape interest each other, and doesn’t support holes in the objects you’re creating, but it’s a start.

var array:Array = [ new Point( 0, 0 ), new Point( 10, 0 ), new Point( 10, 10 ), new Point( 20, 10 ), new Point( 20, 0 ), new Point( 30, 0 ), new Point( 30, 30 ), new Point( 0, 30 ) ];

world.createComplexPolygon( 50, 50, array );

Polygon creation option #2 – Creating a polygon from a shape in a library.

This is where things get cool.  Creating a shape from a series of points is all well and good, but it’s a laborious process to set up and modify.  You can create a shape in the Flash IDE, add your symbol to your library and import it to Box2D.  Currently this method only supports single shapes on a single layer, and only straight edges – but multiple shapes, layers and curved edges are definitely on the list for the future.

world.createPolyFromLibraryShape( 300, 100, "sampleShape", "vectorassets.swf" );

Minor thing #1: Mouse interaction

What fun is a simulation if you can’t interact with it? So we now have an easy way to add mouse joints to move things about.  In the next version it’s my plan to add a method for filtering out objects, presumably based on each bodies userData.

world.mouseInteraction = true;

Minor thing #2: Framerate-independent animation.

I stole this idea wholeheartedly from QuickBox2D.  Too good an idea to pass up I’m afraid, this just means that the simulation of the Box2D world is based on a timer, not a framerate.  In theory then, the simulation doesn’t slow down or speed up depending on the framerate – which is useful for many things, like graphic-intensive applications and/or memory optimisation.

world.framerateIndependantAnimation = true;

And here’s some code for a quick example with framerate independent animation and mouse interaction enabled;

var options:Box2DWorldOptions = new Box2DWorldOptions( 500, 280, 30, 9.8 );
options.setWorldEdges( true, true, true, true );
var world:Box2DWorld = Box2DUtils.createBoxedWorld( options );
world.debugDraw = true;
world.mouseInteractExclusions = new Array();
world.mouseInteraction = true;
world.framerateIndependantAnimation = true;
addChild( world );

I’ve compiled all of my source files into a handy project file if you want to take a look.  Documentation and comments are a bit sparse, but hopefully it’ll prove useful!

Download the project files [Zip, 48kb]

Simples!

9 Comments »

1. 

   it’s so nice

   Comment by nanang — 11 January 2010 #

2. 

   That’s badass stuff man.

   Comment by reyco — 11 January 2010 #

3. 

   I created a JSFL a while back that examines a shape and outputs an array of coordinates to the output panel. You could use this in the Flash IDE to automate the process. Contact me if you’re interested in adapting it for your use!

   Comment by Geoff Gaudreault — 11 January 2010 #

4. 

   great work james
   I just started up with BOX2d and found the limitation on drawing shapes pretty awkward but you gave the solution
   kudos!

   Comment by nikhil — 11 January 2010 #

5. 

   @Geoff – Sounds like a cool solution, just a different approach. I’m trying to keep things on a more dynamic class-only based approach at the moment so I don’t think I could use anything from the JSFL, but I’d love to see your solution none-the-less.

   @nikhil – Glad you like it!

   It’s still in development of course, and I’m planning to make things a little more self-explanatory when I get round to documentation. Give me a shout if you have trouble using the classes – in retrospect I didn’t make this post too easy to follow!

   Comment by James — 12 January 2010 #

6. 

   I James,

   Thanks for your work, which version of B2d do You use ? 2.1?

   Thanks!

   Comment by guillaume — 31 January 2010 #

7. 

   I think this is using version 2.0.1, rather than the recently released version 2.1 – I used the latest version of the Box2DAS3 project (before the transition to 2.1) as the basis for my code.

   Haven’t had a chance to update things to the 2.1 version yet though.

   Comment by James — 31 January 2010 #

8. 

   Any chance we will see an pdatae to 2.1 version?

   Comment by Rami — 31 May 2010 #

9. 

   There’s a chance I’ll be able to update things to Box2D version 2.1 and add some better documentation – but no timescales for that yet.

   Comment by James — 2 June 2010 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: This post is over 7 months old. You may want to check later in this blog to see if there is new information relevant to your comment.

Notify me of followup comments via e-mail.