Tunnelball: design a level for this flash game

March 24, 2007 by Emanuele Feronato
Filed Under Flash •  

I want you all to play TUNNELBALL, a complete flash game I developed using most of the topics covered in tutorials 1 to 5.3

Tunnelball

Moreover, I am releasing the full source code and I invite you all to contribute to the sequel of this game by designing one or more leves for the sequel I am planning. I will teach you how to do it in this tutorial.

But first of all play the game.

The source code is commented at its inside and there isn't anything you haven't already seen.

Let's examine it:

All the actionscript is located in the 1st frame

PLAIN TEXT
ACTIONSCRIPT:
  1. // TUNNELBALL V0.1 BETA
  2. // By Emanuele Feronato
  3. // www.emanueleferonato.com
  4. // visit my blog and find my tuotorials
  5. // attaching movies
  6. attachMovie("bg", "bg", 1, {_width:5700, _height:5700});
  7. attachMovie("explosion", "explosion", 2, {_x:284, _y:209, _visible:false});
  8. attachMovie("kira", "kira", 3, {_x:284, _y:209});
  9. attachMovie("wall", "wall", 4, {_width:5700, _height:5700});
  10. attachMovie("upper", "upper", 5, {_x:300, _alpha:80});
  11. attachMovie("count_down", "count_down", 6, {_x:0, _y:0, _alpha:80});
  12. attachMovie("legend", "legend", 7, {_x:0, _y:391, _alpha:80});
  13. attachMovie("game_over_button", "game_over_button", 8);
  14. attachMovie("splash", "splash", 9, {_x:440, _y:113, _alpha:80});
  15. attachMovie("visit", "visit", 10, {_x:250, _y:433});
  16. // the game_over_button properties aren't set in the attachmovie declaration as I did
  17. // with the others movieclips because it didn't work. Seems that button's properties
  18. // cannot be declared "on the fly".
  19. game_over_button._visible = false;
  20. game_over_button._x = 284;
  21. game_over_button._y = 209;
  22. game_over_button.onRelease = function() {
  23.     getURL('http://www.emanueleferonato.com');
  24. };
  25. // attaching sounds
  26. hit_sound = new Sound();
  27. hit_sound.attachSound("sound_hit");
  28. gameover_sound = new Sound();
  29. gameover_sound.attachSound("gameover");
  30. // player's starting positions
  31. start_x = new Array(240, 240, 240, -2100, 2690, -1800, 1400, 2700, 200, 2700, 250);
  32. start_y = new Array(0, 350, 0, 2500, 2800, 2500, 2000, 2600, 600, 2750, 190);
  33. // level names
  34. level_names = new Array("Intro", "Wide and linear", "Not so wide...", "Long but straight", "Crazy serpentine", "Use your brakes", "Intestine", "The bunker", "Back and forth", "Impossible: give up", "Congratz!!");
  35. init_game();
  36. // main function
  37. kira.onEnterFrame = function() {
  38.     if (kira_playing) {
  39.         // timer
  40.         if (level>1) {
  41.             elapsed_time = getTimer()-start_time;
  42.         }
  43.         time_left = countdown-elapsed_time;
  44.         if (time_left<45000) {
  45.             count_down.time_left.textColor = 0xffff00;
  46.         }
  47.         if (time_left<30000) {
  48.             count_down.time_left.textColor = 0xff8000;
  49.         }
  50.         if (time_left<15000) {
  51.             count_down.time_left.textColor = 0xff0000;
  52.         }
  53.         count_down.time_left.text = time_to_string(time_left);
  54.         // detecting keys pressed
  55.         if (Key.isDown(Key.LEFT)) {
  56.             xspeed = xspeed-power;
  57.         }
  58.         if (Key.isDown(Key.RIGHT)) {
  59.             xspeed = xspeed+power;
  60.         }
  61.         if (Key.isDown(Key.UP)) {
  62.             yspeed = yspeed-power*upconstant;
  63.         }
  64.         if (Key.isDown(Key.DOWN)) {
  65.             yspeed = yspeed+power*upconstant;
  66.         }
  67.         if ((Key.isDown(Key.SPACE)) and (brakes>0)) {
  68.             yspeed = yspeed/2;
  69.             xspeed = xspeed/2;
  70.             // I don't want the player to lose brakes in the 1st level
  71.             if (level>1) {
  72.                 brakes--;
  73.                 count_down.brake_left.textColor = 0x00ff00;
  74.                 if (brakes<75) {
  75.                     count_down.brake_left.textColor = 0xffff00;
  76.                 }
  77.                 if (brakes<50) {
  78.                     count_down.brake_left.textColor = 0xff8000;
  79.                 }
  80.                 if (brakes<25) {
  81.                     count_down.brake_left.textColor = 0xff0000;
  82.                 }
  83.                 count_down.brake_left.text = "Brakes: "+brakes;
  84.             }
  85.         }
  86.         // speed calculation                                           
  87.         xspeed = (xspeed+wind)*friction;
  88.         yspeed = yspeed+gravity;
  89.         if (xspeed>0) {
  90.             this.kira.gotoAndStop(1);
  91.         } else {
  92.             this.kira.gotoAndStop(2);
  93.         }
  94.         // oh no!!! kira dies!!!
  95.         if ((energy<1) or (countdown-elapsed_time<1)) {
  96.             kira_die();
  97.         }
  98.         // screen update                               
  99.         wall._y -= yspeed;
  100.         wall._x -= xspeed;
  101.         bg._y -= yspeed;
  102.         bg._x -= xspeed;
  103.         // collision
  104.         if (wall.hitTest(this._x, this._y, true)) {
  105.             if (!wall.end.hitTest(this._x, this._y, true)) {
  106.                 // if the level is not the 1st, the player lose energy
  107.                 if (level>1) {
  108.                     energy -= Math.round(Math.sqrt(xspeed*xspeed+yspeed*yspeed));
  109.                     count_down.energy_left.textColor = 0x00ff00;
  110.                     if (energy<75) {
  111.                         count_down.energy_left.textColor = 0xffff00;
  112.                     }
  113.                     if (energy<50) {
  114.                         count_down.energy_left.textColor = 0xff8000;
  115.                     }
  116.                     if (energy<25) {
  117.                         count_down.energy_left.textColor = 0xff0000;
  118.                     }
  119.                     count_down.energy_left.text = "Shield: "+energy;
  120.                 }
  121.                 xspeed = 0;
  122.                 yspeed = 0;
  123.                 hit_sound.start();
  124.                 wall._y = old_y;
  125.                 wall._x = old_x;
  126.                 bg._y = old_y;
  127.                 bg._x = old_x;
  128.             } else {
  129.                 xspeed = 0;
  130.                 yspeed = 0;
  131.                 splash._visible = false;
  132.                 if (level>1) {
  133.                     energy += 100;
  134.                     brakes += 100;
  135.                     start_time += 60000;
  136.                 } else {
  137.                     start_time = getTimer();
  138.                 }
  139.                 level++;
  140.                 count_down.energy_left.text = "Shield: "+energy;
  141.                 count_down.brake_left.text = "Brakes: "+brakes;
  142.                 count_down.energy_left.textColor = 0x00ff00;
  143.                 count_down.time_left.textColor = 0x00ff00;
  144.                 count_down.brake_left.textColor = 0x00ff00;
  145.                 position_bg(level);
  146.             }
  147.         } else {
  148.             old_x = wall._x+2*xspeed;
  149.             old_y = wall._y+2*yspeed;
  150.         }
  151.     } else {
  152.         // once the game is over
  153.         if (Key.isDown(Key.SPACE)) {
  154.             init_game();
  155.         }
  156.     }
  157. };
  158. function time_to_string(time_to_convert) {
  159.     elapsed_hours = Math.floor(time_to_convert/3600000);
  160.     remaining = time_to_convert-(elapsed_hours*3600000);
  161.     elapsed_minutes = Math.floor(remaining/60000);
  162.     remaining = remaining-(elapsed_minutes*60000);
  163.     elapsed_seconds = Math.floor(remaining/1000);
  164.     remaining = remaining-(elapsed_seconds*1000);
  165.     elapsed_fs = Math.floor(remaining/10);
  166.     if (elapsed_hours<10) {
  167.         hours = "0"+elapsed_hours.toString();
  168.     } else {
  169.         hours = elapsed_hours.toString();
  170.     }
  171.     if (elapsed_minutes<10) {
  172.         minutes = "0"+elapsed_minutes.toString();
  173.     } else {
  174.         minutes = elapsed_minutes.toString();
  175.     }
  176.     if (elapsed_seconds<10) {
  177.         seconds = "0"+elapsed_seconds.toString();
  178.     } else {
  179.         seconds = elapsed_seconds.toString();
  180.     }
  181.     if (elapsed_fs<10) {
  182.         hundredths = "0"+elapsed_fs.toString();
  183.     } else {
  184.         hundredths = elapsed_fs.toString();
  185.     }
  186.     return "Time: "+minutes+":"+seconds+":"+hundredths;
  187. }
  188. function position_bg(level) {
  189.     wall.gotoAndStop(level);
  190.     count_down.level_name.text = "Level "+level+": "+level_names[level-1];
  191.     wall._x = start_x[level-1];
  192.     wall._y = start_y[level-1];
  193.     bg._x = start_x[level-1];
  194.     bg._y = start_y[level-1];
  195. }
  196. function kira_die() {
  197.     gameover_sound.start();
  198.     kira._visible = false;
  199.     explosion._visible = true;
  200.     explosion.gotoAndPlay(1);
  201.     game_over_button._visible = true;
  202.     xspeed = 0;
  203.     yspeed = 0;
  204.     kira_playing = 0;
  205. }
  206. function init_game() {
  207.     level = 1;
  208.     elapsed_time = 0;
  209.     position_bg(level);
  210.     yspeed = 0;
  211.     xspeed = 0;
  212.     wind = 0.00;
  213.     power = 0.65;
  214.     gravity = 0.1;
  215.     upconstant = 0.75;
  216.     friction = 0.99;
  217.     energy = 100;
  218.     brakes = 100;
  219.     kira_playing = 1;
  220.     start_time = getTimer();
  221.     countdown = 60000;
  222.     kira._visible = true;
  223.     explosion._visible = false;
  224.     game_over_button._visible = false;
  225.     splash._visible = true;
  226.     with (count_down.brake_left) {
  227.         text = "Brakes: "+brakes;
  228.         textColor = 0x00ff00;
  229.     }
  230.     with (count_down.energy_left) {
  231.         text = "Shield: "+energy;
  232.         textColor = 0x00ff00;
  233.     }
  234.     with (count_down.time_left) {
  235.         textColor = 0x00ff00;
  236.     }
  237. }

There is nothing more to comment in my opinion, but if someone will ask for some explaination, I will be happy to spend some more words on it.

The topic I want to talk about now, is:

How did I design a level?

Levels are squares 570 pixels wide and 570 pixels tall, that are enlarged by 10 when in game.

In these squares, in the same level, I started drawing the "track" with the brush tool, and then I removed the drawing.

Let's see how: let's suppose we want to design the 11th level of the game: it's easy to follow these 10 steps:

Create a Tunnelball level

1: Select the wall movieclip by double clicking on it in the library window

2: Create a new empty keyframe in the 11th frame

3: Select the rectange tool

4: Draw a rectangle

5: Define its width and height as 570 pixels and position it at (-285,-285)

6: Select the brush tool

7: Draw the "track" over the rectangle

8: Delete the brush shape: you will delete a portion of the rectangle too!

9: Place the end movieclip on the same level

10: Since the movieclip will be resized by 10x, scale down the end movieclip at x=10, y=10

Congratulations!!

You have just created a track!

To play it, just add a value to the arrays at lines 31, 32 and 34 and you are ready to go!

So, I want your levels!!!

I am planning a sequel of Tunnelball (of course we will make it together as I will describe any new feature with a tutorial), so I need some tracks you will design!! Unleash your fantasy, design some nice tracks, save the .fla and send it to info@emanueleferonato.com.

Your name, along with your personal webpage, will be listed in the credit section of the game! And in this site too!!

Download the source code, leave a comment and remember I am waiting for your levels!

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
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.

17 Responses to “Tunnelball: design a level for this flash game”

  1. abhilash on March 24th, 2007 6:48 am

    Its very nice, but are these ‘creating a game’ tutorials are over??If yes then I will be waiting for line rider tuts

    THANX

  2. Emanuele Feronato on March 24th, 2007 1:31 pm

    No they aren’t over.

    We will create some more games with these basics

  3. mousey on March 24th, 2007 4:07 pm

    what will you cover in the next lineriider tutorail?

  4. Alex on March 24th, 2007 5:20 pm

    i dont like how you have a time limit and a damage limit,it makes the first lvl to hard.

    Ps.how can i show you my stuff?

  5. Emanuele Feronato on March 24th, 2007 8:54 pm

    Send it to my email info@emanueleferonato.com

  6. Random Web-Designer In Training on March 25th, 2007 1:09 am

    There isnt many people like you, Emanuele. Keep up the good work.

  7. abhilash on March 25th, 2007 5:37 pm

    please now post line rider part 5 I cant wait for it!

  8. Robin on March 27th, 2007 9:00 pm

    Too hard.

  9. kelso on April 4th, 2007 8:20 pm

    Dude:

    You are awesome. I have already created several games from your tutorials directly or indirectly for my kids to learn math,reading etc….

    I really appreciate what you are doing.
    I cannot say enough.

    Thanks

    kelso

  10. Black Cat on April 8th, 2007 7:59 am

    Every time I try to open the source files i get the message: “Unexpected file format.”

    How do I fix this?

  11. Callum on April 27th, 2007 10:53 pm

    I MADE A WICKED TRACK!!! :D

    I BET NOBODY CAN BEAT IT.

    Its in the shape of a smiley face

  12. Callum on April 27th, 2007 10:53 pm

    Ill email it to emanuele and hopfully he can post link here

  13. Father on May 8th, 2007 11:30 pm

    oh my goodness, you scared the shit out of both me and my bird with that KABOOM lol

  14. Sam on May 23rd, 2007 8:27 am

    How do you enlarge the level?

  15. n on January 6th, 2008 4:14 pm

    I dont under stand. It seems you began half way throgh.

Leave a Reply




Trackbacks

  1. Create a flash game like Security - part 1 at Emanuele Feronato on April 20th, 2007 11:51 am

    [...] To design a level, I suggest you not to draw some boxes around the screen. Draw instead a big square covering all the stage then remove the parts you want to be walkable. Refer about designing levels for the game Tunnelball in this tutorial for more information about this way of drawing levels (or become a regular reader of this blog…) [...]

  2. Using hotoshop to draw levels for Flash games at Emanuele Feronato on May 31st, 2007 5:45 pm

    [...] I was trying to draw a level for a Flash game like Tunnelball using Photoshop, and then import it into Flash. [...]