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

August 3, 2007 by Emanuele Feronato
Filed Under Flash •  

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:

PLAIN TEXT
ACTIONSCRIPT:
  1. function draw_level(number) {
  2.     level = new Array();
  3.     switch (number) {
  4.     case 1 :
  5.         _root.ball_start_x = 0;
  6.         _root.ball_start_y = 0;
  7.         level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0);
  8.         level[1] = new Array(1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
  9.         level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
  10.         level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
  11.         level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
  12.         level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
  13.         level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
  14.         level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
  15.         level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
  16.         level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
  17.         level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
  18.         break;
  19.     case 2 :
  20.         _root.ball_start_x = 0;
  21.         _root.ball_start_y = 0;
  22.         level[0] = new Array(1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0);
  23.         level[1] = new Array(0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1);
  24.         level[2] = new Array(1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1);
  25.         level[3] = new Array(1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1);
  26.         level[4] = new Array(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
  27.         level[5] = new Array(1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1);
  28.         level[6] = new Array(1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1);
  29.         level[7] = new Array(1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1);
  30.         level[8] = new Array(1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1);
  31.         level[9] = new Array(1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1);
  32.         level[10] = new Array(0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1);
  33.         break;
  34.     }
  35.     _root.createEmptyMovieClip("bricks", 2);
  36.     bricks._x = 240-(80*ball_start_x);
  37.     bricks._y = 220-(80*ball_start_y);
  38.     for (y=0; y<=10; y++) {
  39.         for (x=0; x<=11; x++) {
  40.             if (level[y][x]>0) {
  41.                 depth = y*12+x;
  42.                 place_brick = bricks.attachMovie("brick", "brick_"+depth, bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});
  43.                 place_brick.gotoAndStop(level[y][x]);
  44.             }
  45.         }
  46.     }
  47. }

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.

PLAIN TEXT
ACTIONSCRIPT:
  1. function ball_die() {
  2.     bricks._x = 240-(80*_root.ball_start_x);
  3.     bricks._y = 220-(80*_root.ball_start_y);
  4.     xspeed = 0;
  5.     yspeed = 0;
  6.     draw_level(lev);
  7. }

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

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("starz", "starz", 1, {_x:-20, _y:-20});
  2. _root.attachMovie("ball", "ball", 3, {_x:240, _y:220});
  3. ball.texture.setMask(ball.ball_itself);
  4. yspeed = 0;
  5. xspeed = 0;
  6. lev = 1;
  7. draw_level(lev);
  8. ball.onEnterFrame = function() {
  9.     friction = 0.99;
  10.     power = 0.4;
  11.     brick_x = Math.floor((bricks._x-200)/80)*-1;
  12.     brick_y = Math.floor((bricks._y-180)/80)*-1;
  13.     type_of_tile = level[brick_y][brick_x];
  14.     switch (type_of_tile) {
  15.     case 1 :
  16.         // normal tile
  17.         break;
  18.     case 2 :
  19.         // down spin tile
  20.         yspeed += 0.2;
  21.         break;
  22.     case 3 :
  23.         // up spin tile
  24.         yspeed -= 0.2;
  25.         break;
  26.     case 4 :
  27.         // left spin tile
  28.         xspeed -= 0.2;
  29.         break;
  30.     case 5 :
  31.         // right spin tile
  32.         xspeed += 0.2;
  33.         break;
  34.     case 6 :
  35.         // glass tile
  36.         depth = brick_y*12+brick_x;
  37.         bricks["brick_"+depth]._alpha--;
  38.         if (bricks["brick_"+depth]._alpha<1) {
  39.             level[brick_y][brick_x] = 0;
  40.         }
  41.         break;
  42.     case 7 :
  43.         // spin tile
  44.         xspeed *= 1.05;
  45.         yspeed *= 1.05;
  46.         break;
  47.     case 8 :
  48.         // slip tile
  49.         friction = 1;
  50.         power = 0;
  51.         break;
  52.     case 9 :
  53.         // beam
  54.         depth = brick_y*12+brick_x;
  55.         if (bricks["brick_"+depth].lava._currentframe>90) {
  56.             ball_die();
  57.         }
  58.         break;
  59.     case 10 :
  60.         // exit
  61.         lev++;
  62.         _root.removeMovieClip("bricks");
  63.         draw_level(lev);
  64.         break;
  65.     default :
  66.         // hole
  67.         ball_die();
  68.         break;
  69.     }
  70.     if (Key.isDown(Key.LEFT)) {
  71.         xspeed -= power;
  72.     }
  73.     if (Key.isDown(Key.RIGHT)) {
  74.         xspeed += power;
  75.     }
  76.     if (Key.isDown(Key.UP)) {
  77.         yspeed -= power;
  78.     }
  79.     if (Key.isDown(Key.DOWN)) {
  80.         yspeed += power;
  81.     }
  82.     xspeed *= friction;
  83.     yspeed *= friction;
  84.     if ((xspeed<0.1) and (xspeed>-0.1)) {
  85.         xspeed = 0;
  86.     }
  87.     if ((yspeed<0.1) and (yspeed>-0.1)) {
  88.         yspeed = 0;
  89.     }
  90.     bricks._y -= yspeed;
  91.     bricks._x -= xspeed;
  92.     starz._x = -20+((bricks._x-240)/10);
  93.     starz._y = -20+((bricks._y-220)/10);
  94.     this.texture._y += yspeed;
  95.     this.texture._x += xspeed;
  96.     if (this.texture._x>53) {
  97.         this.texture._x -= 63;
  98.     }
  99.     if (this.texture._x<-53) {
  100.         this.texture._x += 63;
  101.     }
  102.     if (this.texture._y>53) {
  103.         this.texture._y -= 63;
  104.     }
  105.     if (this.texture._y<-53) {
  106.         this.texture._y += 63;
  107.     }
  108. };
  109. function ball_die() {
  110.     bricks._x = 240-(80*_root.ball_start_x);
  111.     bricks._y = 220-(80*_root.ball_start_y);
  112.     xspeed = 0;
  113.     yspeed = 0;
  114.     draw_level(lev);
  115. }
  116. function draw_level(number) {
  117.     level = new Array();
  118.     switch (number) {
  119.     case 1 :
  120.         _root.ball_start_x = 0;
  121.         _root.ball_start_y = 0;
  122.         level[0] = new Array(1, 1, 1, 1, 10);
  123.         level[1] = new Array(0, 0, 0, 0, 0);
  124.         level[2] = new Array(0, 0, 0, 0, 0);
  125.         level[3] = new Array(0, 0, 0, 0, 0);
  126.         level[4] = new Array(0, 0, 0, 0, 0);
  127.         break;
  128.     case 2 :
  129.         _root.ball_start_x = 0;
  130.         _root.ball_start_y = 0;
  131.         level[0] = new Array(1, 4, 4, 5, 0);
  132.         level[1] = new Array(0, 0, 0, 1, 0);
  133.         level[2] = new Array(0, 0, 0, 1, 0);
  134.         level[3] = new Array(0, 0, 0, 10, 0);
  135.         level[4] = new Array(0, 0, 0, 0, 0);
  136.         break;
  137.     case 3 :
  138.         _root.ball_start_x = 0;
  139.         _root.ball_start_y = 0;
  140.         level[0] = new Array(1, 6, 6, 4, 0);
  141.         level[1] = new Array(0, 0, 0, 6, 0);
  142.         level[2] = new Array(6, 5, 5, 6, 0);
  143.         level[3] = new Array(6, 0, 0, 0, 0);
  144.         level[4] = new Array(1, 1, 10, 0, 0);
  145.         break;
  146.     case 4 :
  147.         _root.ball_start_x = 0;
  148.         _root.ball_start_y = 0;
  149.         level[0] = new Array(1, 7, 0, 0, 0);
  150.         level[1] = new Array(0, 7, 0, 7, 10);
  151.         level[2] = new Array(1, 3, 0, 1, 0);
  152.         level[3] = new Array(1, 0, 0, 1, 0);
  153.         level[4] = new Array(1, 1, 1, 7, 0);
  154.         break;
  155.     case 5 :
  156.         _root.ball_start_x = 4;
  157.         _root.ball_start_y = 2;
  158.         level[0] = new Array(7, 8, 8, 8, 10);
  159.         level[1] = new Array(1, 0, 0, 0, 0);
  160.         level[2] = new Array(1, 8, 8, 3, 1);
  161.         level[3] = new Array(0, 0, 0, 0, 0);
  162.         level[4] = new Array(0, 0, 0, 0, 0);
  163.         break;
  164.     case 6 :
  165.         _root.ball_start_x = 2;
  166.         _root.ball_start_y = 2;
  167.         level[0] = new Array(2, 8, 9, 8, 9);
  168.         level[1] = new Array(9, 0, 0, 0, 1);
  169.         level[2] = new Array(2, 8, 1, 0, 3);
  170.         level[3] = new Array(0, 0, 0, 0, 4);
  171.         level[4] = new Array(10, 9, 9, 8, 6);
  172.         break;
  173.     case 7 :
  174.         _root.ball_start_x = 2;
  175.         _root.ball_start_y = 2;
  176.         level[0] = new Array(0, 0, 0, 0, 0);
  177.         level[1] = new Array(0, 0, 0, 0, 0);
  178.         level[2] = new Array(0, 0, 1, 0, 0);
  179.         level[3] = new Array(0, 0, 0, 0, 0);
  180.         level[4] = new Array(0, 0, 0, 0,