Make a Flash game like BoxHead – part 1

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

_root.attachMovie("hero","hero",_root.getNextHighestDepth(),{_x:250, _y:200});
_root.attachMovie("zombie","zombie",_root.getNextHighestDepth(),{_x:25, _y:20});
hero_speed = 1.5;
zombie_speed = 1;
zombie.same_rotation = 0;
hero.onEnterFrame = function() {
	xspeed = 0;
	yspeed = 0;
	if (Key.isDown(Key.LEFT)) {
		xspeed -= hero_speed;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += hero_speed;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= hero_speed;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += hero_speed;
	}
	if ((xspeed != 0) and (yspeed != 0)) {
		xspeed *= 0.707;
		yspeed *= 0.707;
	}
	this._x += xspeed;
	this._y += yspeed;
	switch (xspeed) {
		case hero_speed :
			this._rotation = 90;
			break;
		case -hero_speed :
			this._rotation = -90;
			break;
		default :
			switch (yspeed) {
				case hero_speed :
					this._rotation = 180;
					break;
				case -hero_speed :
					this._rotation = 0;
					break;
				case hero_speed*0.707 :
					if (xspeed == hero_speed*0.707) {
						this._rotation = 135;
					}
					if (xspeed -= hero_speed*0.707) {
						this._rotation = -135;
					}
					break;
				case -hero_speed*0.707 :
					if (xspeed == hero_speed*0.707) {
						this._rotation = 45;
					}
					if (xspeed -= hero_speed*0.707) {
						this._rotation = -45;
					}
					break;
			}
	}
};
zombie.onEnterFrame = function() {
	this.same_rotation++;
	dist_x = this._x-hero._x;
	dist_y = this._y-hero._y;
	angle = Math.atan2(dist_y, dist_x);
	real_rotation = angle*57.2957795-90;
	this._save_rotation = this._rotation;
	if (this.same_rotation>15) {
		this._rotation = Math.round(real_rotation/45)*45;
	}
	if (this._rotation != this._save_rotation) {
		this.same_rotation = 0;
	}
	switch (this._rotation) {
		case 0 :
			this._y -= zombie_speed;
			break;
		case 45 :
			this._y -= zombie_speed*0.707;
			this._x += zombie_speed*0.707;
			break;
		case 90 :
			this._x += zombie_speed;
			break;
		case 135 :
			this._y += zombie_speed*0.707;
			this._x += zombie_speed*0.707;
			break;
		case -180 :
			this._y += zombie_speed;
			break;
		case -135 :
			this._y += zombie_speed*0.707;
			this._x -= zombie_speed*0.707;
			break;
		case -90 :
			this._x -= zombie_speed;
			break;
		case -45 :
			this._y -= zombie_speed*0.707;
			this._x -= zombie_speed*0.707;
			break;
	}
};

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

Download the source code and give me feedback

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 4.50 out of 5)
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.

48 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

  38. RickHard on October 13th, 2008 9:09 pm

    Hi!
    I can’t make a simple HitTest, where if the zombie hit the hero, then gotoAndPlay(“win”);
    CAN YOU PLEASE HELP ME ASAP?
    Answer here in the forum, or e-mail me to breakinhabits@gmail.com
    Thank you so much

  39. Joseph Donofry on November 3rd, 2008 5:22 am

    Very nice tutorial. I am currently working on (I actually just started) working on a BoxHead like game. My friend and I want to try to add online co-op and all kinds of fun things to it, but I have to make the framework first!

  40. th on January 5th, 2009 12:37 am

    hi uyz….all the code is great..
    but what program do u use to actualy insert it?
    i am a tottal noob..this is my fistgam thingy…so bear wit me…:)
    fanx..
    (email me)

  41. Thomas D on April 10th, 2009 4:49 pm

    Would someone be able to make Boxhead zombie in java script so i can play at school on jcreater ^^

    this class is a blow off so i mess around but they are finding my game sites to fast so it would be greatly appriceated

  42. Esquel on May 10th, 2009 1:07 pm

    Is there someone who can help me with making this game to a little shooter? I really need help, I suck at this!

    add me at msn : steventjeh@hotmail.com or mail me

    thank you!

  43. Zac on July 22nd, 2009 5:52 am

    so am i right in thinking there is no part for this???

  44. rhys on July 25th, 2009 10:42 am

    what are you supposed to do on the grey box im trying to make a shooter what do i do

  45. Oliver on October 20th, 2009 11:31 am

    Hi i’m trying to make a boxhead tribute game for a computer stdies assignment. Do you know where i can get a sprite sheet?

  46. Oliver on October 21st, 2009 1:28 pm

    P.S. for those who haven’t ever made a game before gamemaker is a software you can download for free and it makes making games easy, in a matter of minuets i had a zombie that chases the player around walls, and thats the hard bit. Now all i have to do is devils and weapons. The only problem with gamemaker is getting it online.

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

  2. Triqui’s Picks #1 : Emanuele Feronato on October 18th, 2009 2:24 pm

    [...] Tombs: good BoxHead clone in an ancient Egypt background, with all needed features such as various enemy types, weapon [...]

flash games company