Tutorial: Box2D Level Creation with Curves

Discuss issues specific to the Flash/AS3 port of Box2D
Ezion
Posts: 19
Joined: Thu Apr 09, 2009 8:32 am
Contact:

Tutorial: Box2D Level Creation with Curves

Postby Ezion » Mon Apr 27, 2009 5:29 pm

Hey all,

Thanks to Shaktool here at the forums, I've written up a couple tutorials on making levels in Box2D using InkScape and updated the parser to support Bezier curves. You can now import curves directly into the Box2D engine for your levels and even specify the # of segments for all curves either through a default value or through line-width.

The first tutorial uses the outdated parser, but explains level creation and floors/ceilings in InkScape.
http://www.ezqueststudios.com/blog/creating-levels-box2d/

The second tutorial uses the new parser and explains the values you pass to the parsing function.
http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/

Both of these tutorials have copy-paste code, examples, pictures, and source files.


Shaktool also said he's also cleaning up the code and (is uploading it to the Box2DFlash SVN) *has agreed to upload it to the Box2DFlash SVN. Many kudos to him for his help.
Last edited by Ezion on Mon Apr 27, 2009 9:26 pm, edited 2 times in total.

shaktool
Posts: 434
Joined: Sun Jan 20, 2008 7:52 pm
Contact:

Re: Tutorial: Box2D SVG Parser with Curve Support

Postby shaktool » Mon Apr 27, 2009 5:38 pm

Ezion wrote:Shaktool also said he's also cleaning up the code and uploading it to the Box2DFlash SVN.

I said I'm cleaning up the SVG parser. And I will certainly release it somewhere, probably here in this thread, maybe tonight. I suppose it would make sense to update the EdgeChain testbed example, though, so yeah, I'll probably do that.

Thanks for tutorials and the bezier port!

shaktool
Posts: 434
Joined: Sun Jan 20, 2008 7:52 pm
Contact:

Re: Tutorial: Box2D Level Creation with Curves

Postby shaktool » Tue Apr 28, 2009 1:46 am

Here is a better SVG parser. (I didn't change the Bezier Curve generator.)

It now supports "relative" commands, and paths with multiple sub-paths. I'd say that the parser is now around 35% of the way towards being a good, general SVG parser. Some desirable features that it is still missing include:
-quadratic bezier curves (as opposed to the more common cubic bezier curves)
-elliptical arcs
-transformation matrices
-non-path primitives, like circles and rectangles
-the ability to use filled regions to determine which side of the edges should be solid, rather than relying on the more finicky winding direction.
Attachments
b2SVG.as.txt
(11.23 KiB) Downloaded 883 times

Ezion
Posts: 19
Joined: Thu Apr 09, 2009 8:32 am
Contact:

Re: Tutorial: Box2D Level Creation with Curves

Postby Ezion » Tue Apr 28, 2009 8:45 am

After seeing how much you've updated the parser, I'm don't think I can take much credit for its improvement. :shock:

Do you want me to update the tutorial and source code on my site with the latest version or link back to here?

shaktool
Posts: 434
Joined: Sun Jan 20, 2008 7:52 pm
Contact:

Re: Tutorial: Box2D Level Creation with Curves

Postby shaktool » Tue Apr 28, 2009 11:14 am

*shrug* It's up to you.

I just felt that the old parser was inappropriate for more complex shapes, but it looks like it's catching on so I had better refactor it before it becomes a bloated mess of spaghetti patches. ;)

Ezion
Posts: 19
Joined: Thu Apr 09, 2009 8:32 am
Contact:

Re: Tutorial: Box2D Level Creation with Curves

Postby Ezion » Tue Apr 28, 2009 5:57 pm

Alright, I linked back to this thread in case I ever start updating it and updated the post/source. I modified 5 lines of code so that parseSVG would return a reference array of all of the shapes created in the Box2D world in case anyone wants to delete the parsed shapes.

clark
Posts: 127
Joined: Mon Mar 03, 2008 4:38 pm
Location: Scotland

Re: Tutorial: Box2D Level Creation with Curves

Postby clark » Thu May 07, 2009 1:45 am

So sorry to be out of the loop :P

Although the SVG parser now may support curves? I thought that box2d didnt have a curved surface (i thought boris's old class was the best shot at this)?

Do you mean simulating a curve by using lines?

shaktool
Posts: 434
Joined: Sun Jan 20, 2008 7:52 pm
Contact:

Re: Tutorial: Box2D Level Creation with Curves

Postby shaktool » Thu May 07, 2009 10:56 am

clark wrote:Do you mean simulating a curve by using lines?

Yes.

kakku
Posts: 9
Joined: Fri Jun 05, 2009 5:56 am

Re: Tutorial: Box2D Level Creation with Curves

Postby kakku » Fri Jul 03, 2009 4:27 am

I really like the SVG-parser. It makes things real easy :)

After i got it working i wanted to make sensors with it.
So i changed the following in the b2SVG.as :

Code: Select all

    public static function parseSVG(svg: XML, world: b2World, RATIO:Number, useDefaultCurveResolution:Number): Array {

      var chainDef: b2EdgeChainDef = new b2EdgeChainDef();

              shapes.push(world.GetGroundBody().CreateShape(chainDef));

into:

Code: Select all

public static function parseSVG(svg: XML, Body: b2Body, RATIO:Number, useDefaultCurveResolution:Number, bouncyness:Number, sensorFlag:Boolean): Array {

      var polyDef: b2PolygonDef = new b2PolygonDef();
      polyDef.isSensor = sensorFlag;

              shapes.push(Body.CreateShape(polyDef));


It's working like a charm and it's funny to see that concave shapes are only partly sensor.

I hope i don't look like a complete newbie for sharing this with you, but i was real happy with it to have it figured out.

Now i want to ask: Why did you use the b2EdgeChain to begin with?

jorrit5477
Posts: 1
Joined: Tue Jul 07, 2009 8:56 am

Re: Tutorial: Box2D Level Creation with Curves

Postby jorrit5477 » Wed Jul 08, 2009 12:58 am

I have added a bit of code for reading files from Illustrator (CS2 is what I've got here). Since - at least my version - exports the style a little different. This patch allows to read the stroke-width attribute instead of the style attribute (and I have added a bit of code to parse circle definitions, though I am not sure it is the right way to do so).

Cheers for the parser!
Attachments
illustrator-stroke-width.patch
Patch for curve width using Illustrator
(2.4 KiB) Downloaded 275 times


Return to “Flash”



Who is online

Users browsing this forum: Yahoo [Bot] and 4 guests