Concave Polygon Decomposition in Flash

Discuss issues specific to the Flash/AS3 port of Box2D
mayobutter
Posts: 915
Joined: Fri Dec 14, 2007 8:07 pm
Contact:

Concave Polygon Decomposition in Flash

Postby mayobutter » Sat Feb 23, 2008 12:42 pm

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"
Attachments
Shape For Box2d.jsfl.zip
(3.79 KiB) Downloaded 1507 times

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

Re: Concave Polygon Decomposition in Flash

Postby Gust » Sat Feb 23, 2008 1:23 pm

Nice job.

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

BorisTheBrave
Posts: 1911
Joined: Mon Jan 07, 2008 10:51 am
Contact:

Re: Concave Polygon Decomposition in Flash

Postby BorisTheBrave » Sat Feb 23, 2008 1:54 pm

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: Select all

   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
Posts: 803
Joined: Sun Sep 23, 2007 2:35 pm

Re: Concave Polygon Decomposition in Flash

Postby ewjordan » Sat Feb 23, 2008 8:30 pm

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
Posts: 915
Joined: Fri Dec 14, 2007 8:07 pm
Contact:

Re: Concave Polygon Decomposition in Flash

Postby mayobutter » Sun Feb 24, 2008 12:23 pm

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
Posts: 803
Joined: Sun Sep 23, 2007 2:35 pm

Re: Concave Polygon Decomposition in Flash

Postby ewjordan » Sun Feb 24, 2008 9:38 pm

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
Posts: 5
Joined: Thu May 01, 2008 3:51 am

Re: Concave Polygon Decomposition in Flash

Postby artificialgames » Mon Jun 16, 2008 5:20 am

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":

Image

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

Code: Select all

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
Posts: 39
Joined: Mon Apr 07, 2008 3:58 pm

Re: Concave Polygon Decomposition in Flash

Postby BungaDunga » Mon Jun 16, 2008 11:58 am

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
Posts: 5
Joined: Thu May 01, 2008 3:51 am

Re: Concave Polygon Decomposition in Flash

Postby artificialgames » Tue Jun 17, 2008 1:47 am

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
Posts: 65
Joined: Sat Jun 07, 2008 11:10 am

Re: Concave Polygon Decomposition in Flash

Postby pault107 » Tue Jun 17, 2008 3:14 am

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.


Return to “Flash”



Who is online

Users browsing this forum: No registered users and 1 guest