Create a Flash ball game with visual from above tutorial part 2

August 3, 2007 • Flash by Emanuele Feronato • 28 Comments

December 13th update: 3rd part released
January 16th update: 4th part released

This is the second part of the tutorial about the creation of a Flash ball game with visual from above.

I suggest you to read part 1 before reading this post. Here I will start adding features to our game as said in the I Had to do it post.

Let’s start with the creation of the first, and most important, tile:

Exit tile

Well, an exit tile means there is an exit, and if there is an exit there is another level, and if there is another level I need a way to code levels.

I stored all levels in a function, in this way:

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

function draw_level(number) {
	level = new Array();
	switch (number) {
	case 1 :
		_root.ball_start_x = 0;
		_root.ball_start_y = 0;
		level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
		level[1] = new Array(1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
		level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
		level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
		level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
		level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
		level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
		level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
		level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
		level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
		level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
		break;
	case 2 :
		_root.ball_start_x = 0;
		_root.ball_start_y = 0;
		level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0);
		level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
		level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
		level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
		level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
		level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
		level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
		level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
		level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
		level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
		level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
		break;
	}
	_root.createEmptyMovieClip("bricks", 2);
	bricks._x = 240-(80*ball_start_x);
	bricks._y = 220-(80*ball_start_y);
	for (y=0; y<=10; y++) {
		for (x=0; x<=11; x++) {
			if (level[y][x]>0) {
				depth = y*12+x;
				place_brick = bricks.attachMovie("brick", "brick_"+depth, bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});
				place_brick.gotoAndStop(level[y][x]);
			}
		}
	}
}

The function accepts one parameter, that will be the level number. In this two-level game, the switch at line 3 loads level 1 (lines 4-18) or level 2 (lines 19-33).

You will notice at lines 5, 6, 20 and 21 two new declarations. ball_start_x and ball_start_y store the starting vertical and horizontal position of the ball in the level.

Lines 36-37 Places the ground according to ball_start_y and ball_start_x position. Remember that in this game the ball remain fixed in the middle of the screen while the background is scrolling.

The rest of the code is explained at part 1, except for line 43 that I will explain later.

Now we have more than 1 level. As much as 2!!

Before we proceed, let me introduce another feature you will get a lot familiar with:

The dead

Since there are several ways to die, I need a function to call everytime the player dies.

1
2
3
4
5
6
7

function ball_die() {
	bricks._x = 240-(80*_root.ball_start_x);
	bricks._y = 220-(80*_root.ball_start_y);
	xspeed = 0;
	yspeed = 0;
	draw_level(lev);
}

It’s very easy… when the player dies, the ball position is restored to its initial position and both xspeed and yspeed are set to zero. Then redraws the level.

Very, very easy.

Now it’s time to explain how to design tiles.

Look at this picture:

Tileball

As you can see, the brick movieclip has several frames (10 in the example). Every frame contains a brick type, and has a stop(); in it to… ehm… stop it at the current frame. Now it should be clear why I wrote that line 43 in the level drawing function: I goto and stop the brick instance according to the value stored in the level array.

Now it’s time to design some nasty levels and explain how does it work.

In this tutorial, I’ll design levels 5 bricks tall and 5 bricks wide, but there is (almost) no limit to levels size you can create.

It’s interesting anyway the complexity of some levels, even if so small.

Here it is the actionscript, all in the 1st frame as real PROs…

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

_root.attachMovie("starz", "starz", 1, {_x:-20, _y:-20});
_root.attachMovie("ball", "ball", 3, {_x:240, _y:220});
ball.texture.setMask(ball.ball_itself);
yspeed = 0;
xspeed = 0;
lev = 1;
draw_level(lev);
ball.onEnterFrame = function() {
	friction = 0.99;
	power = 0.4;
	brick_x = Math.floor((bricks._x-200)/80)*-1;
	brick_y = Math.floor((bricks._y-180)/80)*-1;
	type_of_tile = level[brick_y][brick_x];
	switch (type_of_tile) {
	case 1 :
		// normal tile
		break;
	case 2 :
		// down spin tile
		yspeed += 0.2;
		break;
	case 3 :
		// up spin tile
		yspeed -= 0.2;
		break;
	case 4 :
		// left spin tile
		xspeed -= 0.2;
		break;
	case 5 :
		// right spin tile
		xspeed += 0.2;
		break;
	case 6 :
		// glass tile
		depth = brick_y*12+brick_x;
		bricks["brick_"+depth]._alpha--;
		if (bricks["brick_"+depth]._alpha<1) {
			level[brick_y][brick_x] = 0;
		}
		break;
	case 7 :
		// spin tile
		xspeed *= 1.05;
		yspeed *= 1.05;
		break;
	case 8 :
		// slip tile
		friction = 1;
		power = 0;
		break;
	case 9 :
		// beam
		depth = brick_y*12+brick_x;
		if (bricks["brick_"+depth].lava._currentframe>90) {
			ball_die();
		}
		break;
	case 10 :
		// exit
		lev++;
		_root.removeMovieClip("bricks");
		draw_level(lev);
		break;
	default :
		// hole
		ball_die();
		break;
	}
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	xspeed *= friction;
	yspeed *= friction;
	if ((xspeed<0.1) and (xspeed>-0.1)) {
		xspeed = 0;
	}
	if ((yspeed<0.1) and (yspeed>-0.1)) {
		yspeed = 0;
	}
	bricks._y -= yspeed;
	bricks._x -= xspeed;
	starz._x = -20+((bricks._x-240)/10);
	starz._y = -20+((bricks._y-220)/10);
	this.texture._y += yspeed;
	this.texture._x += xspeed;
	if (this.texture._x>53) {
		this.texture._x -= 63;
	}
	if (this.texture._x<-53) {
		this.texture._x += 63;
	}
	if (this.texture._y>53) {
		this.texture._y -= 63;
	}
	if (this.texture._y<-53) {
		this.texture._y += 63;
	}
};
function ball_die() {
	bricks._x = 240-(80*_root.ball_start_x);
	bricks._y = 220-(80*_root.ball_start_y);
	xspeed = 0;
	yspeed = 0;
	draw_level(lev);
}
function draw_level(number) {
	level = new Array();
	switch (number) {
	case 1 :
		_root.ball_start_x = 0;
		_root.ball_start_y = 0;
		level[0] = new Array(1, 1, 1, 1, 10);
		level[1] = new Array(0, 0, 0, 0, 0);
		level[2] = new Array(0, 0, 0, 0, 0);
		level[3] = new Array(0, 0, 0, 0, 0);
		level[4] = new Array(0, 0, 0, 0, 0);
		break;
	case 2 :
		_root.ball_start_x = 0;
		_root.ball_start_y = 0;
		level[0] = new Array(1, 4, 4, 5, 0);
		level[1] = new Array(0, 0, 0, 1, 0);
		level[2] = new Array(0, 0, 0, 1, 0);
		level[3] = new Array(0, 0, 0, 10, 0);
		level[4] = new Array(0, 0, 0, 0, 0);
		break;
	case 3 :
		_root.ball_start_x = 0;
		_root.ball_start_y = 0;
		level[0] = new Array(1, 6, 6, 4, 0);
		level[1] = new Array(0, 0, 0, 6, 0);
		level[2] = new Array(6, 5, 5, 6, 0);
		level[3] = new Array(6, 0, 0, 0, 0);
		level[4] = new Array(1, 1, 10, 0, 0);
		break;
	case 4 :
		_root.ball_start_x = 0;
		_root.ball_start_y = 0;
		level[0] = new Array(1, 7, 0, 0, 0);
		level[1] = new Array(0, 7, 0, 7, 10);
		level[2] = new Array(1, 3, 0, 1, 0);
		level[3] = new Array(1, 0, 0, 1, 0);
		level[4] = new Array(1, 1, 1, 7, 0);
		break;
	case 5 :
		_root.ball_start_x = 4;
		_root.ball_start_y = 2;
		level[0] = new Array(7, 8, 8, 8, 10);
		level[1] = new Array(1, 0, 0, 0, 0);
		level[2] = new Array(1, 8, 8, 3, 1);
		level[3] = new Array(0, 0, 0, 0, 0);
		level[4] = new Array(0, 0, 0, 0, 0);
		break;
	case 6 :
		_root.ball_start_x = 2;
		_root.ball_start_y = 2;
		level[0] = new Array(2, 8, 9, 8, 9);
		level[1] = new Array(9, 0, 0, 0, 1);
		level[2] = new Array(2, 8, 1, 0, 3);
		level[3] = new Array(0, 0, 0, 0, 4);
		level[4] = new Array(10, 9, 9, 8, 6);
		break;
	case 7 :
		_root.ball_start_x = 2;
		_root.ball_start_y = 2;
		level[0] = new Array(0, 0, 0, 0, 0);
		level[1] = new Array(0, 0, 0, 0, 0);
		level[2] = new Array(0, 0, 1, 0, 0);
		level[3] = new Array(0, 0, 0, 0, 0);
		level[4] = new Array(0, 0, 0, 0, 0);
		break;
	}
	_root.createEmptyMovieClip("bricks", 2);
	bricks._x = 240-(80*ball_start_x);
	bricks._y = 220-(80*ball_start_y);
	for (y=0; y<=4; y++) {
		for (x=0; x<=4; x++) {
			if (level[y][x]>0) {
				depth = y*12+x;
				place_brick = bricks.attachMovie("brick", "brick_"+depth, bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});
				place_brick.gotoAndStop(level[y][x]);
			}
		}
	}
}

I am going to explain in detail only new features. Read step 1 if you do not understand some code.

Lines 1-2: Attaching stars and ball movieclips

Line 3: Masking the ball as explained in Creation of realistic spheres in Flash with textures and masking.

Lines 4-5: Setting ball’s x and y speeds to zero

Line 6: Set starting level at 1. Don’t cheat!!!

Line 7: Calling function to draw levels

Line 8: Beginning of the code to be executed to the ball at every frame

Lines 9-10: Defining friction and power as explained in Flash game creation tutorial – part 1

Lines 11-12: Determining the position of the ball in the level array according to brick movieclip position.

Some explication of those strange numbers:

80: brick width or height
200: movieclip width (500) divided by 2 (500/2=250) minus the half of the brick width or height (250-80/2=210) minus the radius of the ball (10)
180: same thing with movieclip height

Actually, the radius of the ball should not affect ball position but the ball is not in the precise centre of the stage, just radius pixel moved up-left. Why did I do this? Dunno, will be fixed in next tut :)

Line 13: Obtaining the tile type where the ball is rolling on

Line 14: Beginning of code to be executed according to tile type.

Lines 15-17: Normal tile – do nothing

Lines 18-21: Down spinning tile: increase y speed.

Lines 22-33: Up, Left and Right spinning tiles: same thing for the Down spinning tile, adjusting x and y speeds according to the direction to be spinned

Lines 34-41: Glass tile, start breaking once the ball is on it. The actionscript simply decrease the _alpha value of the ball, and once it reaches zero set the array at this position to zero (hole)

Lines 42-46: Spin tile, multiplies actual x and y speeds

Lines 47-51: Slippery tile, setting the friction at 1 and the power at zero means that you can’t control the ball that will continue running at the same speed on the same direction!

Lines 52-58: Laser beam tile: this tile is a movieclip that changes its color once every 90 frames and lasts 30 frames. When the tile is highlighted, it’s deadly. To determine if the tile is in its deadly status, I simply check its current frame. If it’s bigger than 90… ZZZZAP!

Lines 59-64: Your friend, the exit! Increases lev (the actual level), removes the old level from stage and draws the new one

Lines 65-68: Default tile… I mean no tile… hole… death… avoid it!

Lines 70-108: “Engine” of the game, the same explained in part 1.

Lines 109-115: Death routine, explained above

Lines 116-195: Level creation routine, with 6 levels (and an “end” level).

Try to finish the game!

And this is where part 2 ends. There are tons of new features waiting to be explained during next tutorial… all your suggestion will be included… suggest and get credited in the final game!

Meanwhile, thanks to Fairlyn (slippery tile) and Frederik J (lava tile, in this game converted in beam tile).

Download the source code and give me feedback.

Read 3rd part.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 3.71 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 28 comments

  1. ciaren coleman

    on August 3, 2007 at 8:20 pm

    thank you so much this has helped me so much

  2. David

    on August 4, 2007 at 4:08 am

    Very nice tutorial as always :D I read all your tutorials so i can’t wait for the next :D

  3. Mousey

    on August 4, 2007 at 10:20 am

    Awsome tutorail as always =] as above i read off of them. Carnt wait for linerider!

  4. Diego

    on August 4, 2007 at 9:28 pm

    Thank you for making this tutorials, all of them are pretty good! you helped me a lot with these
    thanks!

  5. abhilash

    on August 5, 2007 at 5:36 am

    cool!!!

  6. hansa

    on August 5, 2007 at 7:42 pm

    what about a locked door tile, a key tile, a timed door tile and a moving tile

  7. ciaren coleman

    on August 5, 2007 at 10:55 pm

    a reverse controls tile its simple to do you just get the slippery tile and put the power to 0.99

  8. ciaren coleman

    on August 5, 2007 at 10:56 pm

    sorry i meant -o.99

  9. Frederik J

    on August 6, 2007 at 7:11 pm

    Nice Mr. Feronato! Great job :)

  10. eblup

    on August 7, 2007 at 6:58 am

    i beat all the levels

  11. lewis

    on August 7, 2007 at 12:31 pm

    Thank you sooooo much!

  12. lewis

    on August 7, 2007 at 12:35 pm

    if you want to make an invisible tile make a new tile (case 11) and change tha alpha to zero.

    Your tutorials have helped me so much as i am only 13 i coldn’t have advanced without you.

    THANKS!

  13. Rory

    on August 13, 2007 at 3:53 am

    Totally awesome!

  14. Dieter Galea

    on August 23, 2007 at 2:03 pm

    hey guys i want to insert a new frame before the game itself. when i insert a frame before the game the game gets stuck. which numbers shall i changed to make it set to frame 2?

  15. lewis

    on August 30, 2007 at 2:35 pm

    Check out my version of the finished game.
    http://www.freewebs.com/gamesbybb/spaceball.htm
    Thanks for the tutorials Emanuele your great.

  16. Andrew Owen

    on September 21, 2007 at 11:32 pm

    Dieter I have a preloader inside my first frame. Here is the Action Script. Also don’t forget to add stop(); to the bottom of your code in the second frame (ie. The code provided in this tutorial)
    The gotoAndStop(2) is the main thing you need.

    function refreshloader()
    {
    loadedbytes = getBytesLoaded();
    totalbytes = getBytesTotal();
    loadedkbytes = Math.ceil(loadedbytes / 1000 * 100 / totalkbytes);
    totalkbytes = Math.ceil(totalbytes / 1000);
    if (loadedbytes == totalbytes)
    {
    gotoAndStop(2);
    mcPreloader._visible = false;
    clearInterval(id);
    }
    else
    {
    frame = int(loadedbytes / (totalbytes / 100));
    mcPreloader.mcLoader._xscale = frame;
    mcPreloader.ctbPercent.text = frame + ” %”;
    updateAfterEvent();
    } // end else if
    } // End of the function
    id = setInterval(refreshloader, 200);

    Andrew

  17. Andrew Owen

    on September 24, 2007 at 9:28 pm

    Emanuele is a King. Here is the game I came up with using this awesome man’s help.
    http://www.destructionpaintball.net/game.html

    Thanks Again,
    Andrew

  18. miguel(lito)

    on October 7, 2007 at 12:06 pm

    my lava tile dosent work
    how do i make the lava tile
    what will i do

  19. miguel(lito)

    on October 7, 2007 at 1:32 pm

    its ok i fixed it

  20. Monkios

    on November 6, 2007 at 5:19 am

    Is this one of your games Emanuele ?
    http://www.kongregate.com/games/ciarenc/roll-roll-roll

  21. Emanuele Feronato

    on November 6, 2007 at 10:20 am

    No Monkios, this game was built by a guy following my tutorials.

  22. Hawdon

    on November 18, 2007 at 10:33 pm

    Luve ur tutorials!
    But I just need some way to be able to make a tile in the last level that sends the player to the next frame where is says something like
    “Congrats! You win!!—— Replay?”
    I just don’t know how O.o
    Plz could some1 help me.

  23. ida

    on November 21, 2007 at 11:31 pm

    hey just to let you know. i’ve come out with a complete game of this for my school project.. so called complete… :)
    thanks to you.. feel free to view or play it here..

    http://e-duh.org/blog or
    http://e-duh.org/game.swf

  24. A Gem of Flash Game Tutorials | Newbie Game Programmers

    on December 17, 2007 at 4:22 pm

    [...] a Flash ball game with visual from above tutorial – Part 1 :: Part 2 :: Part [...]

  25. Create a Flash ball game with visual from above tutorial : Emanuele Feronato - italian geek and PROgrammer

    on January 16, 2008 at 11:10 pm

    [...] 3rd update: 2nd part released December 13th update: 3rd part released January 16th update: 4th part [...]

  26. Søren

    on January 21, 2008 at 3:38 pm

    hi every one, i am trying to make a simpel game. But i need to make an exit, is there any one ho can write a simple code for me, for getting this exit working. so when the ball roll over the exit you come to an new level.

    Søren

  27. Héctor

    on January 3, 2011 at 8:22 pm

    Please help! I don’t know why my own 3d ball does not work.

    I read the post how to make it and the mask made by action script didn’t work. I deleted ball_itself and make the mask manually. Worked perfectly.

    But when I want to do that oriented in that game, the texture does not move faster than the ball. The “sphere” is not “real”, it is a painted circle. Why? I’ve made all the things that are explained and does not work.
    I’ve tried it for 5 days, in different ways, and nothing.

    Please, does anyone know why is it happening that? It is driving me crazy.

    Thanks.

  28. Ygr3ku

    on January 10, 2011 at 2:32 pm

    if u use cs5 and ActionScript3 might not work because AS2 use command (something._thing) and AS3 instead uses (something.thing), the _ being eliminated and not recognized anymore. did this helped you? (try remove the _ )

< >