How To Make A Simple Platform Game In Flash Part 1: Getting Started

Go back to How To Make A Simple Platform Game In Flash

Before we begin:

This tutorial was compiled using flex_sdk_3.5.0.12683_mpl and flixel v2.35.
If you have this error from the start:

Double-click the error to get into the code and do the ff. comments properly.
Comment the Flex 4.x SDK and uncomment Flex 3.x SDK because this tutorial is using Flex 3.5 SDK:

FlxGame.as

//
//Flex v4.x SDK only (see note above):
//[Embed(source="data/nokiafc22.ttf",fontFamily="system",embedAsCFF="false")] protected var junk:String;
      
//Flex v3.x SDK only (see note above):
[Embed(source="data/nokiafc22.ttf",fontFamily="system")] protected var junk:String;

//We are using Flex v3.x SDK
//

Let's Get Started:

1. Download the Flixel engine v2.35.
2. Launch FlashDevelop . click Project and choose New Project… from the menu.
3. Select AS3 Project from the list, use Tutorial for the name of this project.
4. After downloading Flixel , extract the "org folder" to the "src folder" inside your project’s folder.
5. Delete the Main.as file then make a new class file to the src folder, named Tutorial.as . Right-click on it and select Always Compile, double-click to open the file.

This will set this Tutorial.as to compile whenever the play button or F5 is pressed.

6. Here's what the code looks like:

package  
{
    public class Tutorial
        {
             public function Tutorial()
        {

        }    
    }
}

That is the simple composition of a class in AS3.

Note: Classes are ways for making small routines that you can “call” anytime and can be used in other portions of your program.

7. Next is to utilize the Flixel engine in our project, we will use the import keyword.

import org.flixel.*;

In this example, we have imported everything. Sometimes, we only need to select only what we need.

Note: Importing a class file is simply using all of its functions to be included on your program.

8. Now let's define the dimension of this game:

[SWF(width = "640", height = "480", backgroundColor = "#000000")]  

This will set the project SWF file into 640 x 480 pixels in a black background.

9. Then we add the preloader:

[Frame(factoryClass="Preloader")]

We will create the preloader class later.

10. Then, we will extend Tutorial class as the FlxGame.as:

public class Tutorial extends FlxGame

Now Tutorial class becomes similar to FlxGame class, with a new name, and new contents.

Note: Extending classes is like duplicating, which will not affect the original class.

11. Then, we create the constructor of type void:

public function Tutorial():void

Note: All functions should return values. Functions of type void just returns none.

Note: A constructor is always called when a class is initialized. It has the same name of the class itself.

When we press F5 it will call the Tutorial function by default, which is the constructor that class.

Next we need to call super(), a function inside FlxGame. Calling super() will call the constructor of the original class that we are extending from:

super(320, 240, MenuState, 2);

FlashDevelop will show a tooltip for you to see each parameter passed.

Check FlxGame Class in the FlxGame.as file which looks like this:

function FlxGame (GameSizeX : uint, GameSizeY : uint, InitialState : Class, Zoom : uint)

Where:
GameSizeX - width in pixels, 320
GameSizeY - height in pixels, 240
InitialState - is the starting class, the MenuState
Zoom - set to 2, twice the given dimension. Therefore the game will become 640x480.

How colors are identified by Flixel:
0xAARRGGBB

AA - alpha transparency
RR - red
GG - green
BB - blue

12. Next we'll create the Preloader class, same as how we create the Tutorial class. But we are importing the FlxPreloader class, so in Preloader.as:

import org.flixel.FlxPreloader;

13. Extend this as FlxPreloader:

public class Preloader extends FlxPreloader

14. Place these codes inside the constructor:

className = "Tutorial";
super();

super() instructs the preloader to get the game files into memory and load the screen.

className - is the class to be called after the loading screen.

This is the whole Preloader.as:

package  
{
    import org.flixel.FlxPreloader;

    public class Preloader extends FlxPreloader
    {
        public function Preloader()
        {
            className = "Tutorial";
            super();
        }

    }

}

15. Now, create a "com folder" inside src folder. Inside "com folder" create another folder Tutorial. Create a new class named MenuState.as.

16. Going back to Tutorial.as, import the MenuState.as:

import com.Tutorial.MenuState;

The whole Tutorial.as will now be:

package  
{
    import org.flixel.*;
    import com.Tutorial.MenuState;   

    [SWF(width="640", height="480", backgroundColor="#000000")]
    [Frame(factoryClass="Preloader")]

    public class Tutorial extends FlxGame
    {
        public function Tutorial():void
        {
             super(320, 240, MenuState, 2);
        }  
    }
}

On the next part we will add the Game Menu in MenuState.as ..


Go back to How To Make A Simple Platform Game In Flash