Managing isometric depths in Flash

April 2, 2008 by Emanuele Feronato
Filed Under Flash • 30 Comments 

You'll never believe it.

When I was about to close and delete the blog, I got an anonymous donation from a reader to pay the fee and keep the blog up and running.

So, here I am with a big problem... managing isometric depths in Flash... this is intended to be a stand alone tutorial but it's also the 2nd part of Make a Flash game like BoxHead tutorial.

Let me show you the problem. We have a lot of moving objects in an isometric land. You can think about the zombies in BoxHead. We have to manage depths in order to make the closer zombies hide the ones behind them.

I solved the problem in two ways... one is very very stupid and it works only with AS2... but it works... while the other is a little more complex but can be ported in AS3.

Let me show you this actionscript:

PLAIN TEXT
ACTIONSCRIPT:
  1. var blue_array = new Array();
  2. number_of_blocks = 10;
  3. for (x=1; x<=number_of_blocks; x++) {
  4.     blue_array.push("blue_"+x);
  5.     blue = _root.attachMovie("blue", "blue_"+x, x, {_x:Math.random()*500, _y:Math.random()*350});
  6.     blue.xspeed = 1+Math.random();
  7.     blue.yspeed = 1+Math.random();
  8.     blue.onEnterFrame = function() {
  9.         this._x += this.xspeed;
  10.         this._y -= this.yspeed;
  11.         if (this._x>500) {
  12.             this._x -= 500;
  13.         }
  14.         if (this._y<0) {
  15.             this._y += 350;
  16.         }
  17.         this.idiot_depth = Math.floor(this._y*500+this._x);
  18.         this.swapDepths(this.idiot_depth);
  19.     };
  20. }

Lines 1-16 are the same as the ones I used to populate the screen in Managing multiple collision detection with Flash tutorial, and they just place 10 "zombies" on the stage and make them move at a random direction and speed.

At line 17 I determine the depth in an idiot way, just saying "the closer the zombie to the bottom left of the screen, the highest its depth", then at line 18 I assign this depth to the zombie.

Why am I calling it an idiot way? It works!

Even if it works, and you proudly use it in your games, I'll tell you why you won't use it forever.

The code above leaves a lot of holes between depths... you can have a zombie with a depth of 1345 and the next one with a depth of 54643. In AS3 you cannot have depths, and let me tell you this code sucks!

Let's make things more difficult:

PLAIN TEXT
ACTIONSCRIPT:
  1. var blue_array = new Array();
  2. number_of_blocks = 10;
  3. for (x=1; x<=number_of_blocks; x++) {
  4.     blue_array.push("blue_"+x);
  5.     blue = _root.attachMovie("blue", "blue_"+x, x, {_x:Math.random()*500, _y:Math.random()*350});
  6.     blue.xspeed = 1+Math.random();
  7.     blue.yspeed = 1+Math.random();
  8.     blue.dp = x;
  9.     blue.onEnterFrame = function() {
  10.         this._x += this.xspeed;
  11.         this._y -= this.yspeed;
  12.         if (this._x>500) {
  13.             this._x -= 500;
  14.         }
  15.         if (this._y<0) {
  16.             this._y += 350;
  17.         }
  18.         this.txt.text = this.getDepth();
  19.     };
  20. }
  21. _root.onEnterFrame = function() {
  22.     for (i=1; i<=number_of_blocks; i++) {
  23.         for (x=0; x<number_of_blocks-1; x++) {
  24.             _root[blue_array[x]].idiot_depth = Math.floor(_root[blue_array[x]]._y*500+_root[blue_array[x]]._x);
  25.             _root[blue_array[x+1]].idiot_depth = Math.floor(_root[blue_array[x+1]]._y*500+_root[blue_array[x+1]]._x);
  26.             if ((_root[blue_array[x]].idiot_depth>_root[blue_array[x+1]].idiot_depth) and (_root[blue_array[x]].getDepth()<_root[blue_array[x+1]].getDepth())) {
  27.                 _root[blue_array[x]].swapDepths(_root[blue_array[x+1]]);
  28.                 app = _root[blue_array[x]];
  29.                 _root[blue_array[x]] = _root[blue_array[x+1]];
  30.                 _root[blue_array[x+1]] = app;
  31.             }
  32.             if ((_root[blue_array[x]].idiot_depth<_root[blue_array[x+1]].idiot_depth) and (_root[blue_array[x]].getDepth()>_root[blue_array[x+1]].getDepth())) {
  33.                 _root[blue_array[x]].swapDepths(_root[blue_array[x+1]]);
  34.                 app = _root[blue_array[x]];
  35.                 _root[blue_array[x]] = _root[blue_array[x+1]];
  36.                 _root[blue_array[x+1]] = app;
  37.             }
  38.         }
  39.     }
  40. };

Line 21: Beginning of the function to be executed at every frame

Line 22: Cycle that will be repeated as many times as the number of the zombies on stage

Line 23: Cycle scanning from zero to the number of zombies minus one

Lines 24-25: Calculating the idiot depth of the x-th and the (x+1)-th zombies

Line 26: If the idiot depth of the x-th zombie is higher than the one of the (x+1)-th zombie but the real depth of the x-th zombie is lower than the one of the (x+1)-th zombie...

Line 27: Swapping the x-th and (x+1)-th depths

Lines 28-30: Swapping the x-th and (x+1)-th elements in the array

Lines 32-37: Do the same ff the idiot depth of the x-th zombie is lower than the one of the (x+1)-th zombie but the real depth of the x-th zombie is higher than the one of the (x+1)-th zombie.

Conditions at lines 26 and 32 could be placed in a or but I wrote them this way for a visual purpose.

And that's it... now all zombies have their depth between one and the number of zombies on the stage, without depth holes.

This way to solve the problem is slower, but you can improve it as long as you find a better sorting algorithm

Next time I will focus on collisions in an isometric world, meanwhile download the source codes and give me feedback.

And thank my anonymous reader who saved the blog.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

30 Responses to “Managing isometric depths in Flash”

  1. stephenlee on April 2nd, 2008 9:10 pm

    nice tut
    youll never believe it… right i don’t lol

    first comment

  2. NiallTL on April 2nd, 2008 9:11 pm

    Brilliant, brilliant news!

    I am not done reading your actual tutorial in your post, but I’d like to congratulate you and hope EF keeps on running for a long long time, thank gooodness for that donator!

  3. phore_eyes on April 2nd, 2008 9:17 pm

    wow… i guess it wasn’t an april fools joke, sorry for ever doubting you… ;)

  4. Orion on April 2nd, 2008 9:20 pm

    So you got like million bucks from some random dude, i doubt that o_O???
    well nice tut anyways.

  5. zedia.net on April 2nd, 2008 9:27 pm

    You had me fooled till I got to work, I guess I am happy it’s a joke

  6. RJ on April 2nd, 2008 9:28 pm

    I was the random dude, but it wasn’t a donation, it was a loan… You’d better get 3 billion before 1st April, 2009 or I’ll have to close your blog.

  7. JDog on April 2nd, 2008 9:46 pm

    Lol RJ now that did make me laugh !

    So glad it was a joke though. You had me well and truly fooled ! Lol jk.

    In all seriousness never close the blog and keep gold like this coming !

  8. Suely (Snakesue) on April 2nd, 2008 10:44 pm

    Hi Emanuele,
    The subject of 1st April is still disturbing us.No comments about this tutorial only about that.
    I was awfully frightened.
    KISSES KISSES KISSES!!!

  9. Massimo M. on April 2nd, 2008 11:55 pm

    hi emanuele :)

  10. Graham on April 3rd, 2008 12:09 am

    Hey! You’re right!
    I will never believe it.

  11. Graham on April 3rd, 2008 12:41 am

    Despite, this is a good tut. I forgot to mention. I never thought of doing it the second way.

  12. EagleVision on April 3rd, 2008 1:29 am

    Wow. It was true. Didn’t the guy even ask for credit? Nice guy, thanks! :D

  13. ema on April 3rd, 2008 2:01 am

    fock you stupid joke i was emo!good tut thought

  14. FrozenHaddock on April 3rd, 2008 5:11 am

    Awesome!
    Isometric-ville, here I come!

    Also: Did the generous donator just buy you billions of beers? :D

    If you liked this post buy me a beer (or a billion)

  15. mOOk on April 3rd, 2008 11:45 am

    still confused about whether the closing down thing was a joke or not but anyway I’m a regular follower of your tutes and you’ve helped me learn how to make games for my site, flashbynight.com (no, I didn’t clone tileball!)

  16. EagleVision on April 3rd, 2008 3:44 pm

    HAHA!
    Thats so funny.

    If you liked this post buy me a beer (or a billion)

  17. Gabriel Bianconi on April 3rd, 2008 5:25 pm

    Ok… I’ll say… I did the donation… I love your blog…

    PS: I own Microsoft (I bought it in 1st April)

  18. styxtwo on April 3rd, 2008 6:30 pm

    damn you had me scared there for a while :P,

    but luckily you are still here, now i can start learning some as3 from you :)

  19. johnny on April 3rd, 2008 7:24 pm

    sweet i really love this blog! im glad its staying open… though i havnt totaly mastered that much actionscript ima try to make a game like boxhead just totaly diff storyline and gampley b/c i love the 8-way system and useit alot! alsoim going to try to learn this tri-thingymajiggy stuff cuz it sounds like where flash will be heading in the next year so yay! lol ok im so glad about that donator !!!
    donator u be awsome!

  20. johnny on April 3rd, 2008 7:25 pm

    not tri i meant isometric stuff…sorry
    emanuele es muy awsome

  21. Shaun on April 3rd, 2008 9:03 pm

    YEAH THIS WILL HELP ME FINISH MY GAME. NICE TUTORIAL. IM GOING TO TURN CAPS LOCK OFF NOW.

  22. EagleVision on April 3rd, 2008 9:20 pm

    Emanuele. This might help you on your boxhead tutorial:

    http://eagleproductions.wordpress.com/2008/03/27/how-to-make-a-game-like-boxhead/

    It helps on the 3D movement.

    Cheers!

  23. Jack Hopkins on April 4th, 2008 1:23 am

    I would simply use

    swapDepths(this._y += (this._x/100))

  24. bmanatee on April 4th, 2008 9:15 am

    wow… you had me fooled for a second!
    nice joke!!!
    (at least i hope its a joke!)

  25. Grifo on April 4th, 2008 10:06 pm

    If you liked this post buy me a beer (or a billion)

    Made my day.

  26. gartman222 on April 5th, 2008 1:34 am

    YEAH YEAH YEAH!!!!!!!! GO EMAUNLE (iknowispelleditwrong) hoorah i saw your leaveing and coming back in one sitting!
    yea emaunle!

  27. sam on April 5th, 2008 9:36 am

    Sorry about posting this here, as I don’t have your email address. But I just saw and played the game ‘Ball Breaker’ and thought that the engine behind it (if that’s what you’ll call it) is actually very useful, and could be applied in many ways. My first thought was snooker/pool games but I’m sure it could be applied anywhere really.

    Here’s the link: http://www.triqui.com/play.php?id=244

    So yeah, I wondered what you think and if you could possibly run a tutorial on it sometime soon haha =]

    Cheers for everything so far, been a great help!

  28. Jack Hopkisn on April 7th, 2008 7:09 am

    Sam, I made a game like that called ball escaper.
    Youre engine is probably better though

  29. uly on April 15th, 2008 7:31 pm

    nice tutorial.
    short but it shows more then normal posts now i can actualy finish my game properly

  30. Niccolo' on August 29th, 2008 11:04 am

    You could help the z resolve me-depth in my isometric game? They are years that I am seeking the siluzione and I see that you found it, perhaps I can carry it in my editor.

    Thanks for all of the help that you can give me.

Leave a Reply




Posts