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

December 13, 2007 by Emanuele Feronato
Filed Under Flash, Game design • 26 Comments 

January 16th update: 4th part released

In the third part of this tutorial I am going to fix a minor bug and introduce three new tiles:

info tile (displays a message when the ball rolls over it)
reverse control tile (reverses the controls of the ball)
checkpoint tile (makes you respawn at the checkpoint tile if you die)

Before continuing, I suggest you to read tutorials 1 and 2.

The actionscript of the last example has changed to:

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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

_root.attachMovie("starz", "starz", 1, {_x:-20, _y:-20});
_root.attachMovie("ball", "ball", 3, {_x:240, _y:220});
_root.attachMovie("info_panel", "info_panel", 4, {_y:410, _alpha:50, _visible:false});
ball.texture.setMask(ball.ball_itself);
yspeed = 0;
xspeed = 0;
checkpoint_passed = false;
lev = 1;
draw_level(lev);
ball.onEnterFrame = function() {
	info_panel._visible = false;
	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];
	if (type_of_tile>12000) {
		message_to_show = messages[type_of_tile%12000];
		type_of_tile = 12;
	}
	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
		checkpoint_passed = false;
		lev++;
		_root.removeMovieClip("bricks");
		draw_level(lev);
		break;
	case 11 :
		// reverse
		power *= -1;
		break;
	case 12 :
		// info
		info_panel._visible = true;
		info_panel.message_text.text = message_to_show;
		break;
	case 13 :
		//checkpoint
		checkpoint_passed = true;
		save_x = brick_x;
		save_y = brick_y;
		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) {
	yspeed = 0;
	xspeed = 0;
	level = new Array();
	messages = new Array();
	switch (number) {
	case 1 :
		_root.ball_start_x = 0;
		_root.ball_start_y = 0;
		if (checkpoint_passed) {
			_root.ball_start_x = save_x;
			_root.ball_start_y = save_y;
		}
		level[0] = new Array(12001, 11, 11, 11, 11);
		level[1] = new Array(0, 0, 0, 0, 1);
		level[2] = new Array(1, 1, 10, 0, 1);
		level[3] = new Array(1, 0, 0, 0, 1);
		level[4] = new Array(12003, 1, 1, 13, 12002);
		messages[1] = "Welcome to the game";
		messages[2] = "You are about to cross a checkpoint";
		messages[3] = "Ok. Now suicide! You'll respawn on the checkpoint";
		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});
				frame_to_stop = level[y][x];
				if (frame_to_stop>12000) {
					frame_to_stop = 12;
				}
				place_brick.gotoAndStop(frame_to_stop);
			}
		}
	}
}

Let’s comment the new lines:

Line 3: Attaching the info_panel object (the panel that will show the messages when the ball rolls over it) and making it invisible

Line 7: Creating a new variable to know if the player passed a checkpoint or not, and setting it to false by default

Line 11: Making the info panel object invisible. This may seems redundant since I alredy set it as invisible at line 3, but consider that this line is inserted into a routine to be executed at every time (so it’s redundant line 3…)

Lines 17-20: To understand this code, you must know how did I manage message tiles. Message tiles are tiles at number 12, but in the level array I assign a value of 12000+x where x is the id of the message. As an example, if a value in the level array is 12045, it meas that it’s a tile of type 12 (info tile) with the message 45. That’s what is done with this set of lines: if a value is greater than 12000, then assign 12 to type_of_tile value and type_of_tile%12000 (even if type_of_tile-12000 would be better) to the message_to_show variable

Lines 73-76: Code for the reverse controls tile (tile 11): simply multiplies power by -1

Lines 77-81: Code for the info panel tile (tile 12). Setting the info panel to visibile and assigning the dynamic text

Lines 82-87: Code for the checkpoint tile (tile 13): setting the checkpoint_passed variable to true and saving the current x and y tile position in save_x and save_y variables.

Lines 140-141: Reset the speed when a level is initialized. This will prevent the ball to mantain its speed when the player passes the level

Lines 157-159: Messages to display

Lines 225-227: If the tile number is greater than 12000, then setting the frame to stop in the tiles movieclip to 12

And that’s it: the first level has the new features while the others are the same of part 2

I am about to publish a complete game with a lot of more tiles, obviously I am releasing a full tutorial.

Meanwhile, download the source of this one

Read 4th part released

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 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.

26 Responses to “Create a Flash ball game with visual from above tutorial part 3”

  1. Frederik J on December 13th, 2007 6:35 pm

    Really, really nice Emanuele. You’re monetizing it as well, right?
    Love it!

  2. bontegames on December 13th, 2007 6:56 pm

    The ball is really looking perfect!
    As a suggestion for some more levels, how about sprinkling some other balls on the tracks, which should also not fall from the track, so you shouldn’t bump too hard against them.
    Cheers!

  3. maciek on December 13th, 2007 7:51 pm

    yay Cool, but I must say there is something about that game I dont like…

  4. chaew on December 13th, 2007 8:52 pm

    yeh thats really good! but when are you actually going to post the code to circle chain? we’re all eagerly waiting in anticipation…

  5. Stupid on December 13th, 2007 11:32 pm

    The circle chain source was already posted.

  6. shiv1411 on December 14th, 2007 11:42 am

    Yeah gr8 as usual.
    Emanuele, pls release the circle chain tutorial as you have only published the source code.
    We would appreciate it

  7. shiv1411 on December 14th, 2007 11:55 am

    Where did you learn actionscripting, Emanuele?

  8. Thomas on December 14th, 2007 11:18 pm

    Awesome! :D

  9. David on December 15th, 2007 11:26 am

    are we able to create arrays or any size as long as we change the number 4 on lines 219 and 220?

    great tutorials keep it up!

  10. Xodus on December 16th, 2007 4:46 pm

    Hey, Emanuele,

    I’m a big fan of your site, and on one of the previous posts, you said that if we got here from a tut link not created by you, we should notify you. So, go to this site:

    http://www.tutorialized.com/tutorial/Make-a-Flash-game-like-Flash-Element-Tower-Defense/30804

    I HATE copycats!

  11. Matt on December 16th, 2007 9:21 pm

    I think that was posted by Emanuele. The person who posted it, username is triqui which is the same as his newgrounds username:
    http://triqui.newgrounds.com/

  12. Tom on December 18th, 2007 11:59 pm

    Hello i have a problem

    so the maps are currently:

    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, 12001, 0, 0);
    level[3] = new Array(0, 0, 0, 0, 0);
    level[4] = new Array(0, 0, 0, 0, 0);

    Something like that but i wanted to add more levels so i did -

    case 2 :
    _root.ball_start_x = 0;
    _root.ball_start_y = 0;
    level[0] = new Array(12001, 7, 1, 1, 1);
    level[1] = new Array(0, 0, 0, 0, 1);
    level[2] = new Array(1, 1, 1, 1, 1);
    level[3] = new Array(1, 0, 0, 0, 0);
    level[4] = new Array(1, 2, 3, 0, 1);
    level[5] = new Array(0, 1, 2, 1, 1);
    level[6] = new Array(0, 0, 0, 0, 10);
    level[7] = new Array(0, 0, 0, 0, 10);
    messages[1] = “What will it do?”;
    break;

    but it osnt work any clues?

  13. lewis on December 20th, 2007 11:55 pm

    Use invisible tiles there great. You can make them by creating a new tile in the tile movie clip and changing it’s alpha to 0.
    Also how do you make it so that when you finish a certain level you go to the next slide.

  14. ben on December 28th, 2007 10:59 pm

    hey! guys if any one can give me the flash code for the game boulder dash, i want a max of 3 levels! i will b willing to pay for it! i really need it so if any one knws anything bout it please contact me my email address is alishag229@hotmail.com thank you

  15. Mafzies on December 31st, 2007 4:30 am

    How do I know what level I’m on?
    Right Now the game on this page has 5 flashing Green tiles, 2nd tile is yellow etc o.o

  16. phore_eyes on January 2nd, 2008 1:12 am

    how do u make it so that it can be more than 5 tiles wide???

  17. Emanuele Feronato on January 2nd, 2008 2:10 pm

    just make you array bigger

  18. justin on January 5th, 2008 4:20 am

    Hey i tried expanding the map. It works but how do i make the additional tiles show up????

  19. justin on January 6th, 2008 12:51 pm

    nvm. i asked a stupid question. and i figured it out after reading over everything again. BUT how do i add sounds after certain actions such as dying, entering a certain level and just about any other point?

  20. RJ on January 6th, 2008 2:02 pm

    if(something happens){
    music = new Sound(this);
    music.attachSound(“yoursoundlinkage”);
    music.setVolume(100);
    music.start(0,1);
    }

    And you only have to check that your sound is linked correctly.

  21. Laxaria on July 2nd, 2008 4:56 pm

    Just a question. Is there a way to make it such that instead of going to the next class of the frame, could you make it go to another frame instead? Thanks.

  22. nachoman on July 9th, 2008 9:35 pm

    great tutorial

    I just have 2 question. i need a code 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?
    and the other one is how to add a score so when you pass a level you get points

  23. Zuhair on April 17th, 2009 12:35 pm

    @phore_eyes: On lines 219 and 220, change the “4″s to the amount of tiles you want going across and going up.

    @Emanuele: This is a great tutorial. Your site has taught me loads, thanks. I am developing a game with this engine, do I need to put credit to you in it?

  24. Matt Saunders on May 29th, 2009 2:42 am

    If you want to make your levels bigger than 5×5..

    }
    _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; x0) {
    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]);
    }
    }
    }
    }

    localte this and then change the 4s is this bit..
    for (y=0; y<=4; y++) {
    for (x=0; x<=4; x++) {

    to whatever you want :) if you make it 1000 you dont have to use all the squares.

    GREAT tutorial btw.

  25. lucky on October 2nd, 2009 9:38 am

    its awesome! Emanuele…
    i really enjoyed playing it. kindly send me more tutorials on games.
    hav a nice day

Leave a Reply




Trackbacks

  1. Create a Flash ball game with visual from above tutorial part 2 : Emanuele Feronato - italian geek and PROgrammer on January 16th, 2008 11:10 pm

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

flash games company