by senocular

So what do you get when you have a space that goes not only side to side but back and forth as well... having depth? What you get is the nuisance of making sure that you have your movieclips overlap properly as to correctly represent their position in that space. With an isometric plane, that issue arises, especially when you are moving things about crazily as in the previous example.

Consider the 3 following characters as movieclips:

As you can see, though each image shows the characters in the exact same locations, the one on the left represents the characters in an arrangement which does not conform to their proper places on the isometric plane, while the rightmost does.

In basic terms, depth sorting is quite easy. All you have to do is realizes that the top most objects in an isometric plane are those which are closer to you, which, visually, translates to those objects which are further down the screen.

This means those movieclips with the highest _y value get the highest depth and are told to be above those with the lower depths. The easiest way to do this is simply using swapDepths on a movieclip with that movieclip's _y as the input value.


The lower the clip is on the screen, the higher its _y value hence the higher its depth therefore making it above all the clips which are technically behind it.

This technique is not without its flaws. There are some things to know about depths in Flash that will help complicate how you handle depth positioning and may make you wish it was always as simple as this.swapDepths(this._y);

  • You can only swapDepths between -16384 and 2130690045
  • swapping outside the range of 0 to 1048575 will make the movieclip unable to be removed (unless swapped back)
  • swapping depths at a currently occupied depth will switch the depths of the two clips - clips cannot share the same depth
  • creating or attaching a new clip within the depth currently occupied by a movieclip will replace that old clip with the newly created or attached clip
  • swapDepths cannot swap between different parent clips. If a clip is within one movieclip, swapDepths can not swap it to be within another

These aren't so bad right? Not really. The worst ones are the 3rd and 4th where you have to worry about clips swapping each other out to the other's last depth and newly placed clips completely killing your existing clips.

When dealing with an isometric plane, you're dealing with many different positions which are set at a rotated and scaled perspective. This rotation is 45 degrees making diagonal spaces lined up with each other horizontally on the screen:

What this means is that the center point of each one of those squares - the point at which a movieclip would be placed if occupying that space, all have the same _y position as the diagonal (seen horizontally) that they're in.

So what happens when you have certain objects within that same horizontal? They are all going to replace each other's depths and only one clip (the last swapped clip) will actually be occupying that arrangement. This is a problem. Why? Well, what if you are attaching 5 clips to be placed on those locations dynamically? Well, first off, you would have to attach them at some errant depth as to prevent attaching them over and therefore replacing any currently existing clips.

Then position them into those grid spaces and then use swapDepths to arrange. However, in swapping depths, after the first is set, the second one replaces it, causing the first one to go into the second one's original attached depth who knows where... then the third does the same to the second, then the 4th comes in followed by the 5th which is the only one which gets swapped properly leaving the other 4 back to the original attaching depths!

What to do? One solution is taking into account the horizontal positioning and figure that into the depth swapping. Here, instead of each depth being swapped through by _y positioning, it would be based on both the _y and _x which, in the aforementioned example, would leave each of those clips with separate depths. So in doing that, you have to take into account the maximum width of your isometric plane and make each _y position contain that many depths between them (for each _x position). Then, assuming the leftmost _x is 0, you get:

this.swapDepths(this._x + this._y*isoPlane_width);

Since at its max, the _x will only reach the isoPlane_width and never interfere with the next step up in the _y positioning.

Now, when it comes to 3D swapping in isometry, you then have to worry about that extra z plane of possible depths - where then, another factor comes into play and your possible depth positions start to sky-rocket.

Stay tuned, some basic 3D movement will be covered next.


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.