Flash game creation tutorial – part 1

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.
November 18th update: 2nd part released.

This is a quite long tutorial, so I decided to split it in pieces.
It started as a didactic example about flash game creation.

After compiling the script and successfully made your flash file, it is recommended to upload it to a stable and reliable top hosting sites to make sure that your site is up and running all the time.

First of all, I got inspiration from Ball Revamped series (do not remember the link, search it on Google), but I’ll add a lot more features. That means more than… two.

Let’s start creating the main character.

The hero

Ok, I said I am going to create the Ball, our hero.

So at the moment our hero will be a red circle with a yellow circle inside. It looks good! Maybe you should print it and keep it on your bedroom wall.

First of all, let’s think about our interaction with the hero. Basically, I want the hero to move when I press a key.

He will move to the left if I press left key, to the right if right key is pressed, and so on.

So the first hero actionscript will be:

onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		_x--;
	}
	if (Key.isDown(Key.RIGHT)) {
		_x++;
	}
	if (Key.isDown(Key.UP)) {
		_y--;
	}
	if (Key.isDown(Key.DOWN)) {
		_y++;
	}
}

It’s easy, isn’t it?

The enterFrame event simply checks if a key is pressed, and increases or decreases the hero x or y position according to the key pressed.

Click on the movie and press arrow keys to control the hero, click on “reset” to.. hm.. reset the movie

The Power

Well, you will notice that our hero always moves at a fixed speed.

I want to set up a variable to store the speed, so if I want the hero to move faster/slower I only have to change one value.
This is very important since I am planning to develop different levels where hero speed may vary.

I need to set up a “power” variable to move the hero fastly or slowly.

onClipEvent (load) {
	power = 3;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		_x -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		_x += power;
	}
	if (Key.isDown(Key.UP)) {
		_y -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		_y += power;
	}
}

Now you can change your hero’s speed just adjusting the power variable.
The higher the power value, the fastest the hero movement.

The Speed

That’s quite better than before, but our hero always moves at the same speed, and always starts without moving.

Now I need some kind of acceleration, and eventually some initial speed.

onClipEvent (load) {
	power = 0.2;
	yspeed = 0;
	xspeed = 0;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	_y += yspeed;
	_x += xspeed;
}

Notice how I reduced the power from the previous example (3) and this one (0.2).
Now that the power increases the speed, I need to play carefully with it or our hero will move too fast.
I have a yspeed and xspeed values starting at 0, but I can change them to make the hero move as he enters the frame.

Now, the more you press a key, the more your hero gains speed, the harder is to change direction.

Good.

The Fritcion

But now I want a friction, because I do not want the hero to move forever if I don’t press any key.
I want the hero to slowly stop moving if no key is pressed.

onClipEvent (load) {
	power = 0.3;
	yspeed = 0;
	xspeed = 0;
	friction = 0.95;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	xspeed *= friction;
	yspeed *= friction;
	_y += yspeed;
	_x += xspeed;
}

So I introduced a friction, minor than 1, that will affect hero’s speed. Now, when I press a key the hero starts moving, but when I release the key the hero will slowly stop. How slowly? The higher the friction (always minor than 1, remember), the slowly our hero will decrease his speed.

The Gravity

I said I wanted to do something similar to Ball Revamped, so I need a gravity. The hero will fall according to gravity strenght.

onClipEvent (load) {
	power = 0.3;
	yspeed = 0;
	xspeed = 0;
	friction = 0.95;
	gravity = 0.1
}

onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power;
	}
	xspeed *= friction;
	yspeed += gravity;
	_y += yspeed;
	_x += xspeed;
}

So I replaced the friction with the gravity for vertical movements. If I do not press UP arrow, the hero will fall down. When you read this line, probably the hero has fallen outside of the movie (you’ll see how to prevent this later in the tutorial), so you may need to click on reset to place the hero at the center of the movie.

The Thrust

If I have gravity, I need a thrust. I want to be more complicated to move up since my hero is living in a world where gravity exists.

onClipEvent (load) {
	power = 0.3;
	yspeed = 0;
	xspeed = 0;
	friction = 0.95;
	gravity = 0.1;
	thrust = 0.75;
}

onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power*thrust;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power*thrust;
	}
	xspeed *= friction;
	yspeed += gravity;
	_y += yspeed;
	_x += xspeed;
}

As you can see, thrust (again minor than 1) affects the UP movement, making it weaker and more complicated to accomplish

The Wind

What’s now? Sure, the wind!
I want to make the stage look windy, you know, heros’ life is complicate, so that’s it!

onClipEvent (load) {
	power = 0.3;
	yspeed = 0;
	xspeed = 0;
	friction = 0.95;
	gravity = 0.1;
	thrust = 0.75;
	wind = 0.09;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power*thrust;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power*thrust;
	}
	xspeed += wind;
	xspeed *= friction;
	yspeed += gravity;
	_y += yspeed;
	_x += xspeed;
}

Wind affects side movements, if positive will move the hero to the right, if negative will move the hero to the left.
Play with all those variables wisely and find a perfect mix of realism and playability.

The Rotation

Now, the final touch. Just like in Ball Revamped, I want the hero to rotate clockwise when moving to right, and counter clockwise when moving to left.

onClipEvent (load) {
	power = 0.65;
	yspeed = 0;
	xspeed = 0;
	friction = 0.99;
	gravity = 0.1;
	thrust = 0.75;
	wind = 0.05;
}
onClipEvent (enterFrame) {
	if (Key.isDown(Key.LEFT)) {
		xspeed -= power;
	}
	if (Key.isDown(Key.RIGHT)) {
		xspeed += power;
	}
	if (Key.isDown(Key.UP)) {
		yspeed -= power*thrust;
	}
	if (Key.isDown(Key.DOWN)) {
		yspeed += power*thrust;
	}
	xspeed += wind;
	xspeed *= friction;
	yspeed += gravity;
	_y += yspeed;
	_x += xspeed;
	_rotation += xspeed;
}

That’s easy, I only need to se the hero rotation equal to his xspeed.

This is where the first part ends… leave me feedback and tell me what do you think about it.

Here it is a zipped file with all source codes explained in this tutorial.

Continue with the 2nd part

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