Flash Basic Theory Class 15th Chapter 3D Foundation Ⅱ

Back to "flash Basic Theory Class-Catalog"

Z Sort

After adding more than one object, a new problem appears in the code-called Z-ordering. The z sort is like its name: How the object is sorted on the z-axis, or which object is in front. Since objects use solid colors, they do not seem obvious. To make the effect more obvious, change the Ball3d init method to the following code and run the program you just made:

public function init():void {
　graphics.lineStyle(0);
　graphics.beginFill(color);
　graphics.drawCircle(0, 0, radius);
　graphics.endFill();
}

By adding contour lines to the ball, we can see which ball is in front. This almost destroys the entire 3D effect, as smaller objects now appear in front of larger objects. Z sort is used to solve this problem, but not automatically. Flash does not know that we are simulating 3D. It only knows we're moving and scaling the movie. It also does not know whether we use the left hand or the right hand coordinate system. The ball should be placed in the back of the adjacent ball when it is far away. Flash is sorted only based on the relative index in the display list. In as 2, z-sorting only needs to change the depth of the movie clip to complete. Swapdepths (depth). A deeply-advanced movie clip appears in front of a lower-depth movie. However, in as 3, the operation is slightly more complex. There are no depth values for the display list that can be modified arbitrarily. The display list acts more like an array. Each display object in the list has an index. The index starts at 0 until the number of all objects in the list. For example, suppose you add three movies A, B, C in a class. Their index should be 0, 1, 2. You cannot set the index of one of these movies to 100, or-100. If B movies have been deleted, then the index of A and c should be 0 and 1. See, there's never a "space" concept in the display list.

Depending on the depth, index 0 is the lowest, and any display object with a higher depth will appear in front of the lower object. We can change the depth of an object in several different ways:

Setchildindex (Child:displayobject, Index:int) assigns an index value to an object.

Swapchildren (Child1:displayobject, Child2:displayobject) swaps two specified objects.

Swapchildrenat (Index1:int, Index2:int) swaps two specified depths.

Using Setchildindex is the easiest. Because we already have a balls array. The array can be sorted according to the z-axis depth of the ball from high to low, then the index is set for each ball from the balls 0 (farthest) to 49 (nearest). Take a look at the following code:

private function sortZ():void {
　balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
　for (var i:uint = 0; i < numBalls; i++) {
　 var ball:Ball3D = balls[i];
　 setChildIndex(ball, i);
　}
}

Sorts the array according to the Zpos property of each object in the array. Because the descending and array.numeric of the array are specified, they are sorted in reverse order--in other words, from high to low. The result would be that the farthest ball (the Zpos) would be the first in the array, and the nearest one would be the last.

Then loop the array and set the index value of each ball in the display list to be the same as the index value currently in the array.

Put this method into a class, just call it after the ball is moved, and place the function call at the end of the Onenterframe method:

private function onEnterFrame(event:Event):void {
　for (var i:uint = 0; i < numBalls; i++) {
　 var ball:Ball3D = balls[i];
　 move(ball);
　}
　sortZ();
}

The rest of the code is the same as in the previous example. All the code can be found in zsort.as.