Concave Polygon Decomposition in Flash

mayobutter · **Joined:** Fri Dec 14, 2007 8:07 pm **Posts:** 493

Attached is a .fljs (Flash Javascript) file that can trace your shapes drawn in the Flash IDE and spit out polygon / vertex information into the output panel. The best part - it'll decompose your concave shapes!

Here's how it's used:

1. Drop the attached file, "Shape For Box2d.jsfl", into one of the following folders:

Windows Vista - boot drive\Users\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\
Windows XP - boot drive\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\
Mac OS X - Macintosh HD/Users/username/Library/Application Support/Adobe/Flash CS3/language/Configuration/

2. Draw a shape in Flash, preferably with a tool that creates straight lines, like the Pen Tool.
4. Select the whole shape (triple click it).
5. Go to the "Commands" menu. You should see the new option "Shape For Box 2d". Click it!

The computed polygons will appear as red lines over your original image. Additionally, a structured array will be spit out into the output panel. The array is structured like so:

Array of polygons > Array of vertices > x, y

You should be able to parse this pretty easily within your own code to create the Box2D shapes.

I apologize for the code in the .jsfl file being messy as hell. I just wanted to get something that works. I basically just ported the code from these two resources (comments and all):

http://www.ewjordan.com/earClip/
http://livedocs.adobe.com/flash/9.0/mai ... l#wp461362

Problems:

The red outlines don't go away until you run the command again.
Haven't tested on a PC
Doesn't process "holes"

Gust · **Joined:** Sun Feb 03, 2008 6:38 am **Posts:** 33

Nice job.

You should change the lines 325/6 to just Array () to make it work with Flash 8.

BorisTheBrave · **Joined:** Mon Jan 07, 2008 10:51 am **Posts:** 1908

That's pretty dang useful actually. Good work mayo and ewjordan.

I found I had to place the files slightly differently for Vista:
\Users\username\AppData\Local\Adobe\Flash CS3\en\Configuration\Commands

Also, I cannot get rid of the red lines even if i run the code again. I had to change the top bit of the code:

Code:

   var selArray = fl.getDocumentDOM().selection;
   
   if(selArray.length == 0){
      fl.drawingLayer.beginDraw(false);
      fl.drawingLayer.endDraw();
      contourArray=[];
   }else{
   
      fl.trace( "selection length: " + selArray.length );

      var elt = selArray[0];
      fl.trace( "selected element" + elt );
      fl.trace( "element type: " + elt.elementType );
      
      var contourArray = elt.contours;
      //fl.trace("contour array length: " + contourArray.length);
   }

Other than that, it works fine on Vista.

What I particularly like is it's so easy to draw inner edges to give the decomposition hints.

ewjordan · **Joined:** Sun Sep 23, 2007 2:35 pm **Posts:** 786

Watch out, though - the decomposition code I put up is a little old and buggy (it has CW/CCW issues, for one, plus I think it fails for some weird cases). The newest version is in the Bugs->Convex Decomposition thread, though sadly for Java/Flash folks it's only available in C++ for now.

I wouldn't worry if you're just using it yourselves, but I don't think the EarClip code is solid enough to let end users rely on!

It's on my todo list to get the newer code into Java and then possibly AS3, so I'll let you know when I get it done (a lot of stuff on my todo list lately, though, so it might be a little while).

mayobutter · **Joined:** Fri Dec 14, 2007 8:07 pm **Posts:** 493

ewjordan: Didn't realize you were a Box2D user (found your example via Google). Thanks for the original code - it works surprisingly well despite your warnings.

The decomposition is done as a preprocessing step, so even if it blows up, the worse that could happen is Flash will display an error in the output panel and you'll have to tweak and try again.

ewjordan · **Joined:** Sun Sep 23, 2007 2:35 pm **Posts:** 786

Yup, the original code is not terrible, the main problem is that it was not tweaked to produce shapes valid for Box2d yet. That code was actually a prototype for the Box2d-specific utility that I was putting together. The biggest problem with it is that it sometimes outputs shapes that will make Box2d assert. The full recent version should fix that type of stuff, though it's a lot more complex. It's also going to be a bit trickier to port since it uses more pointers and stuff, but I'll definitely get to it eventually.

In any case, glad it's useful to somebody!

artificialgames · **Joined:** Thu May 01, 2008 3:51 am **Posts:** 5

Hey guys sorry to post resurrect but i have converted b2Polygon and b2Triangle from the C++ code supplied by ewjordan (http://www.box2d.org/forum/viewtopic.php?f=4&t=83&st=0&sk=t&sd=a&start=40) for AS3 (Box2D 1.4) and to my knowledge it works fine.

http://www.artificial-studios.co.uk/Files/b2Triangle.as
http://www.artificial-studios.co.uk/Files/b2Polygon.as

Screenshot from my up and coming game "Cheese Slice":

Use is pretty much the same as the C++ version except you dont have to delete the return poly list:

Code:

var bodyDef:b2BodyDef = new b2BodyDef();

// Define the shape
var shape : b2PolyDef = new b2PolyDef();
shape.density = 1.0;
shape.friction = 0.2;
shape.restitution = 0.5;   
         
// Copy the list of verticies into two sepparate arrays
var xPositions : Array = [];
var yPositions : Array = [];
for (i = 0; i < points.length; i++) { xPositions[i] = points[i].x; yPositions[i] = points[i].y;  }
      
// Create the initial poly
var pgon : b2Polygon = new b2Polygon(xPositions, yPositions, yPositions.length);
         
// Decompose and add to our body def
b2Polygon.DecomposeConvexAndAddTo(pgon, body, shape);

// Add def to world
_world.CreateBody(bodyDef);

Enjoy

BungaDunga · **Joined:** Mon Apr 07, 2008 3:58 pm **Posts:** 39

artificialgames wrote:

Hey guys sorry to post resurrect but i have converted b2Polygon and b2Triangle from the C++ code supplied by ewjordan (http://www.box2d.org/forum/viewtopic.php?f=4&t=83&st=0&sk=t&sd=a&start=40) for AS3 (Box2D 1.4) and to my knowledge it works fine.

Sweet, I'll totally use that. I'll see if I can make the jsfl script mayobutter posted use it. Or possibly just redo it so it outputs the vertices and then they can be dropped into your b2Polygon class. It decomposes into triangles (not convex polys) right? In that case it'll be doubly useful, I can use it to build a flat 3D mesh.

artificialgames · **Joined:** Thu May 01, 2008 3:51 am **Posts:** 5

BungaDunga wrote:

artificialgames wrote:

Hey guys sorry to post resurrect but i have converted b2Polygon and b2Triangle from the C++ code supplied by ewjordan (http://www.box2d.org/forum/viewtopic.php?f=4&t=83&st=0&sk=t&sd=a&start=40) for AS3 (Box2D 1.4) and to my knowledge it works fine.

Sweet, I'll totally use that. I'll see if I can make the jsfl script mayobutter posted use it. Or possibly just redo it so it outputs the vertices and then they can be dropped into your b2Polygon class. It decomposes into triangles (not convex polys) right? In that case it'll be doubly useful, I can use it to build a flat 3D mesh.

No i believe it decomposes into polys not just triangles, as you can tell from my above SS.

pault107 · **Joined:** Sat Jun 07, 2008 11:10 am **Posts:** 66

Wow, that's a great tool Mayo/ewjordan - thanks for putting in the effort. It's tools like these that can really speed up development. Good stuff.

Box2D Forums

Concave Polygon Decomposition in Flash

Who is online