Create a Flash game like Metro Siberia Underground – Part 2

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

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

• Orava

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

• 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)

• Gabriel

Very nice… Helped a lot =D

• Orava, look at this tutorial I’ ve found

I think it’s very useful

• Ed

Great!

• Isaac

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

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

this is cool… very coool.. super cool.. this rocks man! oh and this page http://www.albinoblacksheep.com/tutorial/contextmenu is extremely useful

• wow, thanks so much for that link RJ, I’ve been trying to figure out how to do that forever!

• Me too, that’s why I posted it just when I found it

• 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.

• 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

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

• sweet thanks

• Orava

The next thing to do is to get a meter that calc’s the distance… or something, any ideas?

• Goinginsane

….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

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

thanks. I should have thought of that. My eyelids are sticking to the back of my eyeballs.

• 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

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

So, no one knows how to do a distancemeter :(? i’d really need one….

• Skychase2rebirth

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

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

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)) {