Flash Tutorial Links:
Play Games: HTML5 Tutorials:

Flash Game Framework (Part 1)

A long journey begins with a first step. Likewise, Flash game development begins with giving it a good framework to build on.

Flash Game Development

Planning out the entire framework of a game is instrumental before any coding begins. You need to visualise mentally what packages you need, the classes, draw out some diagrams before you even start coding. For some very complex logic or features, you may need to use external packages that other people have written. For example, if you want your game to be in 3d, then you probably have to use some of the modules provided by Papervision, etc.

In this flash game tutorial, I will demonstrate minimal use of external libraries, and get you to code everything from scratch. You should see that it is not really that difficult to get the basics up provided you have a reasonable programming background.

Programs Used

You will just need your Flash IDE (I know not everybody swear by this, but I personally like it a lot) to make all these games. There are times where I open my Notepad++ to code the .as files required, especially if I have to change something across files quickly. In the subsequent flash game tutorials, the assumption will be that you are working on the main Flash IDE.

Otherwise, in most cases, your Flash IDE will suffice. If you have your own preference for other IDEs, feel free to use them. In the flash game tutorials given here, I use Adobe Flash CS3. If you're using CS4, there shouldn't be a great deal of difference.

Structure

This is how you should organise your files.

gamestructure

I will explain each of the file in details below. If you move on to the first flash game tutorial proper, you should see that these are exactly the same files that you'll be downloading.

The img Folder

The img folder will hold all the art assets for your game. In most of my tutorials, I left out sounds for simplicity sake. If you are dealing with sounds in your game, a snd folder should appear at the same level as your img folder. Later on, I will most likely add in another flash game tutorial to teach you the best way to insert and play sounds for your game. But to lessen the burden in learning how to make games at the start, I'll leave sounds out first.

You can see quite a few png files here in this example. They are the different animated snapshots of our main character Jovia in the first tutorial. When this img folder gets more cluttered, it pays to further subdivide it into more folders.

The src Folder

The src folder will hold all the .as files for your game. Remember that we're coding in AS3 now, so if you're familiar with Java and the package system, then this should not be too difficult for you to accept. If not, just treat the folder as a package. You can see that there is a Game package here. I know there is this usual practice of naming packages com.makeflashgames.www, so follow it if you're a subscriber to that coding philosophy.

In the root of the src folder will be the .fla file, the GameController.as file which will control the .fla file, and the .swf file it generates. You may want to create another bin folder to hold the .swf file; I'll leave it up to you.

C.as File

In the Game package, you will find the C.as file. It holds all constant game values, somewhat like a preference file.

constantsfile

Now, if you're curious why I didn't just name it Constants.as, it's just because I'm lazy. You will need to reference these constants every now and then, so instead of having to type Constants.GRAVITY wherever needed, I just need to type C.GRAVITY. If it bothers you a lot, then just use Constants.as.

At this point of time, if you're unfamiliar with the AS3 code, again, I do advise you to pick up a book to learn about basic AS3. There's just too much contents to cover about game design and programming already. In a nutshell, line 22 - package Game refers to the package this code belongs to. Notice that it matches the folder structure. Line 24 - public class C is the name of the class that we're defining here in this actionscript file.

Each of the game values will be stored here for easy modification. Without this constants file, you will have to mix in these values like gravity, speed of the player into the main code itself. Imagine yourself wanting to tweak these values, say increase the speed of the player. You will have to search through your entire code just to find that value. And if this is a value that you use in a few segments of your code, you inadvertently need to modify all of them. It is a big hassle, and you're prone to making mistakes. So, go with a constants file.

GameController.as File

This file ... let me find an analogy ... is the soul of your entire flash game. This is where the gaming logic, handling of the user's input, handling of the display, take place. This is where the MAGIC of your game happens. If you fumble here, your flash game could end up being laggy, buggy, etc.

I'm using the GameController.as that you'll be seeing in Tutorial 1, but they all follow the same structure in the future tutorials, so there should not be major surprises as you move on. The first few lines of code (line 24 to 27) in the GameController.as file imports in the relevant modules that are necessary for making the flash game work. Think of these modules as written code that is provided by Flash or other programmers and you're using them in your game.

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package
{
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.geom.*;
	import flash.text.*;
	
	import Game.*;
	
	public class GameController extends MovieClip
	{
		private var player:Jovia;
		private var speed:Number;
		private var gravity:Number;
		private var randomChance:Number;
		private var apples:Array;
		private var score:Number;

Line 29 imports this package Game, which now holds the C.as file. You need this line of code to be able to reference the constants we will define in C.as.

In line 31, GameController extends MovieClip because we're using GameController to act as the class of the FLA file we'll be authoring in. Since that is itself a movieclip, we have to have GameController extend MovieClip. The next few lines of code from 33 to 38 declares all the variables that will be used in game. By declaring these variables here, they can be used throughout the entire class.

The most important element in this file is the game loop. The execution of your game depends on it, and the way you write it and optimise it influences the gaming experience immensely. There are actually quite a few resources and research on game loops. But since most commercial games do not reveal their actual implementation, most are just what the academia world feels how the game loop should work. I'll discuss a straightforward implementation of a game loop here.

The Game Loop

A game loop can be described as below.

gameloop

This loop handles the recognition and reaction to the player's input. The codes to be placed under the header "Handle User Input" are the codes which will handle the logic to capture which keys the user is pressing, where the mouse location is, etc.

The game logic should be coded into the area labelled "Handle Game Logic". So if the game involves a player jumping, this is the part where you data crunch the current situation, calculate the player's new position, check for collisions and react accordingly, etc.

The last part of the loop handles updates to the display that the user experiences. Say if some scoring is made within the game logic, or the player loses a life, this is the part where you update your UI to display such information to the player.

If you would like to, jump ahead and download Tutorial 1. Open up the source files and examine how the GameController.as is written.

Now, since this is a game loop, we know that this update function must be called x times every second, where x will be your fps. For smoother gameplay and animation, set your fps to about 30. In Flash, the movie clips provide an easy way to loop through this function.

We simply do something like

add game loop

The ENTER_FRAME event is called as many times as the fps that you set for your fla file. Take note however, if the execution time of your game loop far exceeds the capability of your computer's ability to process them within the time frame (if your fps is 30, it means your game loop need to finish executing withint 1/30 seconds), your game will inevitably lag. That is when you see the overall fps dropping.

With that, let's move on to the exciting tutorials! The first tutorial, Apple Catcher, will guide you through the most basic game you can create.

Flash Resources
Preloader FPS Display Sounds & Music
Keycodes Name Generator
Game Development Resources
Sprite Sheets

Flash Tutorial Links:
Play Games: HTML5 Tutorials:
gaming tools download on app store now!
Home | About Us | Contact Us
Powered by Make Flash Games. All Rights Reserved.
By Joseph Tan