Create a Flash game like Metro Siberia Underground

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

I was quite impressed of a new game called Metro Sibera Underground... a game with a very simple concept, simple graphics but excellent level design.

Metro Siberia Underground

Metro Sibera Underground (MSU from now on) is a one button game, and that means that you can play the game only using one button. MSU uses the SPACEBAR to thrust the engines. Fullstop. Player will feel gravity when the engines aren't working.

Apart from the excellent level design, MSU features a blurred graphic that reminds early 80's coin-ops.

In this first part, I am creating the blurred graphics and the movement system.

Only two object involved in the project: a triangle representing the ship, and a square representing the smoke.

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. gravity = 0.1;
  5. thrust = 0.25;
  6. yspeed = 0;
  7. xspeed = 5;
  8. smoke_interval = 10000;
  9. frames_passed = 0;
  10. engines = false;
  11. _root.attachMovie("ship", "ship", _root.getNextHighestDepth(), {_x:150, _y:200});
  12. ship.filters = new Array(ship_filter);
  13. ship.onEnterFrame = function() {
  14.     if (engines) {
  15.         yspeed -= thrust;
  16.         smoke_interval -= 0.25;
  17.     }
  18.     yspeed += gravity;
  19.     this._y += yspeed;
  20.     angle = Math.atan2(yspeed, xspeed);
  21.     this._rotation = angle*180/Math.PI;
  22.     frames_passed++;
  23.     if (frames_passed>=smoke_interval) {
  24.         sm = _root.attachMovie("smoke", "smoke"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:this._x-2, _y:this._y});
  25.         sm.filters = new Array(smoke_filter);
  26.         sm.onEnterFrame = function() {
  27.             this._x -= xspeed;
  28.             this._alpha -= 2;
  29.             if (this._alpha<=0) {
  30.                 this.removeMovieClip();
  31.             }
  32.         };
  33.         frames_passed = 0;
  34.     }
  35. };
  36. _root.onMouseDown = function() {
  37.     engines = true;
  38.     smoke_interval = 10;
  39. };
  40. _root.onMouseUp = function() {
  41.     engines = false;
  42.     smoke_interval = 100000;
  43. };

Line 1: Importing the library needed for the glow filter

Lines 2-3: Defining ship and smoke glow filters. This will give the blurry effect. More information about filters at Create a flash draw game like Line Rider or others - part 1.

Line 4: Setting the gravity

Line 5: Setting the thrust

Lines 6-7: Defining ship x and y speeds. x speed never changes. Play with the variables just explained to see how they will affect gameplay. You can find more information about gravity and thrust at Flash game creation tutorial - part 1

Line 8: Defining a variable to store the interval between a smoke cloud and the next one. In my game, I want the ship to release smoke only when the engines are used

Line 9: Counting the frames passed since the release of the last smoke cloud

Line 10: Variable to check if the player is using engines or not

Line 11: Placing the ship in game

Line 12: Applying the glow filter to the ship

Line 13: Function the ship will execute at every frame

Line 14: If the player is using engines...

Line 15: Decrease y speed (because a negative number means the ship is going up)

Line 16: Decrease smoking interval (because the player is going pedal to the metal)

Line 18: Adding gravity to y speed

Line 19: Updating ship y position

Line 20: Calculating the angle of the ship using trigonometry. Some hints about trig at Create a flash draw game like Line Rider or others - part 3

Line 21: Updating ship rotation

Line 22: Increasing the variable counting the number of frames passed

Line 23: If it's time to release the smoke..

Line 24: Placing the smoke particle on the scene

Line 25: Applying the glow filter to the smoke particle

Line 26: Function the smoke particle will execute at every frame

Line 27: Updating smoke particle x position

Line 28: Making the smoke a little more transparent

Lines 29-31: When the smoke becomes totally transparent, remove it from the stage

Line 33: A smoke particle has been just placed, so the frames passed since the last placement must be set to zero

Lines 36-39: When the player presses the mouse, turn on engines and set the smoke interval to 10 frames

Lines 40-43: When the player releases the mouse, turn off engines and set the smoke interval to 100000 frames

And that's it! You may need to reload the page to see the game working. Press the mouse to keep the ship flying

Then download source code and start flooding the web with MSU clones :)

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.

40 Comment(s)

  1. Marcos | Jan 18, 2008 | Reply

    Hi Emanuele,

    Pretty cool tutorial. Can you make a tutorial teaching us how to make the tunnel levels like Metro Siberia? Is is a big MC or is it created dynamically? It’s amazing.

    Congratulations for your work.

  2. Lachy | Jan 18, 2008 | Reply

    Hey,

    Yeah im interested in creating things dynamically, ive had 2 game ideas i just dont know how to make yet could be so good! You should do personal tutoring! :D

  3. Emanuele Feronato | Jan 18, 2008 | Reply

    I don’t think it’s a big MC… it’s really huge.
    Being linear, it could be created dynamically, removing clips when they left the game to the left side.

  4. Beedigital | Jan 18, 2008 | Reply

    I believe Emanuele will do a second part with the tunnel. This can be pretty usefull for many games, not just the ship style.

    I´m having some ideas too. Let’s see if I can put them to practise. Need some time….

  5. Hawdon | Jan 18, 2008 | Reply

    Hi Emanuel,

    I am trying to make the player “die” by going to a “you loose” frame if they hit the wall and I had this code on the wall:

    onClipEvent (enterFrame) {
    if (_root.ship.hitTest(true)) {
    gotoAndStop(”youloose”)
    }
    }

    But when I tested it it didnt work… I dont know why.. Could u help me plz?

    Sincearly, me :P

  6. Lachy | Jan 18, 2008 | Reply

    How would we create all the ‘blockers’ dynamically?

  7. Ed | Jan 18, 2008 | Reply

    Is it just me, or do you work for MochiAds? You’re always picking games with a MochiAds intro, you get to use their highscore system first, you announce their competitions and new features, and all your games have MochiAds in them.

    I know that game isn’t created with API, but it would be a good tutorial to make random levels with API in part 2.

  8. Emanuele Feronato | Jan 18, 2008 | Reply

    I don’t work for MochiAds, I just made a game to betatest their leaderboard system.

    Anyay, you forgot to mention I won the referral bonus in their last competition…

    This is becoming really suspicious, isn’t it?

  9. shiv | Jan 18, 2008 | Reply

    “COOL”
    Its great. If we can only add a gun to it and a trail effect at _alpha 20 or so. Or any of the enemies, with a brutal AI?

  10. Ed | Jan 18, 2008 | Reply

    Yeah it is. Make an entry on the best ways to get a game sponsored and the best sponsors there are. In fact it would be great to see all the ways to make money in flash games, other than MochiAds (which really doesn’t pay well for small games). If you need some research material have a look at these two sources:

    Sponsor Review Thread:
    http://www.newgrounds.com/bbs/topic/722868/1

    flashgamesponsorship.com

  11. emanuel | Jan 18, 2008 | Reply

    hi how u make the trunel random sorry for the stupid question

  12. emanuel | Jan 18, 2008 | Reply

    like jetman(facebook)(read my other post)

  13. robby | Jan 19, 2008 | Reply

    hi emanuele, kinda off topic here, but do you think one of these day you’ll add some kind of forum to your website, with different boards, maybe a section like collab, art, music,…. it would be cool having a forum on this site so we can exchange ideas, maybe people can work together and make games off your tutorial. Anyways, love the new tutorial, keep up the good work :) and glad they removed you from google’s “black list” :D

  14. Kesh | Jan 19, 2008 | Reply

    onClipEvent (enterFrame) {
    if (_root.ship.hitTest(true)) {
    gotoAndStop(”youloose”)
    }
    }

    should be

    onClipEvent (enterFrame) {
    if (_root.ship.hitTest(WALL)) {
    gotoAndStop(”youloose”); // make sure there is //a semi colon
    }
    }

  15. Kesh | Jan 19, 2008 | Reply

    oops that was for Hawdon

  16. Emanuele Feronato | Jan 19, 2008 | Reply

    robby: a forum is what I have planned to do during this weekend.

  17. Shiv | Jan 19, 2008 | Reply

    Great,
    Add a forum and also some kind of chatroom.
    In which ppl can instantly message you and ask their questions.

  18. Hawdon | Jan 19, 2008 | Reply

    thx :D

  19. grimlock | Jan 19, 2008 | Reply

    Are we allowed to use this code or is it copyrighted? I make my own graphics and combine it with other code
    can we use it for our own commercial games
    Im confused on the whole copyright code

  20. Emanuele Feronato | Jan 19, 2008 | Reply

    You can freely use any code you find on this site.
    Should you make a lot of money, just remember I am always thirsty :)

  21. Randomguy | Jan 20, 2008 | Reply

    could you show how to make the levels dynamically like in fly the copter? thanks

  22. Shiv | Jan 20, 2008 | Reply

    sIMPLY GRAT eManuele,

    Your experiments window is imply great.
    But still it is really hard to understand that how guessnext is doing better than tileball.

    GuessNext was just a play of luck. While tileball requires skill. It seems that it will even take over your circle chain.

  23. Jack | Jan 20, 2008 | Reply

    Hi Emanuele!

    Nice tutorial…

    I have one question… I did one Maze game, but the people can simply cheat using right click… How do i do an anti-cheat, so the people can’t use right click button?

  24. Emanuele Feronato | Jan 20, 2008 | Reply

    Shiv: I think because Tileball is a bit too hard for casual players and does not have highscores (no replay value). Also tileball makes almost 10,000 plays/day but with a very low CPM

    Jack: Just don’t make a level on every frame, but keep all your code in a single frame.

  25. Eblup | Jan 21, 2008 | Reply

    Long time no see.
    Fianaly!!! a good interactive tutorial!
    the past tuts have been all about clicking to do some thing with something you cant control…
    but in the you finally get control

  26. Jack | Jan 21, 2008 | Reply

    Emanuele:

    I didn’t expressed very well… The people aren’t going to next level… They are “teleporting” the mouse to the end…

    Check my game here: http://www.newgrounds.com/portal/view/420884

    When a level starts, you can just right click and click in the exit… And the ball will teleport to exit… They aren’t going through levels…

  27. Shiv | Jan 21, 2008 | Reply

    Great Emanuele, but tileball is so magnificent that it deserved to be at the top.

    I am sure even you havent crossed all the levels.

  28. Bobb | Jan 21, 2008 | Reply

    Thanks! Your site is invaluble to me!

    Love it

  29. Tommy Salomonsson | Jan 24, 2008 | Reply

    I had no idea that there were such a public interest in learning how to make a Metro Siberia game. I think you have made a good tutorial, teaching the basics in a way that is easy to understand.
    /T

  30. Emanuele Feronato | Jan 24, 2008 | Reply

    Thank you!
    From the creator of the original game is more than a compliment!

  31. Goinginsane | Jan 24, 2008 | Reply

    I think its just me. But for some reason Flash is telling me that the action script is containing errors. I have recoppied it and have tried to put the code in both the ship and the frame. I have flash MX. Please help me!

  32. RJ | Jan 24, 2008 | Reply

    Since you released this tutorial a week ago, I’ve seen 3 or 4 games using it. Definetly, it has been really useful for a lot of people

  33. Flashtoo | Feb 6, 2008 | Reply

    U should replace the hitTest(true) with
    hitTest(this)

  34. Flashtoo | Feb 6, 2008 | Reply

    goingisnane, it dusnt work because flash mx uses a other type of actionscript as flash 8.
    Get flash 8!

  35. moloy | Feb 13, 2008 | Reply

    All these tutorials are really great and very helpful indeed. Especially because they are complete with source files.. Thanks a lot.

  36. Gravelcore | Feb 20, 2008 | Reply

    can you please explain how you made the levels or make a tutorial of how you did. please……?

  37. roboman | Apr 4, 2008 | Reply

    i’ve changed the code a little to made the smoke grow a bit smaller while turing transparent:

    import flash.filters.GlowFilter;
    var ship_filter:GlowFilter = new GlowFilter(0×00ff00, 0.8, 4, 4, 2, 3, false, false);
    var smoke_filter:GlowFilter = new GlowFilter(0xff0000, 0.8, 4, 4, 2, 3, false, false);
    gravity = 0.1;
    thrust = 0.25;
    yspeed = 0;
    xspeed = 5;
    smoke_interval = 10000;
    frames_passed = 0;
    engines = false;
    _root.attachMovie(”ship”, “ship”, _root.getNextHighestDepth(), {_x:150, _y:200});
    ship.filters = new Array(ship_filter);
    ship.onEnterFrame = function() {
    if (engines) {
    yspeed -= thrust;
    smoke_interval -= 0.25;
    }
    yspeed += gravity;
    this._y += yspeed;
    angle = Math.atan2(yspeed, xspeed);
    this._rotation = angle*180/Math.PI;
    frames_passed++;
    if (frames_passed>=smoke_interval) {
    sm = _root.attachMovie(”smoke”, “smoke”+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:this._x-2, _y:this._y});
    sm.filters = new Array(smoke_filter);
    sm.onEnterFrame = function() {
    this._x -= xspeed;
    this._alpha -= 2;
    this._height-= 0.25;
    this._width-= 0.25;
    if (this._alpha<=0) {
    this.removeMovieClip();
    }
    };
    frames_passed = 0;
    }
    };
    _root.onMouseDown = function() {
    engines = true;
    smoke_interval = 10;
    };
    _root.onMouseUp = function() {
    engines = false;
    smoke_interval = 100000;
    };

  38. roboman | Apr 5, 2008 | Reply

    whats the problem with my hittest?
    flsh says the script may make the computer irresponsive:

    game = true;
    {
    if (_root.ship, hitTest(_root.WALL)) {
    game = false;
    gotoAndStop(”gameover”,1);
    } else {
    game = true;
    gotoAndPlay(”game”,1);
    }
    }
    stop();

  39. bob | Jun 18, 2008 | Reply

    do these tutes work on flash cs3?

  40. bob | Jun 18, 2008 | Reply

    would this .fla open up with cs3 at least?

11 Trackback(s)

  1. Jan 21, 2008: Wall Dodge - game made from Metro Siberia Underground tutorial : Emanuele Feronato - italian geek and PROgrammer
  2. Jan 22, 2008: Metro.Siberia | Programming
  3. Jan 24, 2008: About to relelase the forum : Emanuele Feronato - italian geek and PROgrammer
  4. Jan 25, 2008: Create a Flash game like Metro Siberia Underground - Part 2 : Emanuele Feronato - italian geek and PROgrammer
  5. Jan 26, 2008: Metro.Siberia | aboutall
  6. Jan 27, 2008: aboutall.za21.info » Blog Archive » Metro.Siberia
  7. Jan 27, 2008: news4u.qa2.info » Blog Archive » Metro.Siberia
  8. Feb 1, 2008: Create a Flash game like Metro Siberia Underground - Part 3 : Emanuele Feronato - italian geek and PROgrammer
  9. Feb 11, 2008: Protect your ActionScript with Amayeta’s SWF Encrypt : Emanuele Feronato - italian geek and PROgrammer
  10. Feb 12, 2008: Create a Flash game like Metro Siberia Underground - Part 5 : Emanuele Feronato - italian geek and PROgrammer
  11. Feb 13, 2008: Create a Flash game like Metro Siberia Underground - Part 4 : Emanuele Feronato - italian geek and PROgrammer

Post a Comment