FP10: ZBuffer Class For Sorting Depths
Flash Player 10 DisplayObjects include some very basic 3D properties, such as 'z' and 'rotationZ'. These properties simply handle basic affine transformations behind the scenes for you; a collection of DisplayObjects aren't actually getting projected into a scene per say. What this means is that a DisplayObject's 'z' property does not affect it's depth inside of a DisplayObjectContainer. Let's say that you have two DisplayObjects, childA and childB respectively, and childA is at depth index 0 and childB is at index 1. Even if childB is further down the Z axis than childA, childA will still be rendered behind it.
Since plenty of developers will likely take advantage of this basic 3D support to create a variety of simple effects (such as carousels), I decided to make a 'ZBuffer' class for conveniently handling the depth issue. My implementation is very straightforward; you have two methods to choose from - 'ZBuffer.sort' and 'ZBuffer.recursiveSort'. The 'sort' method accepts a DisplayObjectContainer and will loop through it's children and sort their depths accordingly based on their locations along the Z axis. The 'recursiveSort' method does the exact same thing, except it will also recursively sort each child's children if the child is a DisplayObjectContainer as well.
Here is a brief example of the 'ZBuffer' class in use:
-
// Create a new 'ZBuffer' instance.
-
-
var zBuffer:ZBuffer = new ZBuffer();
-
-
// Create and draw graphics for a few planes.
-
// Offset their positions so that each one is visible.
-
-
var plane1:Sprite = new Sprite();
-
var plane2:Sprite = new Sprite();
-
var plane3:Sprite = new Sprite();
-
-
plane1.graphics.beginFill(0xFF0000);
-
plane1.graphics.drawRect(0, 0, 200, 200);
-
plane1.graphics.endFill();
-
-
plane2.graphics.beginFill(0x00FF00);
-
plane2.graphics.drawRect(0, 0, 200, 200);
-
plane2.graphics.endFill();
-
-
plane3.graphics.beginFill(0x0000FF);
-
plane3.graphics.drawRect(0, 0, 200, 200);
-
plane3.graphics.endFill();
-
-
plane1.x = 80;
-
plane1.y = 50;
-
plane1.z = 100;
-
-
plane2.x = 150;
-
plane2.y = 100;
-
plane2.z = 200;
-
-
plane3.x = 220;
-
plane3.y = 150;
-
plane3.z = 20;
-
-
// Add the planes to the display container.
-
-
addChild(plane1);
-
addChild(plane2);
-
addChild(plane3);
-
-
// Sort the display container's children (the planes).
-
// The planes will now display at the correct depth
-
// based on their location along the Z axis.
-
-
zBuffer.sort(this);
Included with the source files is an example which is similar to the example above, except the planes are animated to better demonstrate the sorting.
View the 'ZBuffer' example (Flash Player 10 required)
As usual, the class is licensed under the MIT license...so you can use it however you please.
Download 'boostworthy_zbuffer_src.zip'
Enjoy!
1 Comment so far
Leave a reply
Hi there!
I like your Z-ordering technique very much!
Some missing features are in the recursiveSort(): some cases a DisplayObjectContainer contains multiple children which are DisplayObjectContainers.
Your comments
// The container contains two or more children.
// Check each child to see if it is a container
// and, if so, recursively sort it's children,
// then sort the child itself.
are good, but it's not included in the code.
And what about children of a DisplayObjectContainer which change their z-value relatively from it's parent. This requires a complicated solution, but the basics are there.
Does this z-ordering techinque also work with rotated objects?
The name ZBuffer not the right name I think; a ZBuffer will buffer per-pixel the z-value, which also visualizes intersections of planes on a proper way.
Glad you've made this class, the sort-function is very usable!
Greetings, Hans.