Designing the structure of a Flash game

One of the most interesting things about internet publishing is that you can receive feedback almost in real time.

For this reason, it’s very important to read every comment and above all negative comments.

When I released Tileball, I received some negative comments about the title screen. That’s right: I focused on the game and I did not care about a title screen, or a proper “congratulations” screen if a player manages to beat all levels.

When I was a kid, the “end screen” was very important. I remember myself playing some “not so good” games just to see how will they thank me for playing in their congratulations screen.

Too bad I forgot old times and released a game with such a lame intro and end screen.

I think it happened because I coded a lot of actionscript and did not want to nest more code to manage different game status such as info screen, welcome screen, and so on.

So I decided to make a Flash movie with the very basic structure every game should have.

This structure is made of:

* A “title” movieclip
* An “info” movieclip
* The game itself
* A “game over” movieclip
* A “congratulations” movieclip

Let’s see how do they work:

Title movieclip: it’s the first thing the player sees when the movie has loaded. It should have some appeal, just to tell players “hey, I’m a good game, give me a try”

Info movieclip: here you will put all instructions to play the game, or more information about the game.

The game itself: the most important thing, don’t forget it…

Game over movieclip: The screen the player will see once he dies and runs out of all lives, or runs out of time, or simply does not beat all levels. Here you can show highscores.

Congratulations movieclip: This is the screen the player will see should he ever complete the game. Congratulations, blah blah blah, show the highscores and play again

It’s very important that you include at least these sections, or your game will have an “home made” feeling. Now, we all know your game is home made, but we don’t want our game to seem “home made when sit in the bathroom”.

Come on, and let’s see how did I arrange actionscript and movieclips to have a game with the above features.

First, the actionscript:

current_status = "title";
play_game(current_status);
function play_game(game_status) {
	switch (game_status) {
	case "title" :
		_root.attachMovie("title_screen", "title_screen", 1);
		title_screen.instructions_button.onRelease = function() {
			play_game("instructions");
		};
		title_screen.play_button.onRelease = function() {
			play_game("play");
		};
		break;
	case "instructions" :
		_root.attachMovie("game_info", "game_info", 1);
		game_info.back_button.onRelease = function() {
			play_game("title");
		};
		game_info.play_button.onRelease = function() {
			play_game("play");
		};
		break;
	case "play" :
		_root.attachMovie("game_itself", "game_itself", 1);
		game_itself.game_over_button.onRelease = function() {
			play_game("game_over");
		};
		game_itself.win_button.onRelease = function() {
			play_game("game_won");
		};
		break;
	case "game_over" :
		_root.attachMovie("game_over", "game_over", 1);
		game_over.back_button.onRelease = function() {
			play_game("title");
		};
		game_over.play_button.onRelease = function() {
			play_game("play");
		};
		break;
	case "game_won" :
		_root.attachMovie("end_game", "end_game", 1);
		end_game.back_button.onRelease = function() {
			play_game("title");
		};
		end_game.play_button.onRelease = function() {
			play_game("play");
		};
		break;
	}
}

Line 1: Defining a variable containing the current status of the game. It’s set to title because when you start playing, the game must show the title screen

Line 2: Calling the main function, play_game, passing the current game status

Line 3: Beginning of the main function

Line 4: Performing a switch to the game_status variable: for each game status, I’ll execute proper actionscript

Line 5: Beginning of the actions to perform if the game status is set to title

Line 6: Attaching the movie with the title screen

Lines 7-9: Triggering a button that will lead to the instructions screen. Notice that when I release the button, I call the same play_game function with the game_status variable set to instructions

Lines 10-12: Same thing with the play button… this time the game_status takes the play value

Line 14: Beginning of the actions to perform if the game status is set to instructions

Line 15: Attaching the movie with the instructions

Lines 16-18: Triggering a back button that will take us to the title screen again

Lines 19-21: Triggering the play button as seen in lines 10-12

As you can see on further lines, the script remains almost the same for all game screens. Obviously the game itself is very lame (you win pressing a button and lose pressing the other button) and the whole presentation sucks, but this is the skeleton of the game and you should add your own gamescript (or more game screens) easily.

Look at the “game”…

… a very simple one but it has all the navigation options required.

Now you have no excuses to refuse making a good title screen.

Download the source

And talking about title screens…

Tileball 2

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