Make a Flash game like BoxHead – part 1

March 15, 2008 • Flash, Game design by Emanuele Feronato • 55 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 (16 votes, average: 4.31 out of 5)
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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 55 comments

  1. Sunil Patel

    on March 15, 2008 at 1:01 pm

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

  2. David

    on March 15, 2008 at 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 15, 2008 at 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 15, 2008 at 2:56 pm

    Dude. This is amazing!!!

  5. Gabriel Bianconi

    on March 15, 2008 at 3:37 pm

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

  6. Flasher

    on March 15, 2008 at 3:48 pm

    Bring on the Boxhead clones! Nice one.

  7. Fairlyn

    on March 15, 2008 at 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 15, 2008 at 6:44 pm

    Me too. I need an IA…Thanks Emanuele.

  9. And Mar

    on March 15, 2008 at 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 16, 2008 at 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 16, 2008 at 3:45 pm

    Excellent article – thanks.

  12. Xodus

    on March 16, 2008 at 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 16, 2008 at 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 17, 2008 at 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 17, 2008 at 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 17, 2008 at 5:48 pm

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

  17. xavi-v

    on March 17, 2008 at 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 17, 2008 at 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 17, 2008 at 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 17, 2008 at 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 18, 2008 at 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 18, 2008 at 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 19, 2008 at 10:13 am

    nice work!

  24. lailai

    on March 19, 2008 at 10:15 am

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

  25. dude

    on March 21, 2008 at 2:39 pm

    thats just hittest for that

  26. Slasher145

    on March 30, 2008 at 5:40 am

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

  27. Managing isometric depths in Flash : Emanuele Feronato - italian geek and PROgrammer

    on April 3, 2008 at 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 [...]

  28. Carlos

    on April 24, 2008 at 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.

  29. Emanuele Feronato

    on April 24, 2008 at 4:34 pm

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

  30. David

    on May 14, 2008 at 5:20 pm

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

  31. stevie

    on May 14, 2008 at 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?

  32. stevie

    on May 14, 2008 at 8:54 pm

    EMANUELLE plese make a simple platform game Im stuck

  33. The Urch

    on June 26, 2008 at 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.

  34. The Urch

    on June 30, 2008 at 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 . .
    /
    \___/

  35. The Urch

    on June 30, 2008 at 7:53 am

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

  36. The Urch

    on June 30, 2008 at 7:55 am

    no s after sand either

  37. Shadowfyx

    on August 22, 2008 at 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?

  38. Shadowfyx

    on August 22, 2008 at 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

  39. RickHard

    on October 13, 2008 at 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

  40. Joseph Donofry

    on November 3, 2008 at 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!

  41. th

    on January 5, 2009 at 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)

  42. Thomas D

    on April 10, 2009 at 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

  43. Esquel

    on May 10, 2009 at 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!

  44. Zac

    on July 22, 2009 at 5:52 am

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

  45. rhys

    on July 25, 2009 at 10:42 am

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

  46. Triqui’s Picks #1 : Emanuele Feronato

    on October 18, 2009 at 2:24 pm

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

  47. Oliver

    on October 20, 2009 at 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?

  48. Oliver

    on October 21, 2009 at 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.

  49. Ricardo

    on April 23, 2010 at 9:09 am

    Hi. I like your tutorial; it’s very easy to follow and looks great. Will you be making part 2 shortly?

  50. DannyDaNinja

    on July 29, 2010 at 12:48 pm

    Ricardo, it’s now July 2010, I would love to see another part but after all these years, i doubt one will ever ome…

  51. tbanims

    on April 18, 2011 at 5:49 am

    is there a second one?

  52. AdmiralAP

    on June 29, 2011 at 2:36 pm

    what game maker should i use to make this game?

  53. AdmiralAP

    on June 29, 2011 at 2:38 pm

    nevermind

  54. D david

    on October 28, 2011 at 3:15 pm

    can you do video tutorial plz

  55. Velenda

    on November 1, 2011 at 10:20 pm

    Thanks, but how to chosse the numbers of zombies in the map ?

< >