Flash CS4 3D – Depth Management

i’ve been playing around with the 3D tools in Flash 10/CS4, with half a mind to completely redo our cube-mapped memory game Two By Two with an actual 3D cube. (Currently, the game uses a series of skewed planes to fake the 3D effect.)

The good news is that CS4 does support 3D, although some people on the web are calling it 2.5D for one particular reason: the DisplayObjects that you transform and translate are unaware of each other, and do not exist in the same 3D space.

Here’s what that means: you can have two planes sitting next to each other. Depth-wise, PlaneA is in front of PlaneB. You move PlaneA backwards along the z axis, and it never swaps depths behind PlaneB. It’s as if the two clips are entirely autonomous and exist in their own little 3D worlds. Which they do.

note: you’ll need to be running the Flash Player 10 plugin to view these examples. Get it HERE.

[SWF]http://www.untoldentertainment.com/blog/labs/3d/depthProblem/depthProblem.swf, 550, 400[/SWF]

This becomes a big problem when you need things to look natural. Check out this Flash coder’s experiment with a 3D world and a camera:

Flash 3D World with Messed Up Depth

This is fine if all of your game characters have X-Ray vision, i suppose.

The floors and the walls are placed correctly, but they all show through each other. i had the exact same problem when i tried building a cube from MovieClips. Placing the clips was very easy, but the depth problem baffled me. i knew that i had to loop through all the cube faces and re-order them based on their z properties, but i didn’t know how to do that, since localToGlobal only supports x/y coordinates.

It turns out you have to actually write your own depth manager if you want to build any kind of 3D object and have it display correctly. i found just the code i needed here on Drew Cummins’s blog:


i’m a big enough man to admit that at one o’clock in the morning last night, i didn’t fully grasp how this code did what it did. Happily, it worked. You can see the difference in cube rendering below. The cube on the left applies Drew’s depth management routine.

Thanks, Drew!

[SWF]http://www.untoldentertainment.com/blog/labs/3d/cube_depthManagement/cube_comparison.swf, 550, 400[/SWF]

Additional notes: there is a (possibly deliberate?) type-o in Drew’s code. One of the loops is missing a minus operator on its iteration decrementor (i-), so watch out for that.

You may also have to rely on the ADDED_TO_STAGE event, as Drew’s code threw me an error when doc.stage was null. This can happen when you try to fire code before an object actually exists on the stage.

6 thoughts on “Flash CS4 3D – Depth Management

  1. Pingback: untoldentertainment.com » Unity 3D, iPhone, and a Small Favour

  2. Dan

    I checked out Drew’s code, but couldn’t find a spot where he may have missed the decrementor like you mention in the additional notes. When I implement it, my cube has a lot of ‘pop’ and some sides don’t seem to be working at all. Your cubes are fantastically smooth. Could you post your fla or source code? I’d really appreciate.

    1. Ryan

      Dan – it may no longer be there. Do a search for “i-” … it should be “i–“.

      i’ll see if i can dig up the source for you some time next week.

      – Ryan

  3. James

    Hello there! First off, thanks for this! I’ve been grappling with 3d in flash for all of 2 ENTIRE earth hours. (Yes, I’m pretty new to actionscript 3 too!)

    I’ve made a cube out of 6 seperate panels on different layers. When I rotate it with the 3d rotate tool it looks fine, except for this z-sorting problem. The same is true if I combine all layers into a movieclip.
    Now, I’ve tried implementing this code, but wasn’t sure where to put it exactly. Does it go in Frame 1 on a new layer? Inside a new frame within a movieclip containing the cube element?
    If you can offer any advice, or even a FLA file I could dissect, I’d really appreciate it. Thanks so much!



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.