Designing the structure of a Flash game – AS3 version

Abot a year ago I published Designing the structure of a Flash game with everything you needed to know to design the structure of a game.

Now it’s time to make the same thing with AS3, using classes.

With classes the whole thing seems less intuitive, but once mastered the base concept, you will use this example as a template for your games.

In this game, we have four screens: the splash screen, the info screen (how to play), the game itself and the game over screen… but you can easily add as many screens as you want.

First, let’s make a diagram of the game:

In the picture you can see the four game screens, and arrows indicate the possible transitions between a screen and another… so from the splash screen you can go to the info screen but you can’t go directly to the game over screen.

The main class is the_game (so our main file will be the_game.as) while all other objects and classes are listed in the library table. Refer to red numbers to see where I used the objects during the game.

Looking at the linkage column, it’s clear we’ll have four more actionscript files: game_over.as, how_to_play.as, splash.as and the_game_itself.as.

Let’s see them all:

the_game.as

package {
	import flash.display.Sprite;
	public class the_game extends Sprite {
		public var splash_screen:splash;
		public var play_screen:the_game_itself;
		public var game_over_screen:game_over;
		public var how_to_play_screen:how_to_play;
		public function the_game() {
			show_splash();
		}
		public function show_splash() {
			splash_screen = new splash(this);
			if (how_to_play_screen) {
				removeChild(how_to_play_screen);
				how_to_play_screen = null;
			}
			addChild(splash_screen);
		}
		public function show_how_to_play() {
			how_to_play_screen = new how_to_play(this);
			removeChild(splash_screen);
			splash_screen = null;
			addChild(how_to_play_screen);
		}
		public function show_game_over() {
			game_over_screen = new game_over(this);
			removeChild(play_screen);
			play_screen = null;
			addChild(game_over_screen);
			
		}
		public function play_the_game() {
			play_screen = new the_game_itself(this);
			if (splash_screen) {
				removeChild(splash_screen);
				splash_screen = null;
			}
			if (how_to_play_screen) {
				removeChild(how_to_play_screen);
				how_to_play_screen = null;
			}
			if (game_over_screen) {
				removeChild(game_over_screen);
				game_over_screen = null;
			}
			addChild(play_screen);
		}
	}
}

This represents the whole game.

Lines 4-7: Declaring the game screens assigning them the proper class

Lines 8-10: This is the main function, that simply calls a function that will show the splash screen

Line 11: Here it is such function: show_splash

Line 12: The core of the function: I am assigning the splash_screen variable declared at line 4 a new splash object. Look at the this parameter: I am using it to “remember” who called the class, in this case this = the_game.

Line 13: Checking if I have the how_to_play_screen on stage. This could be possible because I can reach the splash screen from the info screen.

Line 14: If true, I will remove the screen from stage…

Line 15: … and unset the variable. This is very important because removeChild, as the name suggests, just removes the sprite from the stage, but it’s still active as variable.

Line 17: Finally, I put the splash screen on stage.

All remaining lines do quite the same, assigning variables, adding and removing sprites according to what they have to accomplish.

Now it’s time to see splash.as, the code for splash class

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class splash extends Sprite {
		public var main_class:the_game;
		public function splash(passed_class:the_game) {
			main_class = passed_class;
			play_button.addEventListener(MouseEvent.CLICK, on_play_button_clicked);
			how_to_button.addEventListener(MouseEvent.CLICK, on_how_to_button_clicked);
		}
		public function on_play_button_clicked(event:MouseEvent) {
			main_class.play_the_game();
		}
		public function on_how_to_button_clicked(event:MouseEvent) {
			main_class.show_how_to_play();
		}
	}
}

Line 6: Declaring a variable called main_class of the_game (the main class) type.

Line 7: Main function, look at the passed_class variable of the_game type passed as parameter: that’s where ends the paramter passed at line 12 in the_game.as.

Line 8: Remembering the class I came from

Lines 8-9 Adding a couple of listeners to the buttons to check when the player clicks on the “play” or “how to play” buttons.

Line 12: Function to be executed when the player clicks on the play button

Line 13: The core of this file: I call play_the_game function in the main class. I know what’s the main class thanks to main_class variable.

Then the function will act like the show_splash one explained before, adding and removing sprites and calling other classes.

The other classes work in the same way as splash, so they do not need comments.

how_to_play.as

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class how_to_play extends Sprite {
		public var main_class:the_game;
		public function how_to_play(passed_class:the_game) {
			main_class = passed_class;
			play_button.addEventListener(MouseEvent.CLICK, on_play_button_clicked);
			back_button.addEventListener(MouseEvent.CLICK, on_back_button_clicked);
		}
		public function on_play_button_clicked(event:MouseEvent) {
			main_class.play_the_game();
		}
		public function on_back_button_clicked(event:MouseEvent) {
			main_class.show_splash();
		}
	}
}

the_game_itself.as

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class the_game_itself extends Sprite {
		public var main_class:the_game;
		public function the_game_itself(passed_class:the_game) {
			main_class = passed_class;
			die_button.addEventListener(MouseEvent.CLICK, on_die_button_clicked);
		}
		public function on_die_button_clicked(event:MouseEvent) {
			main_class.show_game_over();
		}
	}
}

game_over.as

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class the_game_itself extends Sprite {
		public var main_class:the_game;
		public function the_game_itself(passed_class:the_game) {
			main_class = passed_class;
			die_button.addEventListener(MouseEvent.CLICK, on_die_button_clicked);
		}
		public function on_die_button_clicked(event:MouseEvent) {
			main_class.show_game_over();
		}
	}
}

And that’s what you’ll get:

Download the source and enjoy. Feel free to add a leaderboard screen, a credit screen and so on. Send me and I’ll publish it.

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