Flash game creation tutorial – part 5.3

March 14, 2007 by Emanuele Feronato
Filed Under Flash • 69 Comments 

Let's go with another step.

In this part, we'll learn how to (almost) complete our first game... a tunnel race game.

Read tutorials from 1 to 5.2 if you haven't done it already and follow me in the game creation.

I'll continue from the code optimization seen in part 5.2, to continue adding features to the scrolling game.

Adding a timer

If you plan to make a racing game, the timer is very important. Some of the topics covered in this example are taken from the Flash simple timer/countdown tutorial.

PLAIN TEXT
ACTIONSCRIPT:
  1. // attaching movies
  2. _root.attachMovie("kira", "kira", 8000, {_x:234, _y:159});
  3. _root.attachMovie("wall", "wall", 10000, {_x:240, _y:0, _width:5700, _height:5700});
  4. _root.attachMovie("bg", "bg", 2000, {_x:240, _y:0, _width:5700, _height:5700});
  5. _root.attachMovie("count_down", "count_down", 12000, {_x:0, _y:0});
  6. // kira setup
  7. yspeed = 0;
  8. xspeed = 0;
  9. wind = 0.00;
  10. power = 0.65;
  11. gravity = 0.1;
  12. upconstant = 0.75;
  13. friction = 0.99;
  14. // timer setup
  15. start_time = getTimer();
  16. countdown = 60000;
  17. kira.onEnterFrame = function() {
  18.     // timer
  19.     elapsed_time = getTimer()-start_time;
  20.     _root.count_down.time_left.text = time_to_string(_root.countdown-elapsed_time);
  21.     // keys
  22.     if (Key.isDown(Key.LEFT)) {
  23.         xspeed = xspeed-power;
  24.     }
  25.     if (Key.isDown(Key.RIGHT)) {
  26.         xspeed = xspeed+power;
  27.     }
  28.     if (Key.isDown(Key.UP)) {
  29.         yspeed = yspeed-power*upconstant;
  30.     }
  31.     if (Key.isDown(Key.DOWN)) {
  32.         yspeed = yspeed+power*upconstant;
  33.     }
  34.     // speed calculation  
  35.     xspeed = (xspeed+wind)*friction;
  36.     yspeed = yspeed+gravity;
  37.     if (xspeed>0) {
  38.         this.kira.gotoAndStop(1);
  39.     } else {
  40.         this.kira.gotoAndStop(2);
  41.     }
  42.     // screen update
  43.     _root.wall._y -= yspeed;
  44.     _root.wall._x -= xspeed;
  45.     _root.bg._y -= yspeed;
  46.     _root.bg._x -= xspeed;
  47.     // collision
  48.     if (_root.wall.hitTest(this._x, this._y, true)) {
  49.         xspeed = 0;
  50.         yspeed = 0;
  51.         _root.wall._x = 240;
  52.         _root.wall._y = 0;
  53.         _root.bg._x = 240;
  54.         _root.bg._y = 0;
  55.     }
  56. };
  57. function time_to_string(time_to_convert) {
  58.     elapsed_hours = Math.floor(time_to_convert/3600000);
  59.     remaining = time_to_convert-(elapsed_hours*3600000);
  60.     elapsed_minutes = Math.floor(remaining/60000);
  61.     remaining = remaining-(elapsed_minutes*60000);
  62.     elapsed_seconds = Math.floor(remaining/1000);
  63.     remaining = remaining-(elapsed_seconds*1000);
  64.     elapsed_fs = Math.floor(remaining/10);
  65.     if (elapsed_hours<10) {
  66.         hours = "0"+elapsed_hours.toString();
  67.     } else {
  68.         hours = elapsed_hours.toString();
  69.     }
  70.     if (elapsed_minutes<10) {
  71.         minutes = "0"+elapsed_minutes.toString();
  72.     } else {
  73.         minutes = elapsed_minutes.toString();
  74.     }
  75.     if (elapsed_seconds<10) {
  76.         seconds = "0"+elapsed_seconds.toString();
  77.     } else {
  78.         seconds = elapsed_seconds.toString();
  79.     }
  80.     if (elapsed_fs<10) {
  81.         hundredths = "0"+elapsed_fs.toString();
  82.     } else {
  83.         hundredths = elapsed_fs.toString();
  84.     }
  85.     return minutes+":"+seconds+":"+hundredths;
  86. }

Line 4: Nothing to do with the timer, but I added a background to the cavern. The way I added the background is the same I added the main cavern. Look at the depth (0)... the background is behind all other objects

Line 5: Here I add the movieclip that will contain the timer. Look at the depth (12000)... the timer is in front of all aother objects. In the timer object I have a textarea called time_left that will be updated. We will add all texts covered in this tutorial in the same way

Lines 15-16: Timer setup... I want the level to be completed in 60 secods = 60,000 milliseconds. Again I strongly recommend to read the Flash simple timer/countdown tut.

Line 19: Determining elapsed time

Line 20: The text area time_left inside the movieclip count_down is updated according to the function time_to_string (lines 56-87). You can find this function fully explained... guess where?... Yes, at Flash simple timer/countdown tutorial!

You will notice nothing happens if the time reaches zero... I wanted it to fully test the game. You hould always test the game in a "god mode" to verify all levels are designed correctly, then start testing it in "normal mode".

The energy

Now, let's imagine we do not want the player to die if he hits the wall, but we want instead he to lose "energy" or "shields" or "bananas" until it reaches zero.

PLAIN TEXT
ACTIONSCRIPT:
  1. // attaching movies
  2. _root.attachMovie("kira", "kira", 8000, {_x:234, _y:159});
  3. _root.attachMovie("wall", "wall", 10000, {_x:240, _y:0, _width:5700, _height:5700});
  4. _root.attachMovie("bg", "bg", 2000, {_x:240, _y:0, _width:5700, _height:5700});
  5. _root.attachMovie("count_down", "count_down", 12000, {_x:0, _y:0});
  6. // kira setup
  7. yspeed = 0;
  8. xspeed = 0;
  9. wind = 0.00;
  10. power = 0.65;
  11. gravity = 0.1;
  12. upconstant = 0.75;
  13. friction = 0.99;
  14. energy = 100;
  15. count_down.energy_left.text = "Shield left: "+energy;
  16. // timer setup
  17. start_time = getTimer();
  18. countdown = 60000;
  19. kira.onEnterFrame = function() {
  20.     // timer
  21.     elapsed_time = getTimer()-start_time;
  22.     _root.count_down.time_left.text = time_to_string(_root.countdown-elapsed_time);
  23.     // keys
  24.     if (Key.isDown(Key.LEFT)) {
  25.         xspeed = xspeed-power;
  26.     }
  27.     if (Key.isDown(Key.RIGHT)) {
  28.         xspeed = xspeed+power;
  29.     }
  30.     if (Key.isDown(Key.UP)) {
  31.         yspeed = yspeed-power*upconstant;
  32.     }
  33.     if (Key.isDown(Key.DOWN)) {
  34.         yspeed = yspeed+power*upconstant;
  35.     }
  36.     // speed calculation  
  37.     xspeed = (xspeed+wind)*friction;
  38.     yspeed = yspeed+gravity;
  39.     if (xspeed>0) {
  40.         this.kira.gotoAndStop(1);
  41.     } else {
  42.         this.kira.gotoAndStop(2);
  43.     }
  44.     // screen update
  45.     _root.wall._y -= yspeed;
  46.     _root.wall._x -= xspeed;
  47.     _root.bg._y -= yspeed;
  48.     _root.bg._x -= xspeed;
  49.     // collision
  50.     if (_root.wall.hitTest(this._x, this._y, true)) {
  51.         energy -= Math.round(Math.sqrt(xspeed*xspeed+yspeed*yspeed));
  52.         _root.count_down.energy_left.text = "Shield left: "+energy;
  53.         xspeed = 0
  54.         yspeed = 0
  55.         _root.wall._y = old_y;
  56.         _root.wall._x = old_x;
  57.         _root.bg._y = old_y;
  58.         _root.bg._x = old_x;
  59.     } else {
  60.         old_x = _root.wall._x+2*xspeed;
  61.         old_y = _root.wall._y+2*yspeed;
  62.     }
  63. };
  64. function time_to_string(time_to_convert) {
  65.     elapsed_hours = Math.floor(time_to_convert/3600000);
  66.     remaining = time_to_convert-(elapsed_hours*3600000);
  67.     elapsed_minutes = Math.floor(remaining/60000);
  68.     remaining = remaining-(elapsed_minutes*60000);
  69.     elapsed_seconds = Math.floor(remaining/1000);
  70.     remaining = remaining-(elapsed_seconds*1000);
  71.     elapsed_fs = Math.floor(remaining/10);
  72.     if (elapsed_hours<10) {
  73.         hours = "0"+elapsed_hours.toString();
  74.     } else {
  75.         hours = elapsed_hours.toString();
  76.     }
  77.     if (elapsed_minutes<10) {
  78.         minutes = "0"+elapsed_minutes.toString();
  79.     } else {
  80.         minutes = elapsed_minutes.toString();
  81.     }
  82.     if (elapsed_seconds<10) {
  83.         seconds = "0"+elapsed_seconds.toString();
  84.     } else {
  85.         seconds = elapsed_seconds.toString();
  86.     }
  87.     if (elapsed_fs<10) {
  88.         hundredths = "0"+elapsed_fs.toString();
  89.     } else {
  90.         hundredths = elapsed_fs.toString();
  91.     }
  92.     return "Time left: "+minutes+":"+seconds+":"+hundredths;
  93. }

Line 14: Set the starting energy at 100

Line 15: Display player energy on screen

Line 51: In case of collision, the player does not die but his energy drains according to player speed. The higher the speed, the bigger the damage

Line 55-58: wall and background are resetted to their last position where no collision was detected

Lines 59-62: if there wasn't a collision, save actual position (with a little offset due by player speed)

These last lines remind a bit the collision checking seen in flash draw game tutorial part 4.

Now, next feature...

The brakes

I want the player to have the capability of using brakes, even if for a limited amount of time.

PLAIN TEXT
ACTIONSCRIPT:
  1. // attaching movies
  2. _root.attachMovie("kira", "kira", 8000, {_x:234, _y:159});
  3. _root.attachMovie("wall", "wall", 10000, {_x:240, _y:0, _width:5700, _height:5700});
  4. _root.attachMovie("bg", "bg", 2000, {_x:240, _y:0, _width:5700, _height:5700});
  5. _root.attachMovie("count_down", "count_down", 12000, {_x:0, _y:0});
  6. // kira setup
  7. yspeed = 0;
  8. xspeed = 0;
  9. wind = 0.00;
  10. power = 0.65;
  11. gravity = 0.1;
  12. upconstant = 0.75;
  13. friction = 0.99;
  14. energy = 100;
  15. brakes = 100;
  16. count_down.energy_left.text = "Shield left: "+energy;
  17. count_down.brake_left.text = "Brakes left: "+brakes;
  18. // timer setup
  19. start_time = getTimer();
  20. countdown = 60000;
  21. kira.onEnterFrame = function() {
  22.     // timer
  23.     elapsed_time = getTimer()-start_time;
  24.     _root.count_down.time_left.text = time_to_string(_root.countdown-elapsed_time);
  25.     // keys
  26.     if (Key.isDown(Key.LEFT)) {
  27.         xspeed = xspeed-power;
  28.     }
  29.     if (Key.isDown(Key.RIGHT)) {
  30.         xspeed = xspeed+power;
  31.     }
  32.     if (Key.isDown(Key.UP)) {
  33.         yspeed = yspeed-power*upconstant;
  34.     }
  35.     if (Key.isDown(Key.DOWN)) {
  36.         yspeed = yspeed+power*upconstant;
  37.     }
  38.     if ((Key.isDown(Key.SPACE))and(brakes> 0)) {
  39.         yspeed = yspeed/2;
  40.         xspeed = xspeed/2;
  41.         brakes --;
  42.         count_down.brake_left.text = "Brakes left: "+brakes;
  43.     }
  44.     // speed calculation  
  45.     xspeed = (xspeed+wind)*friction;
  46.     yspeed = yspeed+gravity;
  47.     if (xspeed>0) {
  48.         this.kira.gotoAndStop(1);
  49.     } else {
  50.         this.kira.gotoAndStop(2);
  51.     }
  52.     // screen update
  53.     _root.wall._y -= yspeed;
  54.     _root.wall._x -= xspeed;
  55.     _root.bg._y -= yspeed;
  56.     _root.bg._x -= xspeed;
  57.     // collision
  58.     if (_root.wall.hitTest(this._x, this._y, true)) {
  59.         energy -= Math.round(Math.sqrt(xspeed*xspeed+yspeed*yspeed));
  60.         _root.count_down.energy_left.text = "Shield left: "+energy;
  61.         xspeed = 0
  62.         yspeed = 0
  63.         _root.wall._y = old_y;
  64.         _root.wall._x = old_x;
  65.         _root.bg._y = old_y;
  66.         _root.bg._x = old_x;
  67.     } else {
  68.         old_x = _root.wall._x+2*xspeed;
  69.         old_y = _root.wall._y+2*yspeed;
  70.     }
  71. };
  72. function time_to_string(time_to_convert) {
  73.     elapsed_hours = Math.floor(time_to_convert/3600000);
  74.     remaining = time_to_convert-(elapsed_hours*3600000);
  75.     elapsed_minutes = Math.floor(remaining/60000);
  76.     remaining = remaining-(elapsed_minutes*60000);
  77.     elapsed_seconds = Math.floor(remaining/1000);
  78.     remaining = remaining-(elapsed_seconds*1000);
  79.     elapsed_fs = Math.floor(remaining/10);
  80.     if (elapsed_hours<10) {
  81.         hours = "0"+elapsed_hours.toString();
  82.     } else {
  83.         hours = elapsed_hours.toString();
  84.     }
  85.     if (elapsed_minutes<10) {
  86.         minutes = "0"+elapsed_minutes.toString();
  87.     } else {
  88.         minutes = elapsed_minutes.toString();
  89.     }
  90.     if (elapsed_seconds<10) {
  91.         seconds = "0"+elapsed_seconds.toString();
  92.     } else {
  93.         seconds = elapsed_seconds.toString();
  94.     }
  95.     if (elapsed_fs<10) {
  96.         hundredths = "0"+elapsed_fs.toString();
  97.     } else {
  98.         hundredths = elapsed_fs.toString();
  99.     }
  100.     return "Time left: "+minutes+":"+seconds+":"+hundredths;
  101. }

Line 15: Set the starting amount of brakes to 100

Line 17: Display player brakes on screen

Line 38: Checking if the player is braking (or pressing spacebar...) and the player has brakes left

Lines 39-42: Player speed is reduced by a half, brakes are reduced and new brakes value is displayed on the screen

Now we have all the information required on screen. Time to show them in a clearer way.

Text styles

Let's see how to give some style to our texts

PLAIN TEXT
ACTIONSCRIPT:
  1. // attaching movies
  2. _root.attachMovie("kira", "kira", 8000, {_x:234, _y:159});
  3. _root.attachMovie("wall", "wall", 10000, {_x:240, _y:0, _width:5700, _height:5700});
  4. _root.attachMovie("bg", "bg", 2000, {_x:240, _y:0, _width:5700, _height:5700});
  5. _root.attachMovie("count_down", "count_down", 12000, {_x:0, _y:1});
  6. // kira setup
  7. yspeed = 0;
  8. xspeed = 0;
  9. wind = 0.00;
  10. power = 0.65;
  11. gravity = 0.1;
  12. upconstant = 0.75;
  13. friction = 0.99;
  14. energy = 100;
  15. brakes = 100;
  16. with (count_down.brake_left) {
  17.     text = "Brakes: "+brakes;
  18.     textColor = 0x00ff00;
  19.     background = true;
  20.     border = true;
  21.     borderColor = 0xffffff;
  22.     backgroundColor = 0x000000;
  23.     _alpha = 80;
  24. }
  25. with (count_down.energy_left) {
  26.     text = "Shield: "+energy;
  27.     textColor = 0x00ff00;
  28.     background = true;
  29.     border = true;
  30.     borderColor = 0xffffff;
  31.     backgroundColor = 0x000000;
  32.     _alpha = 80;
  33. }
  34. with (count_down.time_left) {
  35.     textColor = 0x00ff00;
  36.     background = true;
  37.     border = true;
  38.     borderColor = 0xffffff;
  39.     backgroundColor = 0x000000;
  40.     _alpha = 80;
  41. }
  42. // timer setup
  43. start_time = getTimer();
  44. countdown = 60000;
  45. kira.onEnterFrame = function() {
  46.     // timer
  47.     elapsed_time = getTimer()-start_time;
  48.     count_down.time_left.text = time_to_string(_root.countdown-elapsed_time);
  49.     // keys
  50.     if (Key.isDown(Key.LEFT)) {
  51.         xspeed = xspeed-power;
  52.     }
  53.     if (Key.isDown(Key.RIGHT)) {
  54.         xspeed = xspeed+power;
  55.     }
  56.     if (Key.isDown(Key.UP)) {
  57.         yspeed = yspeed-power*upconstant;
  58.     }
  59.     if (Key.isDown(Key.DOWN)) {
  60.         yspeed = yspeed+power*upconstant;
  61.     }
  62.     if ((Key.isDown(Key.SPACE)) and (brakes>0)) {
  63.         yspeed = yspeed/2;
  64.         xspeed = xspeed/2;
  65.         brakes--;
  66.         if (brakes<60) {
  67.             count_down.brake_left.textColor = 0xffff00;
  68.         }
  69.         if (brakes<30) {
  70.             count_down.brake_left.textColor = 0xff0000;
  71.         }
  72.         count_down.brake_left.text = "Brakes: "+brakes;
  73.     }
  74.     // speed calculation    
  75.     xspeed = (xspeed+wind)*friction;
  76.     yspeed = yspeed+gravity;
  77.     if (xspeed>0) {
  78.         this.kira.gotoAndStop(1);
  79.     } else {
  80.         this.kira.gotoAndStop(2);
  81.     }
  82.     // screen update
  83.     _root.wall._y -= yspeed;
  84.     _root.wall._x -= xspeed;
  85.     _root.bg._y -= yspeed;
  86.     _root.bg._x -= xspeed;
  87.     // collision
  88.     if (_root.wall.hitTest(this._x, this._y, true)) {
  89.         energy -= Math.round(Math.sqrt(xspeed*xspeed+yspeed*yspeed));
  90.         if (energy<60) {
  91.             count_down.energy_left.textColor = 0xffff00;
  92.         }
  93.         if (energy<30) {
  94.             count_down.energy_left.textColor = 0xff0000;
  95.         }
  96.         _root.count_down.energy_left.text = "Shield: "+energy;
  97.         xspeed = 0;
  98.         yspeed = 0;
  99.         _root.wall._y = old_y;
  100.         _root.wall._x = old_x;
  101.         _root.bg._y = old_y;
  102.         _root.bg._x = old_x;
  103.     } else {
  104.         old_x = _root.wall._x+2*xspeed;
  105.         old_y = _root.wall._y+2*yspeed;
  106.     }
  107. };
  108. function time_to_string(time_to_convert) {
  109.     elapsed_hours = Math.floor(time_to_convert/3600000);
  110.     remaining = time_to_convert-(elapsed_hours*3600000);
  111.     elapsed_minutes = Math.floor(remaining/60000);
  112.     remaining = remaining-(elapsed_minutes*60000);
  113.     elapsed_seconds = Math.floor(remaining/1000);
  114.     remaining = remaining-(elapsed_seconds*1000);
  115.     elapsed_fs = Math.floor(remaining/10);
  116.     if (elapsed_hours<10) {
  117.         hours = "0"+elapsed_hours.toString();
  118.     } else {
  119.         hours = elapsed_hours.toString();
  120.     }
  121.     if (elapsed_minutes<10) {
  122.         minutes = "0"+elapsed_minutes.toString();
  123.     } else {
  124.         minutes = elapsed_minutes.toString();
  125.     }
  126.     if (elapsed_seconds<10) {
  127.         seconds = "0"+elapsed_seconds.toString();
  128.     } else {
  129.         seconds = elapsed_seconds.toString();
  130.     }
  131.     if (elapsed_fs<10) {
  132.         hundredths = "0"+elapsed_fs.toString();
  133.     } else {
  134.         hundredths = elapsed_fs.toString();
  135.     }
  136.     return "Time: "+minutes+":"+seconds+":"+hundredths;
  137. }

Lines 16-24: Note how I use the with statement to change brake text attributes.

According to Adobe Livedocs, the attributes you may be interested in are:

_alpha:Number - Sets or retrieves the alpha transparency value of the text field.

background:Boolean - Specifies if the text field has a background fill.

backgroundColor:Number - The color of the text field background.

border:Boolean - Specifies if the text field has a border.

borderColor:Number - The color of the text field border.

filters:Array - An indexed array containing each filter object currently associated with the text field. (you can see some filters in action in draw game creation tutorial part 1)

html:Boolean - A flag that indicates whether the text field contains an HTML representation.

htmlText:String - If the text field is an HTML text field, this property contains the HTML representation of the text field's contents.

_rotation:Number - The rotation of the text field, in degrees, from its original orientation.

text:String - Indicates the current text in the text field.

textColor:Number - Indicates the color of the text in a text field.

_x:Number - An integer that sets the x coordinate of a text field relative to the local coordinates of the parent movie clip.

_y:Number - The y coordinate of a text field relative to the local coordinates of the parent movie clip.

Lines 25-33: Same thing with the enery text

Lines 34-41: Same thing with the timer text

Lines 66-71: If the brakes are damaged (<60) or critical (<30), I change brakes text color to yellow or red

Lines 90-95: Same thing with the energy text

Now we have a nice text representation... let's cover another thing...

Advancing levels

What kind of game do we have if we cannot advance levels? Now I am teaching you how to add new caves.

In the movieclip where you have the first cavern, simply add a frame and draw another cavern. You can add how many caverns you want, just remember to put a stop() in each frame and to add, in the end of the cave, a movieclip instanced as end

PLAIN TEXT
ACTIONSCRIPT:
  1. // attaching movies
  2. _root.attachMovie("kira", "kira", 8000, {_x:234, _y:159});
  3. _root.attachMovie("wall", "wall", 10000, {_width:5700, _height:5700});
  4. _root.attachMovie("bg", "bg", 2000, {_width:5700, _height:5700});
  5. _root.attachMovie("count_down", "count_down", 12000, {_x:0, _y:1});
  6. // kira setup
  7. start_x = new Array(240, -2160,-1400);
  8. start_y = new Array(0, 2700,2200);
  9. level = 1;
  10. position_bg(level);
  11. yspeed = 0;
  12. xspeed = 0;
  13. wind = 0.00;
  14. power = 0.65;
  15. gravity = 0.1;
  16. upconstant = 0.75;
  17. friction = 0.99;
  18. energy = 100;
  19. brakes = 100;
  20. with (count_down.brake_left) {
  21.     text = "Brakes: "+brakes;
  22.     textColor = 0x00ff00;
  23.     background = true;
  24.     border = true;
  25.     borderColor = 0xffffff;
  26.     backgroundColor = 0x000000;
  27.     _alpha = 80;
  28. }
  29. with (count_down.energy_left) {
  30.     text = "Shield: "+energy;
  31.     textColor = 0x00ff00;
  32.     background = true;
  33.     border = true;
  34.     borderColor = 0xffffff;
  35.     backgroundColor = 0x000000;
  36.     _alpha = 80;
  37. }
  38. with (count_down.time_left) {
  39.     textColor = 0x00ff00;
  40.     background = true;
  41.     border = true;
  42.     borderColor = 0xffffff;
  43.     backgroundColor = 0x000000;
  44.     _alpha = 80;
  45. }
  46. // timer setup
  47. start_time = getTimer();
  48. countdown = 60000;
  49. kira.onEnterFrame = function() {
  50.     // timer
  51.     elapsed_time = getTimer()-start_time;
  52.     count_down.time_left.text = time_to_string(_root.countdown-elapsed_time);
  53.     // keys
  54.     if (Key.isDown(Key.LEFT)) {
  55.         xspeed = xspeed-power;
  56.     }
  57.     if (Key.isDown(Key.RIGHT)) {
  58.         xspeed = xspeed+power;
  59.     }
  60.     if (Key.isDown(Key.UP)) {
  61.         yspeed = yspeed-power*upconstant;
  62.     }
  63.     if (Key.isDown(Key.DOWN)) {
  64.         yspeed = yspeed+power*upconstant;
  65.     }
  66.     if ((Key.isDown(Key.SPACE)) and (brakes>0)) {
  67.         yspeed = yspeed/2;
  68.         xspeed = xspeed/2;
  69.         brakes--;
  70.         count_down.brake_left.textColor = 0x00ff00;
  71.         if (brakes<60) {
  72.             count_down.brake_left.textColor = 0xffff00;
  73.         }
  74.         if (brakes<30) {
  75.             count_down.brake_left.textColor = 0xff0000;
  76.         }
  77.         count_down.brake_left.text = "Brakes: "+brakes;
  78.     }
  79.     // speed calculation      
  80.     xspeed = (xspeed+wind)*friction;
  81.     yspeed = yspeed+gravity;
  82.     if (xspeed>0) {
  83.         this.kira.gotoAndStop(1);
  84.     } else {
  85.         this.kira.gotoAndStop(2);
  86.     }
  87.     // screen update
  88.     _root.wall._y -= yspeed;
  89.     _root.wall._x -= xspeed;
  90.     _root.bg._y -= yspeed;
  91.     _root.bg._x -= xspeed;
  92.     // collision
  93.     if (_root.wall.hitTest(this._x, this._y, true)) {
  94.         if (!_root.wall.end.hitTest(this._x, this._y, true)) {
  95.             energy -= Math.round(Math.sqrt(xspeed*xspeed+yspeed*yspeed));
  96.             count_down.energy_left.textColor = 0x00ff00;
  97.             if (energy<60) {
  98.                 count_down.energy_left.textColor = 0xffff00;
  99.             }
  100.             if (energy<30) {
  101.                 count_down.energy_left.textColor = 0xff0000;
  102.             }
  103.             count_down.energy_left.text = "Shield: "+energy;
  104.             xspeed = 0;
  105.             yspeed = 0;
  106.             _root.wall._y = old_y;
  107.             _root.wall._x = old_x;
  108.             _root.bg._y = old_y;
  109.             _root.bg._x = old_x;
  110.         } else {
  111.             xspeed = 0;
  112.             yspeed = 0;
  113.             level++;
  114.             energy += 100;
  115.             brakes += 100;
  116.             start_time += 60000;
  117.             count_down.energy_left.textColor = 0x00ff00;
  118.             count_down.brake_left.text = "Shield: "+energy;
  119.             count_down.energy_left.text = "Shield: "+energy;
  120.             count_down.brake_left.text = "Brakes: "+brakes;
  121.             position_bg(level);
  122.         }
  123.     } else {
  124.         old_x = _root.wall._x+2*xspeed;
  125.         old_y = _root.wall._y+2*yspeed;
  126.     }
  127. };
  128. function time_to_string(time_to_convert) {
  129.     elapsed_hours = Math.floor(time_to_convert/3600000);
  130.     remaining = time_to_convert-(elapsed_hours*3600000);
  131.     elapsed_minutes = Math.floor(remaining/60000);
  132.     remaining = remaining-(elapsed_minutes*60000);
  133.     elapsed_seconds = Math.floor(remaining/1000);
  134.     remaining = remaining-(elapsed_seconds*1000);
  135.     elapsed_fs = Math.floor(remaining/10);
  136.     if (elapsed_hours<10) {
  137.         hours = "0"+elapsed_hours.toString();
  138.     } else {
  139.         hours = elapsed_hours.toString();
  140.     }
  141.     if (elapsed_minutes<10) {
  142.         minutes = "0"+elapsed_minutes.toString();
  143.     } else {
  144.         minutes = elapsed_minutes.toString();
  145.     }
  146.     if (elapsed_seconds<10) {
  147.         seconds = "0"+elapsed_seconds.toString();
  148.     } else {
  149.         seconds = elapsed_seconds.toString();
  150.     }
  151.     if (elapsed_fs<10) {
  152.         hundredths = "0"+elapsed_fs.toString();
  153.     } else {
  154.         hundredths = elapsed_fs.toString();
  155.     }
  156.     return "Time: "+minutes+":"+seconds+":"+hundredths;
  157. }
  158. function position_bg(level) {
  159.     wall.gotoAndStop(level);
  160.     wall._x = start_x[level-1];
  161.     wall._y = start_y[level-1];
  162.     bg._x = start_x[level-1];
  163.     bg._y = start_y[level-1];
  164. }

Line 7: array with the 3 _x starting position of the level walls

Line 8: array with the 3 _y starting position of the level walls

Line 9: initializing starting level to 1

Line 10: calling the position_bg function. This function, located at lines 158-164, simply performs a gotoAndStop to the current level (frame) and places walls and backgrounds in their starting positions (declared in lines 7 and 8) according to the level

Line 94: When the player hits the wall, another test is performed to see if the player is hitting the end. If not, the game continues in the same way seen previously

Lines 110-122: If the player reached the exit, xspeed and yspeed are set to zero, level is increased, time, brakes and energy are increased by a bonus and the text on screen are updated. Finally, the position_bg function is called again.

Can you beat level 3?

Well, how you may see, I am designing a cavern racing game. Do you want to be part of it? You can! Soon you will find everything you need to design a level or more.

Meanwhile, download all source examples and have fun... until next tut...

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

69 Responses to “Flash game creation tutorial – part 5.3”

  1. abhilash on March 14th, 2007 2:23 pm

    nice tut can’t wait for the next!

  2. Joseph on March 14th, 2007 10:38 pm

    i want to make a flash game very similar to this one:
    http://www.adultswim.com/games/inuyasha_demon/index.html?showId=324233&name=Inuyasha&timezone=EST

    as it is somewhat different from the tutorial i was wondering if you could give me some tips. or maybe a jump start. or maybe a simple tutorial. o.o

  3. abhilash on March 15th, 2007 7:39 am

    may you should stop using the method of assigning actions to frame becoze the earlier method was a way easier than this.

  4. mousey on March 16th, 2007 12:02 am

    Ace, Carn’t Wait for the next Step onto making an ultimate game, ! qucik question when the shield get to 0 it dose not re-set

    how could you fix this??

  5. Andrej on March 17th, 2007 2:51 pm

    It mai saund stupid but i can`t understend wat prigram siould we youse to make this kined of game. maibe you can tell me with is beater to download

  6. mousey on March 17th, 2007 11:54 pm

    The program is Macromedia Flash!

  7. jordanleffl on March 18th, 2007 9:09 am

    yes it is macromedia flash and sorry to say but you cannot download flash pro 8 which you need. you need to buy the whole thing for
    $300-$600 with a key so sorry.

  8. sdobson on March 19th, 2007 11:20 pm

    i’ve tested my game in hero mode. I just need to know how to go to a new fram when timer reaches 0. Please!

  9. hasna on March 20th, 2007 8:51 pm

    @sdobson: idont know relly know but if the timmer is a textbox take this code
    if (_root.texboxname

  10. hasna on March 20th, 2007 8:54 pm

    eee on my computer the code didnt come up so i post it agian
    if(_root.textboxname

  11. Itsame on March 28th, 2007 7:19 pm

    yo i got some questions for ya email me plz

  12. eblup on March 29th, 2007 3:57 am

    hi can you let theis people think how to make things for themself i made my own jumping code and its beater than any youve ever seen

  13. baris on March 30th, 2007 11:55 pm

    Very nice… is there a way you can provide the connection parameters if we want to get the position of movie clips from a php page? maybe with xml? or nay other way?
    lets say we have a chess setup already in a database, with columns, rows, and piece types…

  14. Justin on April 1st, 2007 8:34 am

    Is there anyway in which to make the character so that when it hits into the wall it bounces off but from the edge and not the center of the character?

  15. eblup on April 1st, 2007 1:32 pm

    to Joseph hey i can help you make a game but ill only help you make 1 enemy and 1 guy and no extra card evrey level so take the offer?

  16. Chris on April 4th, 2007 9:07 pm

    Great tutorial, but at the part where you set the alpha of the
    text (time left, energy, brake) I just couldn’t get it to work no matter what I tried. But I did get it to work by setting the blend mode of my three movieclips to layer… Can anyone explain why this works?

  17. Black Cat on April 7th, 2007 11:35 am

    I can’t get the code for changing the frame when the timer reaches zero to work. If I use the code
    if (_root.textboxname = 0){
    gotoAndStop(”frame”)
    }
    it just sets the timer to zero. Why is this happening? (note the code is nestled in the same onClipEvent(enterFrame) handler as everything else, if this makes a difference)

  18. Black Cat on April 8th, 2007 7:26 am

    Also, what is the code for scaling the size of the level?

  19. Yuki Sohma on April 10th, 2007 9:36 pm

    Very nice tutorial, I think everyone here appreicates your easy to understand and fun tutorials. Keep it going man!!!

  20. Gilberto on April 15th, 2007 7:42 pm

    Hi Emanuele Feronato. Uhm, I have a problem with my game… You see, I’m making a game (in flash MX, it uses flash player 6.0) and I want it to look like a Crono Trigger… well my problem is that I want to include a lot of movie clips in the background and I’m using 2 kind of movement (in the center of the screen, the character changes its position x, y and when it hits the edge of the screen, then the background moves)… When I do so, the character and the bachground moves too slowly. I tried to change the vector images to GIF and PNG images but it’s just the same… I’d really appreciate if you answer to my mail dude. By the way, I found your tutorial very useful. Thanks for transmiting your knowledge about flash, I’m sure this will helkp many people. Well, see you.

  21. Niall on April 17th, 2007 6:09 pm

    How would you make a game like security 2?

  22. Emanuele Feronato on April 17th, 2007 7:23 pm

    Did not know about this game… but it rocks!
    Expect a tutorial very soon.

  23. Niall on April 18th, 2007 10:53 am

    yey!

  24. leo on April 22nd, 2007 5:56 pm

    Can somebody please tell me how to make a couter counting up(a stopwatch)
    i guess its quite easy to do but im only a beginner so i dont have
    a clue.
    please reply to leoleo999@hotmail.co.uk

  25. Flanture on April 24th, 2007 9:41 pm

    Just wanted to say hi !
    Downloaded all tutorials, will enjoy.
    flanture
    [flash adventure]

  26. JectCartoon on May 2nd, 2007 3:20 am

    to jordanleffl:
    You can actually download Macromedia Flash Pro 8, you just have to download first “Ares”, then, with this one, download the program, and finally, the serial number…

    Hey, how can I re-set the game once the shield gets to “0″???

  27. Guest on May 5th, 2007 7:08 am

    Can’t see the swf file, its black.

  28. mickyas on May 11th, 2007 7:07 pm

    how do u test the game u made.

  29. Jcman on May 14th, 2007 6:34 am

    Hey, I have 2 big question and you surely know the answers.

    *What is the actionscript I should put if I want to go to another frame or scene when all the enemies are dead?????
    and
    *I know how to “kill” enemies when you fire at them, but how do I do to kill them only after 2 shots??????

    I hope you answer me

  30. l1ghty on May 27th, 2007 1:11 am

    You can simply add energy to the enemies and “kill” them when it is over.
    Very easy way to do that is to add some variables:
    _root.onLoad = function() {
    enemyCount = 50; // if you have 50 enemies
    }
    and then for each killed enemy do enemyCount–; and then check for the number of enemies and if it is zero jump to frame 10 for example ;)
    then for each enemy add his nrg and subtract 1 for each hitTest(), and when enemy energy reaches 0 “kill” him.
    if (evilNRG == 0) {
    this.removeMovieClip();
    enemyCount–;
    }

  31. happytodd on June 4th, 2007 10:28 am

    Im going to make a game quite similiar to this with more pixel graphics, and a gender selection and all I just need to be more advanced in actionscript im a noob at this.

  32. happytodd on June 4th, 2007 1:49 pm

    Ive tried following these steps and Im not as good as I believed I was. With pretty much the first step everytime I test movie (ctrl enter) and I get 2 errors. But it does work but very very jumpy. 2nd im having trouble getting the yellow circles the collecting coins to work. Please help guys email me happytodd@ozemail.com.au

  33. Rick on July 19th, 2007 8:40 pm

    Great tutorial series!

    Is there a Pool Table (Billiard) tutorial on its way? (or does one already exist?)

  34. BoJaN on July 20th, 2007 6:46 am

    ok i got to 5.2 and it just stopped working and i dont see any of the games here either, copy and pasting the code(taking out the line numbers and fixing the formatting) doesnt work either, it doesnt create anything on the stage…

  35. galaxy on July 29th, 2007 10:28 pm

    huh..
    your tutorial is really good!
    i am trying to code something myself.
    its a lil different then your game i have a problem. here is the code:

    if (_root.map.rightwall.hitTest(_x, _y, true)) {
    _root.map._x = power;
    }
    \—\
    if (_root.map.wall1.hitTest(_x, _y, true)) {
    _root.map._x = power;
    _root.map._y = power;
    }

    well it only test 1 named mc that is inside another mc (map mc).

    any solution or ideas how to make it work?

  36. David on September 28th, 2007 10:53 pm

    I really dig what you’re doing, the only thing is how do I make it so that the line that is drawn is at a lower depth than the other layers? I dont like how you can write over “Draw a line here” box.

    Any help is appreciated!

    1billioN!

  37. chupy on October 1st, 2007 1:18 pm

    hi.. im using flash MX.. may i know wat version u r using? coz i cant open d file tat downloaded from this website…

    or any1 whoever downloaded this project and save it as MX file? pls help me…

    send to chupy_fish@hotmail.com (msn also can)

  38. peter on October 4th, 2007 10:48 pm

    my screens are black 2 it says movie not loaded when i right click it, i’ve renewed the page but nothing.

  39. Aukatrau on October 14th, 2007 3:11 am

    yo peter. I’m having the same problem. Probably the flash animations got off of the server.

  40. Rapchik Programmer on November 9th, 2007 10:09 pm

    I am just getting into flash game programming from 3d game programming and this is one of the best tutorial i have seen yet.. It would be better to update it to action script 3 though..

  41. Umer on February 22nd, 2008 5:40 pm

    To understand this we should be able to understand Math fucntions and i gave up

  42. Goinginsane on February 22nd, 2008 9:18 pm

    YES! Emanuele, I have a small favor to ask of you. Would you plese create a FROGGER tutorial. litertaly no one has created one!
    Thank you for the tutorials!

  43. Brendan on March 15th, 2008 5:32 am

    I know it wouldn’t be for a while (Even if you did jump to it now, I’d probably be totally lost) but it would be cool if you’d show how to make… like, for example, a first person shooter. Just a thought.

  44. Ruiqi Mao on March 22nd, 2008 6:13 am

    I made it! I got infinite time, shield, and brakes! Woo-hoo! :)

  45. Pamela on March 23rd, 2008 4:50 am

    same here

  46. daniel10111 on March 23rd, 2008 8:38 am

    I’ll stick to java

  47. Splashy5 on April 15th, 2008 5:02 pm

    How do you make it so when the sheild gets to zero, you die…well go to another frame.

  48. Splashy5 on April 15th, 2008 5:08 pm

    or when the timer ends…

  49. Taylor on May 1st, 2008 6:39 pm

    Flash tuts seem to be black…can’t see them???

  50. Goat on May 7th, 2008 8:10 pm

    Haha, yes, i finally beat level three. I’m also making a sidescroller, kind of like Aegis wing*, and i was wondering how to make weapons and stuff, but TY for all the help, it’s AWESOME!.
    *Aegis Wing, is an X-Box live Arcade game, for all of you who don’t know.

  51. Goat on May 12th, 2008 8:06 pm

    Okay, i seriously loved this Belissima tutorial, however i was wondering something. How on earth do you change the controls from being just the arrow keys, to the WASD format we see so often? I’v made a two-player game, but can’t get any other keys to work so well, one configuration is uncomfortably close to player 1, and the other one is all vertical button alignment. Thanks for the help though, much appreciated. ROCK ON FERONATO!!!

  52. for Black Cat on May 20th, 2008 8:59 pm

    Hey -Black cat- you make want to use:
    if (_root.textboxname == 0){
    gotoAndStop(”frame”)
    }
    ———————————-
    You were seting the textboxname value to zero.
    “==” test for equality
    “=” sets the value

  53. Sant on July 4th, 2008 8:02 pm

    hey how can i send you my game.

  54. Malboro Jones on September 19th, 2008 6:45 pm

    cant see the game at all?

  55. julian on October 16th, 2008 9:16 am

    hi,

    on the scrolling level
    how do you make the end?
    because when the player hits the end it just goes back to the start.
    can you help me?

  56. ... on November 2nd, 2008 12:44 am

    flash movies do not load…

  57. Sergey on November 6th, 2008 12:43 pm

    Are these flash clips compatible with flash player 10? They don’t load

  58. Vikesh on December 20th, 2008 9:35 pm

    Thanks for the tutorial. It was awesome to say the least. Learnt lots of stuff from it. You can make it a little more lucid for the absolute beginners by specifying where exactly the script has to be entered at various places.

  59. William on January 12th, 2009 1:51 am

    I created a running sprite animation from a sprite sheet, and copied the code from the 1st page of the hero to it, so i could move it. But it would be nice if you could help by creating a code for ground that he could walk on instead of being sent to the middle of the screen when the ground is touched.
    thanks!

  60. Black Dragon on January 26th, 2009 2:08 pm

    coolll!!!!!!!!!!!

  61. I0wrld3r on June 22nd, 2009 4:58 am

    Hey, uhhm… I got to level three. Finished it too.

    Mainly because it’s still on god mode on my browser, and now when I hit the exit, my shield + brakes go up. And time, but that was screwed anyway.

Leave a Reply




Trackbacks

  1. Flash game creation tutorial - part 1 at Emanuele Feronato on March 14th, 2007 12:51 pm

    [...] March 14th update: part 5.3 released. March 3rd update: part 5.2 released. February 9th update: part 5.1 released. December 31st update: 5th part released. December 23rd update: 4th part released. December 6th update: 3rd part released. November 18th update: 2nd part released. [...]

  2. Flash game creation tutorial - part 3 at Emanuele Feronato on March 14th, 2007 12:52 pm

    [...] March 14th update: part 5.3 released. March 3rd update: part 5.2 released. February 9th update: part 5.1 released. December 31st update: 5th part released. December 23rd update: 4th part released. [...]

  3. Flash game creation tutorial - part 4 at Emanuele Feronato on March 14th, 2007 12:53 pm

    [...] March 14th update: part 5.3 released. March 3rd update: part 5.2 released. February 9th update: part 5.1 released. December 31st update: 5th part released. [...]

  4. Flash game creation tutorial - part 5.1 at Emanuele Feronato on March 14th, 2007 12:53 pm

    [...] March 14th update: part 5.3 released. March 3rd update: part 5.2 released. [...]

  5. Flash game creation tutorial - part 5.2 at Emanuele Feronato on March 14th, 2007 12:53 pm

    [...] March 14th update: part 5.3 released. [...]

  6. Flash game creation tutorial - part 5 at Emanuele Feronato on March 14th, 2007 12:57 pm

    [...] March 14th update: part 5.3 released. March 3rd update: part 5.2 released. February 9th update: part 5.1 released. [...]

  7. Flash game creation tutorial - part 2 at Emanuele Feronato on March 14th, 2007 12:58 pm

    [...] March 14th update: part 5.3 released. March 3rd update: part 5.2 released. February 9th update: part 5.1 released. December 31st update: 5th part released. December 23rd update: 4th part released. December 6th update: 3rd part released. [...]

  8. A Gem of Flash Game Tutorials | Newbie Game Programmers on December 17th, 2007 4:23 pm

    [...] Flash game creation tutorial – Part 1 :: Part 2 :: Part 3 :: Part 4 :: Part 5 :: Part 5.1 :: Part 5.2 :: Part 5.3 [...]

Posts