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
-
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
Tell me what do you think about this post. I'll write better and better entries.
(1 votes, average: 5 out of 5)
Loading ...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”
Leave a Reply
Trackbacks
-
Create a Flash game like Metro Siberia Underground - Part 3 : Emanuele Feronato - italian geek and PROgrammer on
February 5th, 2008 5:16 pm
[...] suggest to read part 1 and 2 before reading this [...]
-
Create a Flash game like Metro Siberia Underground : Emanuele Feronato - italian geek and PROgrammer on
February 13th, 2008 6:51 pm
[...] tutorial: available parts 1, 2, 3, 4 [...]
-
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 [...]
-
Create a Flash game like Metro Siberia Underground - Part 4 : Emanuele Feronato - italian geek and PROgrammer on
February 13th, 2008 6:55 pm
[...] tutorial: available parts 1, 2, 3, 4 [...]
-
Latest MochiAds Games
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)
Ty already
Very nice… Helped a lot =D
Orava, look at this tutorial I’ ve found
http://www.albinoblacksheep.com/tutorial/contextmenu
I think it’s very useful
Great!
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.
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.
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.
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
The next thing to do is to get a meter that calc’s the distance… or something, any ideas?
….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…
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
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!
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???
So, no one knows how to do a distancemeter :(? i’d really need one….
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
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();
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)) {