Create a Flash game like Metro Siberia Underground - Part 2

January 25, 2008 by Emanuele Feronato
Filed Under Flash, Game design •

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

Now it's time to create a random tunnel

Read Create a Flash game like Metro Siberia Underground if you don't know what I am talking about and look what I made:

1) There is a random tunnel with collision detection

2) Smoke clouds get bigger when they are released

I just created a new symbol linked as tunnel that represents the... tunnel, as said.

The tunnel is made by two rectanges on the same x axis with a y gap between the higher and the lower

The gap between the rectangles is the tunnel itself, while the rectangles are the rock

Let's take a look to the actionscript

PLAIN TEXT

ACTIONSCRIPT:

import flash.filters.GlowFilter;
var ship_filter:GlowFilter = new GlowFilter(0x00ff00, 0.8, 4, 4, 2, 3, false, false);
var smoke_filter:GlowFilter = new GlowFilter(0xff0000, 0.8, 4, 4, 2, 3, false, false);
var tunnel_filter:GlowFilter = new GlowFilter(0xffff00, 0.8, 4, 4, 2, 3, false, false);
gravity = 0.1;
thrust = 0.25;
yspeed = 0;
xspeed = 5;
distance = 0;
smoke_interval = 10000;
frames_passed = 0;
tunnel_height = 150;
engines = false;
_root.attachMovie("ship", "ship", _root.getNextHighestDepth(), {_x:150, _y:200});
_root.createEmptyMovieClip("tunnel_movie", _root.getNextHighestDepth());
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++;
distance += xspeed;
if (distance>50) {
step = distance-50;
wall = tunnel_movie.attachMovie("tunnel", "tunnel"+tunnel_movie.getNextHighestDepth(), tunnel_movie.getNextHighestDepth(), {_x:525-step, _y:tunnel_height});
wall.filters = new Array(tunnel_filter);
wall.onEnterFrame = function() {
this._x -= xspeed;
if (this._x<-25) {
this.removeMovieClip();
}
};
tunnel_height += Math.floor(Math.random()*40)-19;
distance = step;
}
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._width += 0.2;
this._height += 0.2;
this._alpha -= 2;
if (this._alpha<=0) {
this.removeMovieClip();
}
};
frames_passed = 0;
}
if ((this._y> 400) or tunnel_movie.hitTest(this._x+28*Math.cos(angle), this._y+28*Math.sin(angle), true) or tunnel_movie.hitTest(this._x+8*Math.cos(angle+Math.PI/2), this._y+8*Math.sin(angle+Math.PI/2), true) or tunnel_movie.hitTest(this._x+8*Math.cos(angle-Math.PI/2), this._y+8*Math.sin(angle-Math.PI/2), true)) {
yspeed = 0;
this._y = 200;
tunnel_movie.removeMovieClip();
_root.createEmptyMovieClip("tunnel_movie", _root.getNextHighestDepth());
}
};
_root.onMouseDown = function() {
engines = true;
smoke_interval = 10;
};
_root.onMouseUp = function() {
engines = false;
smoke_interval = 100000;
};

Let's comment the new actionscript

Line 4: Filter to apply to the tunnel

Line 9: Distance traveled by the spaceship

Line 12: Variable to store the tunnel height

Line 15: Creating an empty movie clip that will contain the tunnel

Line 27: Updating the distance traveled according to ship speed

Line 28: Checking if the distance is greater than 50 (50 is the width of the tunnel rectangle)

Line 29: In a step variable I store the difference between distance and 50, to know exactly where to place the tunnel

Line 30: Placing the tunnel. Notice the x and y coordinates, based upon step and tunnel_height

Line 31: Apllying the filter to the tunnel

Line 32: Function to be executed at every frame for the tunnel

Line 33: Decrease its x position according to ship speed

Lines 34-36: If the tunnel left the stage to the left, then remove it

Line 38: Setting a new tunnel height, that will be 20 pixels higher or lower than the previous one. This will make the tunnel have a serpentine shape

Line 39: Setting the distance traveled equal to step variable. distance variable does not count the entire distance, but only the distance from the last added tunnel

Lines 46-47: Increasing smoke size line in "real life"

Line 55: Checking if the ship leaves the stage to the bottom (falls down) or if one of the tree points making the triangle (the ship itself) hit the tunnel. To know the position of the points, I call some trigonometry functions. More information about trigonometry at Create a flash draw game like Line Rider or others - part 3

Line 56: Reset y speed

Line 57: Place the ship in the middle of the stage

Lines 58-59: Removing the old tunnel (the one where the ship crashed) and creating a new one

And here it is the result

Sometimes the tunnel messes up because the "game over" is not optimized at the moment... just reload the page if it happens

What should I add now... sure... more elements... powerups... and a laser the ship can fire... only using one button of course...

Meanwhile download the source code and experiment a bit

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

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.

28 Responses to “Create a Flash game like Metro Siberia Underground - Part 2”

Orava on January 25th, 2008 2:49 pm

all it says when leftclick “movie not loaded”
and it’s been there for 5 min now ;S
works in flash tho, still. great, this site is a lifesaviour for someone (like me) who wants to know/learn actionscript actionscript
Orava on January 25th, 2008 2:52 pm

yeah, about leftclick, i remembered a question i was supposed to ask. how you get it like that, that you Can’t press “forward” with leftclick (
i made a little “find a button” testgame and it jumps to next frame when leftclick—>fwd)
Ty already
Gabriel on January 25th, 2008 4:00 pm

Very nice… Helped a lot =D
RJ on January 25th, 2008 5:32 pm

Orava, look at this tutorial I’ ve found

http://www.albinoblacksheep.com/tutorial/contextmenu

I think it’s very useful
Ed on January 25th, 2008 6:12 pm

Great!
Isaac on January 26th, 2008 12:16 am

I recently made a very similar engine – I may just email it to you. It has a few more parameter and may be a little more messy, but I think it can do a little more. I actually have my “blocks” moving upwards, and have them spaced apart, but that’s all a matter of preference.
Eblup on January 26th, 2008 1:22 am

hey you could put in a bomb and cities to drop them on it would take timeing to hit it and the cities could have cannons that shoot at you.
emanuel on January 26th, 2008 2:51 am

this is cool… very coool.. super cool.. this rocks man! oh and this page http://www.albinoblacksheep.com/tutorial/contextmenu is extremely useful
Bradley on January 26th, 2008 7:48 am

wow, thanks so much for that link RJ, I’ve been trying to figure out how to do that forever!
RJ on January 26th, 2008 12:19 pm

Me too, that’s why I posted it just when I found it
Shiv on January 26th, 2008 1:08 pm

Hi Emanuele,
great work on dynamic tunnels.
I was just trying to make a game in which there are dogs and you have to make a fence.
Dogs move randomly.

Can you tell me how to calculate the no. of dogs in the fence region?

|==================|
| @ | @
| @ @ |
|==================| @

In the above diagram, tell me how to calculate that 3 dogs (@) are in the fenced area and 2 are outside.

If you want the .fla I can send you.
danny on January 27th, 2008 7:16 pm

well i’m useing this to make a game however i,ve been fooliing arround with line 38 (my line 82) but i can’t seem to find a way to make it so that the cave is ALWAYS on the screen. what i meen by that is somtimes the tunnel movieclip will be so far up or down you can only see the top or bottom part somtimes you can’t see either of them.
Emanuele Feronato on January 28th, 2008 12:20 am

you can use something like

if (tunnel_height > max_height){
tunnel_height = max_height;
}
if (tunnel_height < min_height){
tunnel_height = min_height;
}

and play with max_height and min_height values
danny on January 28th, 2008 2:26 am

sweet thanks
Orava on January 28th, 2008 10:22 am

The next thing to do is to get a meter that calc’s the distance… or something, any ideas?
Goinginsane on January 28th, 2008 9:00 pm

….I cannot seem to make this code work. I put it in and when I press cntrl entr nothing happens…as if I didn’t put in any code…
Orava on January 28th, 2008 9:54 pm

You might want to try to download the whole thing.
the copypasteing sometimes screws up the code (been there.)
so: http://www.triquitips.com/_ema/1butt2.zip
Goinginsane on January 28th, 2008 10:07 pm

thanks. I should have thought of that. My eyelids are sticking to the back of my eyeballs.
Bill on January 30th, 2008 9:42 am

hiya!

thanks for these tutorials, i used some of the source to make this game here, check it out!

http://galacticflashgames.com/games/bumblebee.php

i would really appreciate some comments on it.

thanks again for the tutes!
robert on January 30th, 2008 8:44 pm

hey i have this code:
level=1
dupMovie = function () {
for (i=0; i<=10*level; i++) {
alien.duplicateMovieClip(”alien”+i, i, {_x:Math.random()*600, _y:Math.random()*450});
}
for (i=0; i<10; i++) {
robot.duplicateMovieClip(”robot”+i, i+10000, {_x:Math.random()*600, _y:Math.random()*450});
}
for (i=0; i<10; i++) {
ninja.duplicateMovieClip(”ninja”+i, i+20000, {_x:Math.random()*600, _y:Math.random()*450});
}
};
dupMovie();

but when i run it it doesnt increase when the level goes up
WHY???
Orava on January 31st, 2008 11:31 am

So, no one knows how to do a distancemeter :(? i’d really need one….
Skychase2rebirth on February 10th, 2008 1:47 am

i have a problem, when i go down too much, even if i’m always on the scene, it do like if i’d touch a wall
roboman on April 5th, 2008 6:52 am

why can’t i get the gameover to work?

game = true
{
if ((this._y > 400) or tunnel_movie.hitTest(this._x+28*Math.cos(angle), this._y+28*Math.sin(angle), true) or tunnel_movie.hitTest(this._x+8*Math.cos(angle+Math.PI/2), this._y+8*Math.sin(angle+Math.PI/2), true) or tunnel_movie.hitTest(this._x+8*Math.cos(angle-Math.PI/2), this._y+8*Math.sin(angle-Math.PI/2), true)) {
game = false;
tunnel_movie.removeMovieClip();
}
};

{
if (game = false) {
gotoAndPlay (”gameover”,1);
} else {
gotoAndStop (”game”,1);
}
}
stop();
Martin on August 8th, 2008 6:30 pm

Please can someone explain line 55 for me, I read the line rider tutorial page but I still don’t understand everything thats going on here, thanks.

I assume that this._x+28 refers to the front point of the triangle (ship)and the bit that follows: *Math.cos(angle) works out a straight horizontal hittest line. Im just guessing at this point though.

if ((this._y> 400) or tunnel_movie.hitTest(this._x+28*Math.cos(angle), this._y+28*Math.sin(angle), true) or tunnel_movie.hitTest(this._x+8*Math.cos(angle+Math.PI/2), this._y+8*Math.sin(angle+Math.PI/2), true) or tunnel_movie.hitTest(this._x+8*Math.cos(angle-Math.PI/2), this._y+8*Math.sin(angle-Math.PI/2), true)) {