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

December 13, 2007 by Emanuele Feronato
Filed Under Flash, Game design • 25 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:

PLAIN TEXT
ACTIONSCRIPT:
  1. _root.attachMovie("starz", "starz", 1, {_x:-20, _y:-20});
  2. _root.attachMovie("ball", "ball", 3, {_x:240, _y:220});
  3. _root.attachMovie("info_panel", "info_panel", 4, {_y:410, _alpha:50, _visible:false});
  4. ball.texture.setMask(ball.ball_itself);
  5. yspeed = 0;
  6. xspeed = 0;
  7. checkpoint_passed = false;
  8. lev = 1;
  9. draw_level(lev);
  10. ball.onEnterFrame = function() {
  11.     info_panel._visible = false;
  12.     friction = 0.99;
  13.     power = 0.4;
  14.     brick_x = Math.floor((bricks._x-200)/80)*-1;
  15.     brick_y = Math.floor((bricks._y-180)/80)*-1;
  16.     type_of_tile = level[brick_y][brick_x];
  17.     if (type_of_tile>12000) {
  18.         message_to_show = messages[type_of_tile%12000];
  19.         type_of_tile = 12;
  20.     }
  21.     switch (type_of_tile) {
  22.     case 1 :
  23.         // normal tile
  24.         break;
  25.     case 2 :
  26.         // down spin tile
  27.         yspeed += 0.2;
  28.         break;
  29.     case 3 :
  30.         // up spin tile
  31.         yspeed -= 0.2;
  32.         break;
  33.     case 4 :
  34.         // left spin tile
  35.         xspeed -= 0.2;
  36.         break;
  37.     case 5 :
  38.         // right spin tile
  39.         xspeed += 0.2;
  40.         break;
  41.     case 6 :
  42.         // glass tile
  43.         depth = brick_y*12+brick_x;
  44.         bricks["brick_"+depth]._alpha--;
  45.         if (bricks["brick_"+depth]._alpha<1) {
  46.             level[brick_y][brick_x] = 0;
  47.         }
  48.         break;
  49.     case 7 :
  50.         // spin tile
  51.         xspeed *= 1.05;
  52.         yspeed *= 1.05;
  53.         break;
  54.     case 8 :
  55.         // slip tile
  56.         friction = 1;
  57.         power = 0;
  58.         break;
  59.     case 9 :
  60.         // beam
  61.         depth = brick_y*12+brick_x;
  62.         if (bricks["brick_"+depth].lava._currentframe>90) {
  63.             ball_die();
  64.         }
  65.         break;
  66.     case 10 :
  67.         // exit
  68.         checkpoint_passed = false;
  69.         lev++;
  70.         _root.removeMovieClip("bricks");
  71.         draw_level(lev);
  72.         break;
  73.     case 11 :
  74.         // reverse
  75.         power *= -1;
  76.         break;
  77.     case 12 :
  78.         // info
  79.         info_panel._visible = true;
  80.         info_panel.message_text.text = message_to_show;
  81.         break;
  82.     case 13 :
  83.         //checkpoint
  84.         checkpoint_passed = true;
  85.         save_x = brick_x;
  86.         save_y = brick_y;
  87.         break;
  88.     default :
  89.         // hole
  90.         ball_die();
  91.         break;
  92.     }
  93.     if (Key.isDown(Key.LEFT)) {
  94.         xspeed -= power;
  95.     }
  96.     if (Key.isDown(Key.RIGHT)) {
  97.         xspeed += power;
  98.     }
  99.     if (Key.isDown(Key.UP)) {
  100.         yspeed -= power;
  101.     }
  102.     if (Key.isDown(Key.DOWN)) {
  103.         yspeed += power;
  104.     }
  105.     xspeed *= friction;
  106.     yspeed *= friction;
  107.     if ((xspeed<0.1) and (xspeed>-0.1)) {
  108.         xspeed = 0;
  109.     }
  110.     if ((yspeed<0.1) and (yspeed>-0.1)) {
  111.         yspeed = 0;
  112.     }
  113.     bricks._y -= yspeed;
  114.     bricks._x -= xspeed;
  115.     starz._x = -20+((bricks._x-240)/10);
  116.     starz._y = -20+((bricks._y-220)/10);
  117.     this.texture._y += yspeed;
  118.     this.texture._x += xspeed;
  119.     if (this.texture._x>53) {
  120.         this.texture._x -= 63;
  121.     }
  122.     if (this.texture._x<-53) {
  123.         this.texture._x += 63;
  124.     }
  125.     if (this.texture._y>53) {
  126.         this.texture._y -= 63;
  127.     }
  128.     if (this.texture._y<-53) {
  129.         this.texture._y += 63;
  130.     }
  131. };
  132. function ball_die() {
  133.     bricks._x = 240-(80*_root.ball_start_x);
  134.     bricks._y = 220-(80*_root.ball_start_y);
  135.     xspeed = 0;
  136.     yspeed = 0;
  137.     draw_level(lev);
  138. }
  139. function draw_level(number) {
  140.     yspeed = 0;
  141.     xspeed = 0;
  142.     level = new Array();
  143.     messages = new Array();
  144.     switch (number) {
  145.     case 1 :
  146.         _root.ball_start_x = 0;
  147.         _root.ball_start_y = 0;
  148.         if (checkpoint_passed) {
  149.             _root.ball_start_x = save_x;
  150.             _root.ball_start_y = save_y;
  151.         }
  152.         level[0] = new Array(12001, 11, 11, 11, 11);
  153.         level[1] = new Array(0, 0, 0, 0, 1);
  154.         level[2] = new Array(1, 1, 10, 0, 1);
  155.         level[3] = new Array(1, 0, 0, 0, 1);
  156.         level[4] = new Array(12003, 1, 1, 13, 12002);
  157.         messages[1] = "Welcome to the game";
  158.         messages[2] = "You are about to cross a checkpoint";
  159.         messages[3] = "Ok. Now suicide! You'll respawn on the checkpoint";
  160.         break;
  161.     case 2 :
  162.         _root.ball_start_x = 0;
  163.         _root.ball_start_y = 0;
  164.         level[0] = new Array(1, 4, 4, 5, 0);
  165.         level[1] = new Array(0, 0, 0, 1, 0);
  166.         level[2] = new Array(0, 0, 0, 1, 0);
  167.         level[3] = new Array(0, 0, 0, 10, 0);
  168.         level[4] = new Array(0, 0, 0, 0, 0);
  169.         break;
  170.     case 3 :
  171.         _root.ball_start_x = 0;
  172.         _root.ball_start_y = 0;
  173.         level[0] = new Array(1, 6, 6, 4, 0);
  174.         level[1] = new Array(0, 0, 0, 6, 0);
  175.         level[2] = new Array(6, 5, 5, 6, 0);
  176.         level[3] = new Array(6, 0, 0, 0, 0);
  177.         level[4] = new Array(1, 1, 10, 0, 0);
  178.         break;
  179.     case 4 :
  180.         _root.ball_start_x = 0;
  181.         _root.ball_start_y = 0;
  182.         level[0] = new Array(1, 7, 0, 0, 0);
  183.         level[1] = new Array(0, 7, 0, 7, 10);
  184.         level[2] = new Array(1, 3, 0, 1, 0);
  185.         level[3] = new Array(1, 0, 0, 1, 0);
  186.         level[4] = new Array(1, 1, 1, 7, 0);
  187.         break;
  188.     case 5 :
  189.         _root.ball_start_x = 4;
  190.         _root.ball_start_y = 2;
  191.         level[0] = new Array(7, 8, 8, 8, 10);
  192.         level[1] = new Array(1, 0, 0, 0, 0);
  193.         level[2] = new Array(1, 8, 8, 3, 1);
  194.         level[3] = new Array(0, 0, 0, 0, 0);
  195.         level[4] = new Array(0, 0, 0, 0, 0);
  196.         break;
  197.     case 6 :
  198.         _root.ball_start_x = 2;
  199.         _root.ball_start_y = 2;
  200.         level[0] = new Array(2, 8, 9, 8, 9);
  201.         level[1] = new Array(9, 0, 0, 0, 1);
  202.         level[2] = new Array(2, 8, 1, 0, 3);
  203.         level[3] = new Array(0, 0, 0, 0, 4);
  204.         level[4] = new Array(10, 9, 9, 8, 6);
  205.         break;
  206.     case 7 :
  207.         _root.ball_start_x = 2;
  208.         _root.ball_start_y = 2;
  209.         level[0] = new Array(0, 0, 0, 0, 0);
  210.         level[1] = new Array(0, 0, 0, 0, 0);
  211.         level[2] = new Array(0, 0, 1, 0, 0);
  212.         level[3] = new Array(0, 0, 0, 0, 0);
  213.         level[4] = new Array(0, 0, 0, 0, 0);
  214.         break;
  215.     }
  216.     _root.createEmptyMovieClip("bricks", 2);
  217.     bricks._x = 240-(80*ball_start_x);
  218.     bricks._y = 220-(80*ball_start_y);
  219.     for (y=0; y<=4; y++) {
  220.         for (x=0; x<=4; x++) {
  221.             if (level[y][x]>0) {
  222.                 depth = y*12+x;
  223.                 place_brick = bricks.attachMovie("brick", "brick_"+depth, bricks.getNextHighestDepth(), {_x:x*80, _y:y*80});
  224.                 frame_to_stop = level[y][x];
  225.                 if (frame_to_stop>12000) {
  226.                     frame_to_stop = 12;
  227.                 }
  228.                 place_brick.gotoAndStop(frame_to_stop);
  229.             }
  230.         }
  231.     }
  232. }

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

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

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

Posts