Make a Flash game like BoxHead - part 1

March 15, 2008 by Emanuele Feronato
Filed Under Flash, Game design •  

One of the most popular Flash games is BoxHead by Sean Cooper, that released the 5th game of the series called The Zombie Wars.

BoxHead

At the moment I am just giving a small prototype of the "hero" controlled with arrow keys and the "zombie" chasing the hero.

One of the interesting things about BoxHead is that all movements are based upon old 8-ways system... this means hero and zombies can walk only on 0, 45, 90, 135, 180, 225, 270 and 315 degrees.

So there is not so much trigonometry involved in it.

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("hero","hero",_root.getNextHighestDepth(),{_x:250, _y:200});
  2. _root.attachMovie("zombie","zombie",_root.getNextHighestDepth(),{_x:25, _y:20});
  3. hero_speed = 1.5;
  4. zombie_speed = 1;
  5. zombie.same_rotation = 0;
  6. hero.onEnterFrame = function() {
  7.     xspeed = 0;
  8.     yspeed = 0;
  9.     if (Key.isDown(Key.LEFT)) {
  10.         xspeed -= hero_speed;
  11.     }
  12.     if (Key.isDown(Key.RIGHT)) {
  13.         xspeed += hero_speed;
  14.     }
  15.     if (Key.isDown(Key.UP)) {
  16.         yspeed -= hero_speed;
  17.     }
  18.     if (Key.isDown(Key.DOWN)) {
  19.         yspeed += hero_speed;
  20.     }
  21.     if ((xspeed != 0) and (yspeed != 0)) {
  22.         xspeed *= 0.707;
  23.         yspeed *= 0.707;
  24.     }
  25.     this._x += xspeed;
  26.     this._y += yspeed;
  27.     switch (xspeed) {
  28.         case hero_speed :
  29.             this._rotation = 90;
  30.             break;
  31.         case -hero_speed :
  32.             this._rotation = -90;
  33.             break;
  34.         default :
  35.             switch (yspeed) {
  36.                 case hero_speed :
  37.                     this._rotation = 180;
  38.                     break;
  39.                 case -hero_speed :
  40.                     this._rotation = 0;
  41.                     break;
  42.                 case hero_speed*0.707 :
  43.                     if (xspeed == hero_speed*0.707) {
  44.                         this._rotation = 135;
  45.                     }
  46.                     if (xspeed -= hero_speed*0.707) {
  47.                         this._rotation = -135;
  48.                     }
  49.                     break;
  50.                 case -hero_speed*0.707 :
  51.                     if (xspeed == hero_speed*0.707) {
  52.                         this._rotation = 45;
  53.                     }
  54.                     if (xspeed -= hero_speed*0.707) {
  55.                         this._rotation = -45;
  56.                     }
  57.                     break;
  58.             }
  59.     }
  60. };
  61. zombie.onEnterFrame = function() {
  62.     this.same_rotation++;
  63.     dist_x = this._x-hero._x;
  64.     dist_y = this._y-hero._y;
  65.     angle = Math.atan2(dist_y, dist_x);
  66.     real_rotation = angle*57.2957795-90;
  67.     this._save_rotation = this._rotation;
  68.     if (this.same_rotation>15) {
  69.         this._rotation = Math.round(real_rotation/45)*45;
  70.     }
  71.     if (this._rotation != this._save_rotation) {
  72.         this.same_rotation = 0;
  73.     }
  74.     switch (this._rotation) {
  75.         case 0 :
  76.             this._y -= zombie_speed;
  77.             break;
  78.         case 45 :
  79.             this._y -= zombie_speed*0.707;
  80.             this._x += zombie_speed*0.707;
  81.             break;
  82.         case 90 :
  83.             this._x += zombie_speed;
  84.             break;
  85.         case 135 :
  86.             this._y += zombie_speed*0.707;
  87.             this._x += zombie_speed*0.707;
  88.             break;
  89.         case -180 :
  90.             this._y += zombie_speed;
  91.             break;
  92.         case -135 :
  93.             this._y += zombie_speed*0.707;
  94.             this._x -= zombie_speed*0.707;
  95.             break;
  96.         case -90 :
  97.             this._x -= zombie_speed;
  98.             break;
  99.         case -45 :
  100.             this._y -= zombie_speed*0.707;
  101.             this._x -= zombie_speed*0.707;
  102.             break;
  103.     }
  104. };

I will comment the code later, meanwhile if you have questions post them in the comments.

Download the source code and give me feedback

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

» 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.

38 Responses to “Make a Flash game like BoxHead - part 1”

  1. Sunil Patel on March 15th, 2008 1:01 pm

    Wow! This is great, Ive always secretly wanted to make a game such as this.

  2. David on March 15th, 2008 2:05 pm

    very useful, as always
    why didn’t you use the Math.sin(45) method instead of using 0.707? are there any advantages to using a decimal?

    Also, can you show us how to create and control multiple enemies? i.e. would we attach loads of zombie movies using the for() and then have each of them its own onEnterFrame = function(){} or is there another method?

  3. styxtwo on March 15th, 2008 2:41 pm

    the problem with these kinds of games is not making it, it is the huge amount of enemies.

  4. Jack Hopkisn on March 15th, 2008 2:56 pm

    Dude. This is amazing!!!

  5. Gabriel Bianconi on March 15th, 2008 3:37 pm

    I LOVE BoxHead… This is going to be the best tutorial series ever…

  6. Flasher on March 15th, 2008 3:48 pm

    Bring on the Boxhead clones! Nice one.

  7. Fairlyn on March 15th, 2008 5:31 pm

    the thing i’m really interested in is how you’re going to get enemies to go around obstacles.

    as for the original game; i played the the other ones way too much, this does not bode well for my productivity.

  8. EagleVision on March 15th, 2008 6:44 pm

    Me too. I need an IA…Thanks Emanuele.

  9. And Mar on March 15th, 2008 8:56 pm

    @David

    Using .707 is faster than Math.sin(45) so it is better when you might be using it many times (e.g. many enemies?)

    @styxtwo

    I’m guessing that bitmap would be best for many enemies because its faster and you could manage them in a loop. cacheAsBitmap?

  10. i need help!! on March 16th, 2008 9:34 am

    Hey emanuele(or someone else who can help me)
    ive got a question can i make a hittest with two objects and then flash shows me cordinats where the two are hittesting?(i need this for a kind of gravity)

  11. T-Enterprise on March 16th, 2008 3:45 pm

    Excellent article - thanks.

  12. Xodus on March 16th, 2008 6:05 pm

    I used 2 play this game all the time, the thing i really want to learn is how to create a certain number of zombies per lvl, like david said, maybe using a for() command with an attachmovieclip function?

  13. EagleVision on March 16th, 2008 11:46 pm

    @I need help!!!

    I can help you, email me:

    birdveiw @live.com

    (^take away the space)

    @Xodus

    I simply put it on the stage, the attach thing doesn’t work for me…But, we all have opinions, don’t we?

  14. abhilash on March 17th, 2008 6:06 am

    the game was awesome, and graphics were good.
    about the tut, i can’t wait for the next one to come… i think this will also give us the idea of how to create a isometric engine for RPG’s and adventure games.

  15. xavi-v on March 17th, 2008 5:47 pm

    very nice, i’ve always wanted to know how to make a game like this…thanks emanuele!

  16. xavi-v on March 17th, 2008 5:48 pm

    oh yeah, maybe make it a little faster with the next tut…

  17. xavi-v on March 17th, 2008 5:52 pm

    I was testing it out when I thought of something. If there are going to be lots of zombies, then the zombies should be slower, otherwise they are easily going to overpower the hero=(

  18. xavi-v on March 17th, 2008 6:08 pm

    i tried to do something where if the zombie hit the hero, then it attached a blood spurt movie clip and it had a delay so it only attached every 30 frames. It didn’t work for me, CAN SOMEONE HELP ME? Here was the code I used:
    //delay variable
    bloodDelay = 29;
    .
    .
    .
    //in zombie function at bottom
    if(this.hero.hitTest(_x, _y, true)){
    bloodDelay++;
    if(bloodDelay==30){
    bloodDelay = 0;
    _root.attachMovie(”blood”, “blood”, _root.getNextHighestDepth(),{_x:this._x, _y:this._y});
    }
    }

  19. stebo on March 17th, 2008 8:48 pm

    Hey emanuele
    will you also create a tutorial for the splitscreen mode of boxhead series?? that would be really cool…..

  20. Izy on March 17th, 2008 10:20 pm

    I can’t wait for the comments on this one.

    I’m trying to write my own version of this in AS3, and as always I’m running into problems with the angles.

    If I subtract 90 from the degrees version of the angle, the ranges get messed up and it’s no longer half negative, half positive.

    Did something change between AVM1 and AVM2?

  21. Flasher on March 18th, 2008 3:10 am

    Whoa! I’ve tracked down the terrain graphics. Not that difficult since there’s a credit in the game.

    http://lostgarden.com/2006/07/more-free-game-graphics.html

    The artist mentions a copyleft license. Cheers!

  22. Izy on March 18th, 2008 10:41 pm

    Incidentally, lines 65 through 73 are brilliant,
    particularly line 69.

    I’ve seen a similar technique for getting integers out of a random number function, but I didn’t think to use something like to get a limited number of results to represent the angle range.

    Elegantly simple.

  23. vsww on March 19th, 2008 10:13 am

    nice work!

  24. lailai on March 19th, 2008 10:15 am

    @xavi-v
    no, the hero should move 3x faster

  25. dude on March 21st, 2008 2:39 pm

    thats just hittest for that

  26. Slasher145 on March 30th, 2008 5:40 am

    Great job emanuele, great tutorial. I intrigued to see the commented version, it’s always nice to learn.

  27. Carlos on April 24th, 2008 4:23 pm

    sorry guy, but BoxHead by Sean Cooper uses profissional programming, it uses AS3 and sean cooper in some classes work in byte and pixel level for the best optimization…you can’t show this in a simple tutorial.

  28. Emanuele Feronato on April 24th, 2008 4:34 pm

    Of course I can’t show this, but I will show enough to make a decent clone

  29. David on May 14th, 2008 5:20 pm

    When is the next part comming up? I really want to learn how to have 2 guns and change between them!

  30. stevie on May 14th, 2008 8:52 pm

    wow awesome! who knows when the nxt part is out? oh and EMANUELE F please can you make a simpler platform game tutorial I gat stuck on the last one…PLEASE?

  31. stevie on May 14th, 2008 8:54 pm

    EMANUELLE plese make a simple platform game Im stuck

  32. The Urch on June 26th, 2008 6:31 am

    Hey great tutorial its awesome.
    Can you make one where the hero can shoot and more zombies spawn. Or instead of guns you could have force powers and kill the zombies by pushing them into walls and such.
    Awesome tutorials anyway.

  33. The Urch on June 30th, 2008 7:37 am

    Another thing…
    Has anyone heard of the “game”(more of a simulator but you could consider it one) falling sands?
    If you haven’t go to http://www.fallingsands.com. If anyone knows how to program that it would be awesome.

    Keep programming . .
    /
    \___/

  34. The Urch on June 30th, 2008 7:53 am

    http://www.fallingsandsgame.com i meant
    Typing error sorry

  35. The Urch on June 30th, 2008 7:55 am

    no s after sand either

  36. Shadowfyx on August 22nd, 2008 12:06 pm

    im gunna sound like a rite idiot but how do u use the actionscript.
    im trying to use the tutorial to make a sort of Resident Evil 4 mercanaries game.
    ive downloaded an actionscript program
    now what?

  37. Shadowfyx on August 22nd, 2008 12:11 pm

    hi its me agind
    in fat what program would you recomend
    and what do you do with the source code cos i cant find anything that opens .fla files

Leave a Reply




Trackbacks

  1. Managing isometric depths in Flash : Emanuele Feronato - italian geek and PROgrammer on April 3rd, 2008 9:45 am

    [...] 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 [...]