Create a Flash game like Metro Siberia Underground

Read all posts about "" game

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

I was quite impressed of a new game called Metro Sibera Underground… a game with a very simple concept, simple graphics but excellent level design.

Metro Siberia Underground

Metro Sibera Underground (MSU from now on) is a one button game, and that means that you can play the game only using one button. MSU uses the SPACEBAR to thrust the engines. Fullstop. Player will feel gravity when the engines aren’t working.

Apart from the excellent level design, MSU features a blurred graphic that reminds early 80’s coin-ops.

In this first part, I am creating the blurred graphics and the movement system.

Only two object involved in the project: a triangle representing the ship, and a square representing the smoke.

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);
gravity = 0.1;
thrust = 0.25;
yspeed = 0;
xspeed = 5;
smoke_interval = 10000;
frames_passed = 0;
engines = false;
_root.attachMovie("ship", "ship", _root.getNextHighestDepth(), {_x:150, _y:200});
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++;
	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._alpha -= 2;
			if (this._alpha<=0) {
				this.removeMovieClip();
			}
		};
		frames_passed = 0;
	}
};
_root.onMouseDown = function() {
	engines = true;
	smoke_interval = 10;
};
_root.onMouseUp = function() {
	engines = false;
	smoke_interval = 100000;
};

Line 1: Importing the library needed for the glow filter

Lines 2-3: Defining ship and smoke glow filters. This will give the blurry effect. More information about filters at Create a flash draw game like Line Rider or others - part 1.

Line 4: Setting the gravity

Line 5: Setting the thrust

Lines 6-7: Defining ship x and y speeds. x speed never changes. Play with the variables just explained to see how they will affect gameplay. You can find more information about gravity and thrust at Flash game creation tutorial - part 1

Line 8: Defining a variable to store the interval between a smoke cloud and the next one. In my game, I want the ship to release smoke only when the engines are used

Line 9: Counting the frames passed since the release of the last smoke cloud

Line 10: Variable to check if the player is using engines or not

Line 11: Placing the ship in game

Line 12: Applying the glow filter to the ship

Line 13: Function the ship will execute at every frame

Line 14: If the player is using engines...

Line 15: Decrease y speed (because a negative number means the ship is going up)

Line 16: Decrease smoking interval (because the player is going pedal to the metal)

Line 18: Adding gravity to y speed

Line 19: Updating ship y position

Line 20: Calculating the angle of the ship using trigonometry. Some hints about trig at Create a flash draw game like Line Rider or others - part 3

Line 21: Updating ship rotation

Line 22: Increasing the variable counting the number of frames passed

Line 23: If it's time to release the smoke..

Line 24: Placing the smoke particle on the scene

Line 25: Applying the glow filter to the smoke particle

Line 26: Function the smoke particle will execute at every frame

Line 27: Updating smoke particle x position

Line 28: Making the smoke a little more transparent

Lines 29-31: When the smoke becomes totally transparent, remove it from the stage

Line 33: A smoke particle has been just placed, so the frames passed since the last placement must be set to zero

Lines 36-39: When the player presses the mouse, turn on engines and set the smoke interval to 10 frames

Lines 40-43: When the player releases the mouse, turn off engines and set the smoke interval to 100000 frames

And that's it! You may need to reload the page to see the game working. Press the mouse to keep the ship flying

Then download source code and start flooding the web with MSU clones :)

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

214 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
// 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