Away3D + QuickBox2D (Finally)

I’ll be the first to admit, I’m no 3D programmer – but whenever I needed it in Flash, I just used Papervision3D. It seems the default standard these days and the amount of available information, documentation, and tutorials seems endless. For quite some time though, I’ve been wanting to try out Away3D. The folks who use it, swear by it and I’ve seen some really great stuff done using it. Likewise, I’ve also really been wanting to try out Box2DFlash for some 2d physics simulations. The Box2DFlash api, based on its C++ counterpart, always intimidated the hell out of me though, with its crazy use of capitalization and arbitrary class names. But when Tomek Augustyn/Og2t sent me a message on Twitter suggesting I give QuickBox2D a try, that seemed a good sign that the time was ripe to try out these two new (to me) technologies.

And so, inspired by games like the old classic LineRider and the new Red Bull Soapbox Racer, I came up with this pale comparison. To play, use your mouse to draw line segments (left to right) that will become the track. When done, click “begin” and down you go. Okay, so it’s no award winner, but given the fact I’ve never used Away3D or QuickBox2D before and got that put together over the course of a Saturday, it’s not too shabby and speaks volumes about how easy the two libraries are to pick up.

Some good and bad points of each that learned along the way -

Away3D Drawbacks:

  • I hate hate hate api’s that rely on “initObjects” in class constructors. It always seems like a good idea and makes for a nice clean interface, but I find myself crippled when deprived of code hints. I would much rather enter  default values or nulls into a constructor than selectively decide what properties to instantiate and run the risk of misspelling them or worse yet, not even know what’s available.
  • Probably my own stupid fault, but I couldn’t get the SpringCam working at all. I had to devise my own with a TargetCamera3D instance and a bit of simple easing. I’ll look into that further when I have the time.

Away3D Pluses:

  • Performance seems fantastic for this initial trial.
  • The learning curve (at least coming from PV3D) is pretty freaking low.
  • I love the Skybox6 class. So much easier than creating your own cube and trying to size it nicely as is required in PV3D (though making your background image seems a bit tricky and I just used one that comes with the Away3D demos download.
  • While I haven’t tried them yet, the Pixel Bender filters that come with the Flash 10 release look freakin’ awesome. I’m sure PV3D X will do something similar, but I can’t wait to have the time to dig into these and see what can be accomplished.
  • The materials available are terrific and slightly easier than their PV3D counterparts.

QuickBox2D Points:

Having never used a 2D physics engine before, I can’t make any real comparisons. One thing I loved was how simple it was to pick up. Much easier than diving straight into Box2DFlash. I highly recommend it to anyone getting into 2D physics. One thing that reallyvirked me was when creating a GroupObject containing two CircleObjects (a simple car, e.g.), the CircleObjects won’t rotate – they’ll just slide. I’m sure if I dig further into the Box2D mechanism behind it all, I can figure out a way around that, though.

In any case, both libraries are loads of fun and it was a Saturday well spent…

13 Comments »

  1. Your expiriment looks pretty great for a firt try. I was blown away when I clicked ‘begin’.

    How does this work? The 2d physics are calculated while away3D makes a 3d representation of this? Or does this box2d thing actually work in 3d?

  2. Devon O. says:

    Hey Niels. thanks for the comments. Seeing as this was my first attempt, I probably did it the hard way, basically what’s happening is, during an enterframe event it’s setting the 3d car’s x, y, and rotationZ properties equal to the x, y, and angle properties of a 2d box (that you can’t see) sliding down some ramps (equal to what you’ve drawn). So, I’ve got a method saying this:

    _world3.getCar().x = (_world2.getCar().x * WORLD_SCALE – WIDTH * .5) * SCALE3D;
    _world3.getCar().y = ((-_world2.getCar().y * WORLD_SCALE + HEIGHT * .5) * SCALE3D);
    _world3.getCar().rotationZ = -_world2.getCar().angle * (180 / Math.PI);

    Gotta be a better way, but it works. I’d post the whole script, but it’s a real mess – stuff just thrown in as I thought of/learned it.

  3. Pradeek says:

    Hmmm. Getting
    Error: isNaN(sz)
    at away3d.cameras.lenses::ZoomFocusLens/project()
    at away3d.core.project::MeshProjector/primitives()
    at away3d.core.traverse::PrimitiveTraverser/apply()
    at away3d.core.base::Object3D/traverse()
    at away3d.containers::ObjectContainer3D/traverse()
    at away3d.containers::ObjectContainer3D/traverse()
    at away3d.containers::View3D/render()
    at World3d/render()
    when I click on Begin after drawing. I’m on Vista/Firefox 3.5

  4. Pradeek says:

    Ok. Looks like I’m getting this only after drawing a lot of inclined lines.

  5. So it ‘ looks ‘ 3d, but you could not use this method to move into the z-depth? (like make left turn), or is box2d capable of doing this?

    I really think these 3d experiments in flash are awsome. You should check out this dude’s blog, he does some amazing stuff too
    http://www.neuroproductions.be/

  6. Great first try (although it shows a lot of errors in the debug player). You should use actors to bind your physics world to the graphical output. More info is on the Box2D website.

  7. Zevan says:

    Hey Devon,

    Cool demo… In order to create cars etc… you should look into using joints instead of group objects – group objects will always act like one rigid body, if you want to create a car, you can do so with the use of “revolute joints”…

  8. Jensa says:

    Hi Devon,
    The ‘initObjects’ are entirely optional. You can also set anything using properties :)

    J

  9. Devon O. says:

    Thanks for the comments..
    @Pradeek & Patrick – I got those errors from time to time testing, but being just a personal project, it didn’t bother me much. Obviously, Away3D is getting some bad info somewhere though and I gotta sit down some time and figure out where exactly. And thanks for the heads up on the actors/graphical binding info.

    @Zevan – Thanks for the joint information. I was actually going to come ask that on the actionsnippet site and now I don’t have to!

    @Niels – no you can’t do real z depth, but you can fake it very nicely. Check out the Red Bull site I linked to for a prime example.

    @Jensa – great news about the initObjects! Did I mention I hate them?

  10. Og2t says:

    Haha nice one, I am happy to be the messenger and inspire people with another people’s experiments :) btw. Devon, would you shade the rubber cube twist demo code? I am really interested what functions you’ve used to achieve that smooth rubber feel. Tweaked Penner’s equations?

  11. Devon O. says:

    Hey Og2t, Thanks again for the tip..
    That cube code was actually posted a couple posts later, here: http://blog.onebyonedesign.com/?p=292 Maybe I should stop being lazy and put the code in the same post…

  12. [...] Away3D + QuickBox2D (Finally) by onebyoneblog [...]

  13. Matt says:

    I’ve used both PV3D and Away3D, and while example code for Away3D is a little harder to find (the web site is not very useful) I’d have to say that Away3D is the better of the two. Still, Papervision just incorporates the coolest Away3D features (like the QuadTreeRenderer) into their own code anyway…

    http://bit.ly/1no4G1

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

Devon O. Wolfgang

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development”

Contributing Author of “Flash AS3 for Interactive Agencies”

Senior Software Developer in Dublin, Ireland

Portfolio

Bayer Pixel Bender Filter

Bayer Mosaic Filter in Pixel Bender


Now, seeing as how I’ve been trying to learn some Pixel Bender coding lately[...]

Liquitext

Liquid Text Effect


Haven’t been too active around here lately due to a major on going project at work lately as well as the fact that my wife and I are in the slow process of moving homes. Really, the only free time it seems I have these days is during the lunch hour. So, over the past two days, I came up with this fun little toy during lunches[...]

Google’s Text To Speech Engine in Flash

I’m not sure how I managed to miss this, but I just happened to run across a ‘new’ (well, newish), albeit still unofficial, offering of Google today: text-to-speech. You can see what few details there are on this Techcrunch post. Basically, it just boils down to this though – you send your phrase to be [...]

Quick Sound Effects Generator


Need some beeps, boops, or bops, to go with your UI or games [...]

Quick QuickBox2D Tip II – Collision Detection

Custom collision detection/handling in QuickBox2D [...]

None of This Runs Eternal


No Flash/Actionscript stuff here. Just me rambling about the upcoming Current 93 concert [...]

Playing Around with the New UndoManager

Included in the Flex 4.0 SDK and the, just released, Flash Professional CS5 lies a new hidden little gem of a class: flashx.undo.UndoManager (although the Flex 4.0 SDK’s been out for awhile, I have to admit I didn’t even notice this until I installed Flash CS5 and started poking around the documentation looking for new [...]

Making Waves

In a previous post, “Digging into the Microphone in Flash Player 10.1″, reader David Law asked in the comments how it would be possible to save .wav files to the server. I wasn’t sure right offhand, but thought I’d spend my lunch hour yesterday looking into it. Well, after reading this quick tutorial on Adobe [...]

Some Drawing Fun and a Bad Movie You’ll Never See

Earlier today, Dave Gillem posted a link on Facebook to an incredible Processing based drawing application. Thought I’d have a go at reproducing something similar in Flash. Well, I failed miserably, but the results were still interesting enough to check out. You can play around with it below. Just mouse down to draw in the [...]

Animating Bezier Curves


The other day I got the notion in my head that I wanted to draw some bezier curves in an animated fashion. I’m sure this has been done a million times before, but sometimes reinventing the wheel can be a good learning experience [...]

My God, It’s Full of Stars…


Just a quick little thing I got an idea for (i.e. pretty much ripped off) while browsing Processing examples.

Another Year, Another Look

As a few folks may have noticed, the blog is looking a little bit different as of today [...]

The Webcam Warholizer


Just a little bit of quick Friday fun with webcam and bitmapata…

More With the JiglibFlash Terrain

Playing around a bit more with the animated JiglibFlash terrain idea from my last post, I wanted to see how it would work in conjunction with a webcam. So, needless to say, you’ll need a webcam to check out the results below.

Rockin and Rollin with the JiglibFlash Terrain


Finally got the chance to play around with the new JiglibFlash height map terrain, today, and have to say I am very impressed [...]