Flash game creation tutorial – part 2

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.
December 31st update: 5th part released.
December 23rd update: 4th part released.
December 6th update: 3rd part released.

Welcome to the second step.

Read the 1st part and you’ll be ready to follow me with the game creation.

As you can see, now I can move the hero in a quite funny way.

Now, it’s time to introduce some (deadly) obstacles.

The bounds

Every game area has bounds, so I created a movieclip called “bounds” and instanced as “wall”.

My hero can’t touch any wall, so the actionscript will be:

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;
	if (_root.wall.hitTest(_x, _y, true)) {
		xspeed = 0;
		yspeed = 0;
		_x = 120;
		_y = 120;
	}
}

What happened?
I added lines 28 to 33, let’s see how do they work.

Line 28: I perform a hit test between the hero and the movieclip called “wall”. The _x and _y means that I am checking the collision only on the _x and _y attributes of the hero – its center –
Why am I doing it this way? Because I think the game would be too frustrating if I should check the collision between any pixel of the hero and the game bounds. Moreover, the smallest the collision area (1 pixel in this case), the more complicate and creative the bounds you can draw to make the player move around it.
Lines 29 to 32 simply “reset” hero’s position in case of death.

The coin – 1st attempt

Now I want my hero to be able to collect coins or similar things, so I created a new movieclip named and instanced as “coin”.
New actionscript is:

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;
	if (_root.wall.hitTest(_x, _y, true)) {
		xspeed = 0;
		yspeed = 0;
		_x = 120;
		_y = 120;
	}
	if (_root.coin.hitTest(_x, _y, true)) {
		_root.coin._x = Math.random()*400+50;
	}
}

Look at lines 34-36.
Line 34 performs basically the same test as I did for the bounds, line 35 simply moves the coin to another position once you collect it.
Wonderful.
Now try to collect the coin.

It looks hard and buggy, isn’t it?
That’s why I am performing the hit test only with the center of the hero, I mean only with one pixel.
While this method was good for the bounds, now it looks awful.

The coin – 2nd attempt

I am trying a different approach, changing line 34 with

if (_root.coin.hitTest(this)) {

I am extendid the hit test to the entire shape.
Try to collect the coin now…

Now it’s too easy!!
You can collect coins just staying close to them. Why?
Because Flash performs that hit test basing on a rectangular shape built around the hero’s shape.
Just imagine a bounding box. Everything you hit with the bounding box returns a true value.
While the 1st attempt looked hard and buggy, this one looks easy and buggy. Keyword: buggy.

The coin – 3rd attempt

Are you about to give up? No?
Well, I have the solution.
Just create a new movieclip called “hero_hit” and insert into the hero’s movieclip, at its center. That’s the small blue square you notice on the movie.
Now perform the hit test on the hero_hit movieclip instead of the hero itself.
You can obvioulsy change the hero_hit size according to the feeling you want to give to your game.
The smaller the size, the hardes to collect coins.
Final actionscript is:

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;
	if (_root.wall.hitTest(_x, _y, true)) {
		xspeed = 0;
		yspeed = 0;
		_x = 120;
		_y = 120;
	}
	if (_root.coin.hitTest(this.hero_hit)) {
		_root.coin._x = Math.random()*400+50;
	}
}

As you can see, the hit test at line 34 checks collision between the coin movieclip and the hero_hit movieclip

And here ends the second part..

Download the source code for all examples and experiment.

Of course, leave me feedback.

Continue with the 3rd step

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