|
Depth
Sorting
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.
this.swapDepths(this._y);
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.
|
