Today Creative
hello@todaycreative.co.uk
Studio: +44 (0)20 7738 7380

Categories

Posted by admin on 21st November 2008 in Web Development

Sometimes i remember back, how easy it was in AS2 days to cope with visual objects┬┤ depths or z-indexes, looping lists with applying the iterator to the depth of an object during instanciation by just providing a depth argument in attachMovie( “linkageId”, “newName”, depth ) or swapthDepths( depth ) for already existing Objects on the stage. Depth could be arbitrarily chosen. MovieClip.getNextHighestDepth() came in handy to put an object on top of all other object within one parent object. So MovieClips could literally be “parked” anywhere in AS2. It was convenient, nice, but somewhat anarchic. In AS3 we are now faced to much more constraint. The depth of a visual object, an instance of the so called DisplayObject or one of its SubTypes is bound to the term of the “Display List” where no “free” element positions can occur in the list, each new element coming to the list is added on top of the last one , fitting the next free position. ( assuming a incremental addChild(), not addChildAt() ) Once a list branch below a node is populated with display object items, the depths can be swapped or set for the already existent objects and only within a range from 0 ( the first possible depth position, an object occupies when being added to the list ) and the amount of objects underneath that same parent node minus 1. Sometimes that can result in kind of a hazzle when you have to reorganize the depth sorting of your objects when already in the displaylist, especially if you had added them without keeping track of during creation ( use of bare incremental addChild() )

When working with displayobjects consideing depth in AS3 the following methods are useful / neccessary :

[as]
parent.getChildIndex( chlild ) // returns the depth index of child within parent

parent.getChildAt( depth ) // returns the child object on depth position [depth] within parent

parent.addChildAt( child, depth ) // adds a child to the depth position [depth]
[/as]

this is possibly the method with the most confusing results ( runtime errors ) since depth can only be a range between 0 and the amount of existing sibbling object in the list minus 1

[as]
parent.swapChildrenAt( depth1, depth2 ) // swaps the object sitting on depth1 to depth2, the object sitting on depth2 is placed on depth1. For both arguments depth1 and depth2
[/as]

the same constraint as stated for parent.addChildAt( child, depth ) – they have to be in the range from 0 to numChidren – 1

and this property
[as]
parent.numChildren // gives the amount of children currently in the display list of parent
[/as]

So what if we could sort all child objects within a parent to predefined target depths ? It would be useful, when different application parts write or create object in one display list branch and we dont want to care for the addChild() order on that branch. We shoukd keep in mind, that we only can target depths not exceeding the current object amount, so we have at least to know about the resulting object structure beforehand
or we ont care and filter through a try catch block Anyway, we had a way not to care about the order of object creations within a parent node, if we knew the demanded final depths / the object structure, if we could address beforehand that demand before creation to have all objects restructed to that demand.

[as]
package de.fascina.display
{
import flash.geom.Rectangle;
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;

/**
* @author Henry Schmieder
* @version 0.2 20.11.2008
*
*/
public class DisplayUtils
{
public static function sortChildren( d: DisplayObjectContainer, sortPropertyName: String ): void
{
var children:Array = [];
var a: *;
var b: *;
var o: int;
var i: int;
var curChild:*;

for ( i = d.numChildren; i > 0 ; i– )
{
try {
curChild = d.getChildAt( i );
}catch( e:Error )
{
}
if( Object( curChild ).hasOwnProperty( sortPropertyName ) ) {
children.push( new ChildVO( curChild, i ) );
}
}

var max: int = children.length – 1;

for ( i = max; i > 0 ; i–)
{
var bFlipped: Boolean = false;

for ( o = 0; o < i ; o++)
{
a = d.getChildAt( ChildVO( children[ o ] ).index )[ sortPropertyName ];
b = d.getChildAt(ChildVO( children[ o + 1 ] ).index )[ sortPropertyName ];
}

if ( a > b ) {
d.swapChildrenAt( o, o + 1 );
bFlipped = true;
}
}
if ( !bFlipped ) return;

}

}
}

class ChildVO
{
public var index:int;
public var reference:*;

public function ChildVO( reference:*, index:int )
{
this.reference = reference;
this.index = index;
}
}
[/as]

We can introduce a property “depth” for a DisplayObject sub type, a kind of meta property representing the wish to target that depth
That is easy. We just have to write a sub class of a DisplayObject, lets say MovieClip.

[as]
package de.fascina.display
{
import flash.display.MovieClip;

/**
* @author Henry Schmieder
*/
public class PyrMovieClipSortable extends MovieClip
{
public var depth:int;

public function PyrMovieClipSortable( depth:int )
{
this.depth = depth;
}
}
}
[/as]

And to use it this way…
[as]
var mc0: PyrMovieClipSortable = new PyrMovieClipSortable( 0 );
var mc1: PyrMovieClipSortable = new PyrMovieClipSortable( 1 );
var mc2: PyrMovieClipSortable = new PyrMovieClipSortable( 2) ;
var mc3: PyrMovieClipSortable = new PyrMovieClipSortable( 3) ;

var parent:Sprite = new Sprite();

parent.addChild( mc2 );
parent.addChild( mc0 );
parent.addChild( mc3 );
parent.addChild( mc1 );

DisplayUtils.sortChildren( parent, “depth” );
[/as]

The objects are now sorted after their depth property.
we could also use the name-property which every DisplayObject is provided with.

[as]
var s0: Sprite = new Sprite();
var s1: Sprite= new Sprite();
var s2: Sprite = new Sprite();
var s3: Sprite = new Sprite();

s0.name = “s000″;
s1.name = “s001″;
s2.name = “s002″;
s3.name = “s003″;

parent.addChild( s2 );
parent.addChild( s0 );
parent.addChild( s3 );
parent.addChild( s1 );

DisplayUtils.sortChildren( parent, “name” );
[/as]

When it comes to working with structures of Display Objects and depths there is another tool that may come handy.
This class, merely an object parser, but with the feature to also trace a nested structure of objects in the display list and showing their depths. Via a public static member SHOW_SHAPES = false we can exclude Shape Objects from being shown since they mostly habe no relevance to the program logic and therefor dont need to be traced.

4 Comments

4 Responses to ' AS3 depth sorting of display objects '

Subscribe to comments with RSS or TrackBack to ' AS3 depth sorting of display objects '.

  1. MoMo-Studio Development Blog » Blog Archive » Useful tutorials said,

    [...] http://blog.thoughtomatic.co.uk/?p=159 [...]

    on 20th July 2009 at 1:53 am

  2. Enerceive said,

    Amazing, I didn’t know about that till now. Thanks.

    on 2nd January 2010 at 4:16 pm

  3. bertrand said,

    thanks a lot,
    very useful !

    on 29th June 2010 at 3:36 pm

  4. bertrand said,

    hi again,

    I think there’s a mistake in your DisplayUtils class :
    the condition IF(a>b){…} is just in the first loop FOR but it has to be in the 2 loops FOR.

    bye

    on 30th June 2010 at 6:47 pm

Post a Comment


Please fill in Name, Mail and Comment text.