Create a Flash game like Metro Siberia Underground – Part 5

Read all posts about "" game

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

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers