Emanuele Feronato

italian geek and PROgrammer

Talking about Metro Siberia Underground game, Flash and Game development.

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

This tutorial reached the 5th part, and it’s time to add some new feature… something that wasn’t included in the original game.

Always remember to add something to a game you are about to clone, or people will get bored very soon of your game.

In this tutorial we will make the ship fire. “Oh, well”, you may say, “thanks for the millionth tutorial about firing spaceships”.

Wait… do you remember Metro Siberia Underground is a one button game? And that the one an only button you can press in this game is already used to give thrust?

That’s where my gameplay idea comes and shines… your ship is always firing… and it’s up to you firing only at the rocks, avoiding to blow off fuel tanks.

Read parts 1 to 4 before continuing, then take this 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);
var fuel_filter:GlowFilter = new GlowFilter(0x00ffff, 0.8, 4, 4, 2, 3, false, false);
var rock_filter:GlowFilter = new GlowFilter(0xffffff, 0.8, 4, 4, 2, 3, false, false);
var score_filter:GlowFilter = new GlowFilter(0xff00ff, 0.8, 2, 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;
fuel_freq = 10;
gasoline = 500;
rock_freq = 50;
engines = false;
_root.attachMovie("ship", "ship", _root.getNextHighestDepth(), {_x:150, _y:200});
_root.createEmptyMovieClip("beam", _root.getNextHighestDepth());
_root.createEmptyMovieClip("fuel_movie", _root.getNextHighestDepth());
_root.createEmptyMovieClip("deadly_movie", _root.getNextHighestDepth());
_root.attachMovie("score", "score", _root.getNextHighestDepth());
_root.attachMovie("beam_spot", "beam_spot", _root.getNextHighestDepth());
beam.filters = new Array(smoke_filter);
beam_spot.filters = new Array(smoke_filter);
ship.filters = new Array(ship_filter);
score.filters = new Array(score_filter);
ship.onEnterFrame = function() {
	score.sc.text = "Distance: "+distance+" - "+"Fuel: "+gasoline;
	if ((gasoline>0) and (engines)) {
		yspeed -= thrust;
		smoke_interval -= 0.25;
		gasoline -= 1;
	}
	if (Math.random()*1000=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 (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)) {
		yspeed = 0;
		this._y = 200;
		gasoline = 500;
		distance = 0;
		deadly_movie.removeMovieClip();
		fuel_movie.removeMovieClip();
		_root.createEmptyMovieClip("fuel_movie", _root.getNextHighestDepth());
		_root.createEmptyMovieClip("deadly_movie", _root.getNextHighestDepth());
	}
};
_root.onMouseDown = function() {
	engines = true;
	smoke_interval = 10;
};
_root.onMouseUp = function() {
	engines = false;
	smoke_interval = 100000;
};

And let's see what do new lines make:

Line 21: Creating an empty movie clip that will represent the laser beam. It will be a simple line, but, hey, we have to use a bit of imagination...

Line 25: Attaching the beam_spot movieclip... it's a red 2x2 pixels dot, and it's the spot where you are going to fire

Lines 26-27: Attaching filters to laser beam and laser spot. I want them to have a red glow, so I am using the same filters used for the smoke

Line 80: Clearing beam movieclip

Line 81: Setting the drawing style for the laser beam. For more information about drawing styles refer to Create a flash draw game like Line Rider or others - part 1

Line 82: Moving the pen that will draw the laser beam in front of the spaceship using trigonometry. More information about Flash and trigonometry at Create a flash draw game like Line Rider or others - part 3

Line 83: Beginning of a loop to be executed 250 times... because my laser beam will be 250 pixels wide

Lines 84-85: Using trigonometry, I determine when will be the x-th pixel of the laser beam according to spaceship rotation

Lines 86-88: If the x-th pixel hits a rock or a fuel can, then exit the for loop

Line 90: Drawing the line until the pixel that gave a positive hit test with rock or fuel, or draw all 250 pixels if there wasn't any collision. This method reminds the one to draw the cone of light in Create a survival horror game in Flash - part 1

Lines 91-92: Moving the beam red spot at the end of the laser beam.

Now I can know when the laser hits a rock or a fuel can, but I can't determine which rock or which can did I hit...

I mean... I know that at coordinates (x,y) there is a rock or a fuel can, but now I have to see which one touches the (x,y) pixel according to its rotation, size and position.

... unless I perform an hit test between any rock (or fuel) and the beam spot... and that what I am doing at:

Line 42: Performing an hit test between the fuel can and the beam spot

Line 43: If true, then make the fuel can a bit more transparent

Lines 44-46: If the fuel can is completely transparent, then remove it from the game. BOOOM... you hitted a fuel can... you will run out of gasoline very soon if you don't pay attention to fuel cans...
unless I perform a standard hit test between the red spot and rocks and cans.

Lines 65-70: Same thing with rocks, but they are a bit more difficult to destroy.

And here it is the result... only one button needed to play, ladies and gentlemen...

Download the source code and enjoy

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