This tutorial does not cover anything new (well, this first part of this tutorial) but shows you how to create a Flash ball game with a visual from above and some decent graphics.

Being a ball game, I suggest you all to read the basics for a ball game movement in this tutorial.

In this one, there is no gravity but the method is the same.

In this tutorial I'll cover two types of gameplay: one with the ball that runs on a static stage, and one with a fixed ball with a scrolling stage. We'll see the pros and cons of both type of games.

First of all, let's start with the aim of the game: you have to take your ball to the exit of each level avoiding any kind of traps.

In this first part, there isn't any exit nor traps, just walkable tiles. So, at the moment the game will sound like "try not to fall off the tiles".

Game type 1: moving ball on a static stage

Does it look too long? I guess not, because you'll see how easy it can be if you follow all the steps.

Line 1: Declaration of level, the array that contains level data. Levels in this game will be tile based. I wrote a tutorial about managing the creation of tile based levels here.

Line 2: Attaching the movie previoulsy created and linkaged as starz. The space scene you can see in the background. I made the scene with the Photoshop action to create an outer space scene.

Line 3: Creating a new empty movie clip (bricks) that will contain level tiles.

Lines 4-14: Defining the mapping of the level. In this case, the ones mean a walkable tile while the zeros a hole. You cannot walk over holes.

Lines 15-21: Scanning all the array and attaching movieclips previously linkaged as brick into the bricks movieclip (the one created at line 3). As said, refer to this tutorial for more information.

Line 22: Attaching the ball. I created the ball in the same way as in Creation of realistic spheres in Flash with textures and masking tutorial.

Line 23: Masking the ball texture as explained in the tutorial mentioned above. I strongly suggest you to read if you haven't done it yet, you will learn how to create proper textures for a ball and map them to it with masking.

Lines 24-27: Defining power, speed and friction as explained in here. Being a game with the visual from above, there is no gravity, and at the moment there is no wind too.

Line 28: This is the main function, to be called at every frame.

Lines 29-40: Adjusting ball x and y speed according to the key the player presses, as seen here (maybe one day I'll write an ebook and say "as seen in Chapter I" - cool).

Lines 41-42: Applying friction to x and y speed.

Lines 43-44: Adjusting ball position according to its speed.

Lines 45-58: Adjusting texture position to simulate the rolling effect as seen here.

Line 59: Determining, according to ball x position, on wich x-tile we are. I need to know the ball position inside the level array because in next tutorial I will introduce special tiles. In the formula I involved the ball radius (10) and tile size (40).

Line 60: Same thing with y position.

Lines 61-66: If the position of the ball in level array is different than 1 (solid tile) then start the death sequence: the ball is moved ad its starting position and both x and y speeds are set to zero.

That's it! Wasn't it easy?

This is the game

The second step is making the tiles bigger (otherwise the game may be frustrating) and have a larger, scrollable stage.

To have a scrollable background, the ball must remail fixed in the center of the stage, and the level must move, like in this tutorial.

Game type 2: static ball on a moving stage

Main changes are at lines 45-46 where I move the bricks movieclip instead of ball one, and 47-48 where I add a little parallax scrolling to background space scene.

Ball's position on the level, at lines 63-64, is no long determined by ball position but by bricks position, since the ball is fixed.

And this is the game. I prefer this version.

And this is where this tutorial ends.

Next step will be to create different types of tiles, each with its way to affect ball movement, and a level editor.

Now I need your creativity: suggest me a type of tile I haven't already planned and your name will be in the credits.

Planned tiles at the moment are:

Icy/Sand/etc tiles: Affect ball friction

Left/Right/Up/Down spinning tiles: Increasing left/right/up/down ball speed

Glass tiles: Disappear once the ball has rolled out of them

Crystal tiles: Disappear once the ball has rolled on them (so move fast!)

Tunnel tiles: You can't see the ball because it's under the tunnel...

Spinning tiles: Increase ball speed in the direction the ball rolled on them

Invert tiles: Ball controls are inverted while on these tiles

Teleport tiles: ... need an explication?

Exit tile: ...

Now it's up to you.

Take the source codes and give me feedback.

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:

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.

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:

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

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.

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:

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

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

In the 4th part I am going to explain a feature that a race game must have: the laps

Read steps 1, 2 and 3 before continuing

Having laps in a track will result in a longer race.

The bad thing is that if you don't design laps with some more actionscript than normally required, your players will cheat.

Look at the picture:

We have our track with 12 tiles with a clockwise direction. Assuming that you will start from 1, you should race through 1-2-3-4-5-6-7-8-9-A-B-C then 1 again in order to make a lap.

So when the ball rolls over C, it's a new lap.

Wrong.

A cheater could move this way: 1-C-1-C-1 and he already completed 2 laps.

At this point, you would put an intermediate lap, let's say at tile 7, and check that the intermediate lap has been passed before rolling over C. Now the player will have to drive through 1-2-3-4-5-6-7 but... let's say the second part of the track is hardest than the first... he could make 1-2-3-4-5-6-7-6-5-4-3-2-1-C completing a lap without passing over 8-9-10-A-B, the hard part of the track.

To prevent this, you can put some "one way" tiles... if the tile 1 can be passed only from left to right, there is no way for the player to make 1-C because the game won't allow it... but in some cases I would need to make 1-C, maybe he needs more speed to pass a certain tile (let's say 3) and he founds himself at 2 without speed. He would need to make 2-1-C-B-C-1-2-3...

If you try to solve the lap problem this way, the player won't be able to do 1-C to gain speed

Well, what about placing another intermediate lap, let's say at A, so the player must pass over 7, then A and then C?

This may work, unless the path from A to C is harder than A to 1... so you may place an intermediate lap on B... and you end with an intermediate lap at every tile.

My solution allows to manage laps with only three tiles, one next to another. Let's say C-1-2

The player will pass a lap when he rolls over C-1-2 but only if he never passed over tile 1 more than once. This means that a 1-C-1-2 does not count as a lap because he passed over the 1 twice.

Let's see some actionscript: basically it's the same as Create a Flash ball game with visual from above tutorial part 3 so I will comment only the new lines

Line 4: Attaching a movieclip to display laps

Line 11: Variable counting the number of laps

Line 23: Checking if the type of tile is greater than 10000. In my game, lap tiles are 10001, 10002 and 10003

Line 24: Obtaining the lap sequence: 1, 2 or 3, according on which tile the ball is rolling on

Line 25: If the lap sequence is equal to a variable called lap_to_go (it stores the next lap sequence to go in order to complete the lap as you will see later) and its value is 1 (the 10001 tile, the one that represents the start)

Line 26: Increase the number of laps

Line 27: Display the number of laps

Line 29: Calculating the value of the next tile in order to make a correct lap

Line 30: Defining the type of tile (a normal one)

Line 164: Level design of lap tiles

Lines 237-239: Showing the default tile if its number is greater than 10000

As you can see, now you have laps!

Now you have a lot more gamplay options with this engine... download the source code and create the ultimate game!

discuss this topic to forum