Flash game creation tutorial – part 5

Read all posts about "" game

March 14th update: part 5.3 released.
March 3rd update: part 5.2 released.
February 9th update: part 5.1 released.

Here I am with the 5th step of the flash game creation tutorial.

Read steps 1,2,3 and 4 and you’re ready.

I know some readers are in trouble with this tutorial because they can’t make their games work.
Unfortunately, I cannot reply to all private messages asking “how can I draw the ball?” or similar questions.

If you are completely new to Flash, then you should learn the basics, not only to follow this tutorial, but as a good way to start mastering any software.

Well, now let’s start the tutorial.

Many of you asked for a level management, and that’s what I am going to give you.

First, play 4 or 5 minutes with this little “game”.

It’s made of 4 levels, and each level is a frame.

Level 1: You have to collect 10 bubbles or coins or whatsoever to complete it
Level 2: You have to reach the exit
Level 3 and Level 4 aren’t properly levels but “rooms” with communicating doors. This is a new feature that isn’t included in Ball Revamped, but it can be useful if you want to create a game with “rooms” like old arcades during Commodore 64 age.

Every frame must have a stop(); in its actions window

Let’s see the actionscript in the frame 1 hero:

Frame 1

onClipEvent (load) {
	yspeed = 0;
	xspeed = 0;
	wind = 0.00;
	power = 0.65;
	gravity = 0.1;
	upconstant = 0.75;
	friction = 0.99;
	collected_coins = 0;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed = xspeed-power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed = xspeed+power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed = yspeed-power*upconstant;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed = yspeed+power*upconstant;
	}
	xspeed = (xspeed+wind)*friction;
	yspeed = yspeed+gravity;
	_y = _y+yspeed;
	_x = _x+xspeed;
	_rotation = _rotation+xspeed*2;
	if (_root.coin.hitTest(this.hero_hit)) {
		_root.coin._x = Math.random()*400+50;
		collected_coins++;
		_root.level1_text.text = 10-collected_coins+" more to go";
		if (collected_coins == 10) {
			_root.gotoAndPlay(2);
		}
	}
	if (_root.wall.hitTest(_x, _y, true)) {
		xspeed = 0;
		yspeed = 0;
		_x = 120;
		_y = 120;
	}
}

Nothing new but some minor changes at lines 29-36, where I check the collision between the hero and the coin, increase a variable (initialized at line 9) and go to the next frame if I collected the right amount of coins.

Please note: most of you sent me their works with a

gotoAndPlay(2);

but remember this actionscript is in the hero, not in the frame, so you must write

_root.gotoAndPlay(2);

to have it working.

If first frame is simple, the second is even simpler

Frame 2

onClipEvent (load) {
	yspeed = 0;
	xspeed = 0;
	wind = 0.00;
	power = 0.65;
	gravity = 0.1;
	upconstant = 0.75;
	friction = 0.99;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed = xspeed-power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed = xspeed+power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed = yspeed-power*upconstant;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed = yspeed+power*upconstant;
	}
	xspeed = (xspeed+wind)*friction;
	yspeed = yspeed+gravity;
	_y = _y+yspeed;
	_x = _x+xspeed;
	_rotation = _rotation+xspeed*2;
	if (_root.exit.hitTest(_x, _y, true)) {
		_root.gotoAndPlay(3);
	}
	if (_root.wall.hitTest(_x, _y, true)) {
		xspeed = 0;
		yspeed = 0;
		_x = 120;
		_y = 120;
	}
}

Create a movieclip instanced as “exit” (the exit square) and check the collision. If the collision is true then go to frame 3.
That’s all.

Creating “rooms” instead of “levels” is a bit more complicated because until now the player “popped” in the stage, appearing from nowhere. If we have rooms, we want the player to pass through these rooms without popping from nowhere.

That’s the “difficult” part.

Frame 3

Let’s think about frame/level 3: how many ways does the player enter in frame 3? He can pop from frame 2 or enter from frame 4 through the door.

Some actionscript

onClipEvent (load) {
	if (_root.throughdoor == 1) {
		yspeed = _root.save_y_speed;
		xspeed = _root.save_x_speed;
		_y = _root.save_y_position;
		_x = 470;
	}
	else{
		yspeed = 0;
		xspeed = 0;
	}
	wind = 0.00;
	power = 0.65;
	gravity = 0.1;
	upconstant = 0.75;
	friction = 0.99;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed = xspeed-power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed = xspeed+power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed = yspeed-power*upconstant;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed = yspeed+power*upconstant;
	}
	xspeed = (xspeed+wind)*friction;
	yspeed = yspeed+gravity;
	_y = _y+yspeed;
	_x = _x+xspeed;
	_rotation = _rotation+xspeed*2;
	if (_root.door.hitTest(_x, _y, true)) {
		_root.save_x_speed = xspeed;
		_root.save_y_speed = yspeed;
		_root.save_y_position = _y;
		_root.gotoAndPlay(4);
	}
	if (_root.wall.hitTest(_x, _y, true)) {
		xspeed = 0;
		yspeed = 0;
		_x = 120;
		_y = 120;
	}
}

Lines 2-7: Check if a root variable called throughdoor is set to 1. I decided to set this variable at 1 (almost) every time the player passes through a door. So if the player passed (the value is 1), I execute some strange code I will explain later.
Lines 8-11: If the throughdoor is different than 1, it means the player did not pass through a door, so I want to have xspeed and yspeed values set to zero, just line in all other examples seen before.

Lines 36-41: Check the collision between the player and a movieclip instanced as door (the “door” itself).
If the collision is true, I need to save xspeed, yspeed and y position of the hero. Why? Because I want to give the player a felling of “continuity” when passing through a door. If the player passes a door close to its upper margin and at a low speed, I want him to find himself in the next room close to the upper margin of the door at a low speed.
That why I save all these values.
Then I go to frame 4

Frame 4

Player can only enter in frame 4 from the door on frame 3.

onClipEvent (load) {
	yspeed = _root.save_y_speed;
	xspeed = _root.save_x_speed;
	_y = _root.save_y_position;
	_x = 30;
	wind = 0.00;
	power = 0.65;
	gravity = 0.1;
	upconstant = 0.75;
	friction = 0.99;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed = xspeed-power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed = xspeed+power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed = yspeed-power*upconstant;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed = yspeed+power*upconstant;
	}
	xspeed = (xspeed+wind)*friction;
	yspeed = yspeed+gravity;
	_y = _y+yspeed;
	_x = _x+xspeed;
	_rotation = _rotation+xspeed*2;
	if (_root.door.hitTest(_x, _y, true)) {
		_root.save_x_speed = xspeed;
		_root.save_y_speed = yspeed;
		_root.save_y_position = _y;
		_root.throughdoor = 1;
		_root.gotoAndPlay(3);
	}
	if (_root.wall.hitTest(_x, _y, true)) {
		xspeed = 0;
		yspeed = 0;
		_x = 120;
		_y = 120;
	}
}

Lines 2-4: I retrieve previously saved (from frame 3) values for xspeed, yspeed and y position
Line 5: I set x position to 30. It’s a value that gives the feeling of being just entered through the door
Lines 30-36: Checks collision between the player and the door in the same way as for frame 3, but I set the _root.throughdoor to 1 because I am “warning” frame 3 I did not came from the exit on frame 2 but through a door from frame 4.

That’s why in frame 3 I have the lines

if (_root.throughdoor == 1) {
	yspeed = _root.save_y_speed;
	xspeed = _root.save_x_speed;
	_y = _root.save_y_position;
	_x = 470;
}
else{
	yspeed = 0;
	xspeed = 0;
}

I retrieve the speed and y position values like I did on frame 4 (but I set the x position to 470, giving the feeling of being just entered through the door) only if the _root.throughdoor variable is set to 1 (in this example, only if I come from frame 4).

And that’s all for now with level changing.

Some code improvements are on the horizon, but I’ll cover them in next tutorials.

Now you have not excuses not to send me a game made by you following these tutorials.
If you send me the game with the source code, I’ll publish to this site with a credit to you.

Meanwhile, download the source code and enjoy.

Waiting for your games and feedback now…

Continue to part 5.1

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