Create a Flash game like Metro Siberia Underground - Part 4

February 5, 2008 by Emanuele Feronato
Filed Under Flash, Game design •  

Multipart tutorial: available parts 1, 2, 3, 4 ,5

In this 4th part I'll cover the code written in 3rd part. You should read parts 1 and 2 too, because I will comment only the new code.

For a better understanding, I'll re-publish the code

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.filters.GlowFilter;
  2. var ship_filter:GlowFilter = new GlowFilter(0x00ff00, 0.8, 4, 4, 2, 3, false, false);
  3. var smoke_filter:GlowFilter = new GlowFilter(0xff0000, 0.8, 4, 4, 2, 3, false, false);
  4. var tunnel_filter:GlowFilter = new GlowFilter(0xffff00, 0.8, 4, 4, 2, 3, false, false);
  5. var fuel_filter:GlowFilter = new GlowFilter(0x00ffff, 0.8, 4, 4, 2, 3, false, false);
  6. var rock_filter:GlowFilter = new GlowFilter(0xffffff, 0.8, 4, 4, 2, 3, false, false);
  7. var score_filter:GlowFilter = new GlowFilter(0xff00ff, 0.8, 2, 4, 2, 3, false, false);
  8. gravity = 0.1;
  9. thrust = 0.25;
  10. yspeed = 0;
  11. xspeed = 5;
  12. distance = 0;
  13. smoke_interval = 10000;
  14. frames_passed = 0;
  15. tunnel_height = 150;
  16. fuel_freq = 10;
  17. gasoline = 500;
  18. rock_freq = 50;
  19. engines = false;
  20. _root.attachMovie("ship", "ship", _root.getNextHighestDepth(), {_x:150, _y:200});
  21. _root.createEmptyMovieClip("fuel_movie", _root.getNextHighestDepth());
  22. _root.createEmptyMovieClip("deadly_movie", _root.getNextHighestDepth());
  23. _root.attachMovie("score", "score", _root.getNextHighestDepth());
  24. ship.filters = new Array(ship_filter);
  25. score.filters = new Array(score_filter);
  26. ship.onEnterFrame = function() {
  27.     score.sc.text = "Distance: "+distance+" - "+"Fuel: "+gasoline;
  28.     if ((gasoline>0)and(engines)) {
  29.         yspeed -= thrust;
  30.         smoke_interval -= 0.25;
  31.         gasoline -= 1;
  32.     }
  33.     if (Math.random()*1000<fuel_freq) {
  34.         fuel = fuel_movie.attachMovie("fuel", "fuel"+fuel_movie.getNextHighestDepth(), fuel_movie.getNextHighestDepth(), {_x:510, _y:Math.random()*400+50});
  35.         fuel.filters = new Array(fuel_filter);
  36.         fuel.onEnterFrame = function() {
  37.             this._x -= (xspeed*1.2);
  38.             dist_x = ship._x+28*Math.cos(angle)-this._x;
  39.             dist_y = ship._y+28*Math.sin(angle)-this._y;
  40.             dist = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
  41.             if (dist<10) {
  42.                 gasoline += 100;
  43.                 this.removeMovieClip();
  44.             }
  45.             if (this._x<-10) {
  46.                 this.removeMovieClip();
  47.             }
  48.         };
  49.     }
  50.     if (Math.random()*1000<rock_freq) {
  51.         rock = deadly_movie.attachMovie("rock", "rock"+deadly_movie.getNextHighestDepth(), deadly_movie.getNextHighestDepth(), {_x:510, _y:Math.random()*400+50, _rotation:Math.random()*360});
  52.         rock.filters = new Array(rock_filter);
  53.         rock.onEnterFrame = function() {
  54.             this._x -= xspeed;
  55.             if (this._x<-10) {
  56.                 this.removeMovieClip();
  57.             }
  58.         };
  59.     }
  60.     yspeed += gravity;
  61.     this._y += yspeed;
  62.     angle = Math.atan2(yspeed, xspeed);
  63.     this._rotation = angle*180/Math.PI;
  64.     frames_passed++;
  65.     distance += xspeed;
  66.     if (frames_passed>=smoke_interval) {
  67.         sm = _root.attachMovie("smoke", "smoke"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:this._x-2, _y:this._y});
  68.         sm.filters = new Array(smoke_filter);
  69.         sm.onEnterFrame = function() {
  70.             this._x -= xspeed;
  71.             this._width += 0.2;
  72.             this._height += 0.2;
  73.             this._alpha -= 2;
  74.             if (this._alpha<=0) {
  75.                 this.removeMovieClip();
  76.             }
  77.         };
  78.         frames_passed = 0;
  79.     }
  80.     if ((this._y>400) or (this._y<0) or deadly_movie.hitTest(this._x+28*Math.cos(angle), this._y+28*Math.sin(angle), true) or deadly_movie.hitTest(this._x+8*Math.cos(angle+Math.PI/2), this._y+8*Math.sin(angle+Math.PI/2), true) or deadly_movie.hitTest(this._x+8*Math.cos(angle-Math.PI/2), this._y+8*Math.sin(angle-Math.PI/2), true)) {
  81.         yspeed = 0;
  82.         this._y = 200;
  83.         gasoline = 500;
  84.         distance = 0;
  85.         deadly_movie.removeMovieClip();
  86.         fuel_movie.removeMovieClip();
  87.         _root.createEmptyMovieClip("fuel_movie", _root.getNextHighestDepth());
  88.         _root.createEmptyMovieClip("deadly_movie", _root.getNextHighestDepth());
  89.     }
  90. };
  91. _root.onMouseDown = function() {
  92.     engines = true;
  93.     smoke_interval = 10;
  94. };
  95. _root.onMouseUp = function() {
  96.     engines = false;
  97.     smoke_interval = 100000;
  98. };

Lines 5-7: New filters used for the rock object (the white square), the fuel object (the blue circle) and the score written at the upper left corner. Since there isn't any tunnel in this example, you can remove line 4 if you want

Line 15: You can remove this line too if you want

Line 16: A variable that determines the fuel spawn frequency. Higher value means higher freq

Line 17: This is the amount of gasoline in your ship

Line 18: A variable that determines the rock spawn frequency... same thing as the fuel one seen at line 16

Line 21: Creating a new movieclip to host all fuel cans.

Line 22: New movieclip to host all rocks

Line 23: Attaching the score movieclip

Line 25: Applying the filter to score movieclip

Line 27: Showing distance traveled and remaining fuel

Line 28: As you can see in the if statement, now you must have gasoline in order to give thrust to your spaceship

Line 31: Obviously giving thrust will cost you some gasoline...

Line 33: Checking if it's time to spawn a can of gasoline

Line 34: if true, then attach a fuel movieclip in the game at a random position

Line 35: Applying the filter to fuel movieclip

Line 36: Function to be executed by the fuel tank at every frame

Line 37: Moving the fuel tank according to ship's speed. Notice that there is a 1.2 multiplier to make the fuel move faster than rocks

Lines 38-40: Calculating the distance from the head of the spaceship and the centre of the fuel tank using trigonometry. More information about trigonometry at Create a flash draw game like Line Rider or others - part 3. I want the gasoline to be collected only with the head of the ship, to give the game some kind of "realism"

Lines 41-44: If the distance is less than 10 (the radius of the gasoline tank), then add 100 units of gasoline and remove the fuel tank

Lines 45-47: If the fuel tank leaves the game to the left, then remove it

Line 50: Checking if it's time to spawn an asteroid (a rock)

Line 51: if true, then attach a rock movieclip in the game at a random position wiht a random rotation

Line 52: Applying the filter to rock movieclip

Line 53: Function to be executed by the rock at every frame

Lines 54-57: Moving the rock according to ship's speed. If the rock leaves the game to the left, then remove it

Lines 80-89: Checking if the ship hits the rocks or goes too high or too low... if true, resetting the game

That's all...

Multipart tutorial: available parts 1, 2, 3, 4 ,5

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 (1 votes, average: 5 out of 5)
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.

13 Responses to “Create a Flash game like Metro Siberia Underground - Part 4”

  1. Xavi on February 5th, 2008 5:55 pm

    Wait, so this is all the code for for parts 1-3?
    does this have any different code from part 3?

  2. Ed on February 5th, 2008 6:21 pm

    Lol what was the point in part 3 then?

  3. Goinginsane on February 5th, 2008 9:05 pm

    No offense Emanuele. Most of your tutorials have helped me immensly. But this one doesnt seem to meet the par. It is more suited for those of more expeience with flash. What about us? The noobs. What happened to the step by step instructions that helped me out so much on other tutorials. I am sorry if that seemed a bit harsh….I have been working on this game with no avail for several weaks.

  4. Gabriel on February 6th, 2008 1:20 am

    I agree with goinginsane (lol?)… Iºll do a game with that…

  5. robby on February 6th, 2008 1:49 am

    emanuele will you make a tutorial on how to make a game like coolio niato’s Rhythm Fireworks one of these days? http://www.kongregate.com/games/Coolio_Niato/rhythm-fireworks-2

    I really want to try and make a music game :)thanxs

  6. Colin on February 7th, 2008 4:24 pm

    sorry if it seems like a bit of a stupid question Emanuele but what does the original movie clip for the distance and the gasoline consist of? would it just be a movie clip of the number 0 or a movie clip of numbers counting which then gets loaded throughout the game?

    Thanks for any help.

  7. Colin on February 7th, 2008 4:26 pm

    Ed and Xavi this is exactly the same code as part three just with comments underneath explaining what all the code does and how it works as explanations were not included in part three.

  8. The Moth on February 8th, 2008 2:03 am

    Hey, Emanuele. Great tut. The only problem I am having is I can’t get the score to show up. I made the score movieclip, but I can’t get it to display.

    Any help would be appreciated.

  9. Create a Flash game like Metro Siberia Underground - Part 5 : Emanuele Feronato - italian geek and PROgrammer on February 13th, 2008 6:52 pm

    [...] tutorial: available parts 1, 2, 3, 4 [...]

  10. Create a Flash game like Metro Siberia Underground - Part 3 : Emanuele Feronato - italian geek and PROgrammer on February 13th, 2008 6:56 pm

    [...] tutorial: available parts 1, 2, 3, 4 [...]

  11. Create a Flash game like Metro Siberia Underground - Part 2 : Emanuele Feronato - italian geek and PROgrammer on February 13th, 2008 6:58 pm

    [...] tutorial: available parts 1, 2, 3, 4 [...]

  12. Zawa on February 26th, 2008 12:14 pm

    Thanks a lot for this tutorial Emanuele. I love this site so much.

    http://zawa.blogsome.com

  13. lemonsrock on March 11th, 2008 7:51 pm

    gr8 tutorial,like most others. Except when i tried tower defence part 2 it didnt work plz help me out.
    Thanks :)

Leave a Reply