How To Make A Simple Platform Game In Flash Part 2: Creating The Game Menu

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

We already finished the simple template project starting correctly from previous part. We will now be using the FlxState extension for adding the simple menu for the game.

A state is simply a condition of your game, i.e. Menu state that shows menus or other information regarding the game; Play state is the state on which the actual game commences.

In this tutorial we will be a using two simple states: the MenuState, and the PlayState.


The MenuState

1. Open the MenuState class created from the previous part. You'll see something like this which was created by default in Flashdevelop:

package com.Tutorial
{   
    public class MenuState
    {
        public function MenuState()
        {

        }
    }
}

2. Next is to import (all) classes from Flixel that we might need:

import org.flixel.*;

3. Then, we extend the MenuState class as FlxState:

public class MenuState extends FlxState

4. Then, for the constructor - since we extend MenuState as FlxState , we'll need to take control the constructor function for Flxstate completely by using override:

override public function MenuState():void

5. Then we will want to display the name of this game on the Menu, and some instructions to the player on how to start or play the game. We can add something like sprites, sounds, and effects, logo on the menu screen. For simplicity we will only use the FlxText Class which is used for displaying formatted text or strings:

var txt:FlxText
txt = new FlxText(0, (FlxG.width / 2) - 80, FlxG.width, "Flixel Tutorial Game")
txt.setFormat(null,16,0xFFFFFFFF,"center")
this.add(txt);

A glance at what it does:

At first, we declare that a variable stores our initialization FlxText. It is necessary because FlxText has the new options of formatting(layout) which are not a part of constructor. Now, we will pass an object to it. "new FlxText ()" is going to create a new object FlxText. We are going to pass certain parameters via the function of setFormat inside FlxText and then our new object FlxText is going to be attached to our MenuState.

By looking for the Class FlxText constructor in the Documentation, we can see what parameters it expects:

public function FlxText (X : Number, Y : Number, Width : uint, Text : String)

We are passing 0, (FlxG.width / 2) - 80, FlxG.width and "flixel Tutorial Game", which should put our text, "flixel Tutorial Game", near the center of the screen.

Then we'll look at what makes setFormat. SetFormat FlxText function of demand for its own parameters7 to define the style:

setFormat Public (Font: String, size: Number, color: uint, Alignment: String)

This time we are passing: null, 16, 0xFFFFFFFF, and "center. " We want to use the default font used in flixel, we send a null value which is essentially told not to change the value. The text should appear as white text on 16 pixel centered. Note that it is 16 "pixels" in height, not to be confused with font size when using your own fonts.

Finally, this.add (txt) is essentially saying "take something and attach it to this. " It's sort of shorthand for the current object in AS3. In our case, this is the forum for MenuState that is currently open and running through this constructor, and we say to the current state of our object FlxText "txt" and display it in position that we specified.

6. Let us tell the player on how to start the game. In right under our new line of text, add:

txt = new FlxText(0, FlxG.height  -24, FlxG.width, "PRESS X TO START")
txt.setFormat(null, 8, 0xFFFFFFFF, "center");
this.add(txt);

This should add the white text "PRESS X TO START" towards the bottom of the screen, and in a smaller pixel. That's all we want to MenuState of constructor.

7. We now need to tell the game what to do whenever it updates. Most programs have some sort of loop system, always running while the program is running - usually a large number of iterations per second. This loop, in its simplest form, looks like this:

Start:
Wait until something happens
Back to Start

In our case, the game loop flixel is mostly going to be handling a lot of things for us, so we will not have to worry about, but we want to be able to do things so that this loop is running, so we use the "update" function.

Essentially, flixel will call "update" each iteration of the loop, and we can choose to make a difference in the update function if you want. For MenuState, we'll just wait until the player press X. Add this code after constructor:

override public function update():void
{    
    if (FlxG.keys.pressed("X"))
    {
        FlxG.flash.start(0xffffffff, 0.75);
        FlxG.fade.start(0xff000000, 1, onFade);
    }
    
    super.update();
}

We add a function at once, but do not worry, it's pretty simple.

First, we will "override" the "update" function of Flxstate - which means that instead of FlxState's update being called, we say that "use MenuState update instead".

Then, we check if

FlxG.keys.pressed("X")

is True or False. “FlxG” is a class in Flixel that holds many of the general pieces all at once. keys is a variable in FlxG that calls the FlxKeyboard class, “pressed” is a boolean function inside the Keyboard class that tests if the key (“X”) has been pressed. So that, we’re checking “is FlxG.keys.pressed(”X") True?" If it is indeed, for example, the player has hit X on the keyboard, we’re going to execute the next part of code. If not, just skip and call the update of the parent class.

So if X is pressed, and keys.pressed ("X") is true, then we will do two things.

* First, we'll call FlxG flash, what happens to flash white on the screen, then we will fade to black, through the "fade" function.
* When blending is complete (which should take 1 second), we'll call "onFade", which we write next.

8. Under the constructor, we add a new function:

private function onFade():void
{
    FlxG.state = new PlayState();
}

This function will be called after the fade is completed. All it will do is change the course of state MenuState to PlayState.

9. We can go ahead and create the PlayState - add a new file on your com/Tutorial folder, and name it PlayState.as and follow the MenuState format like this:

package com.Tutorial 
{
    /**
     * ...
     * @author pisces_eyes
     */
    
    import org.flixel.*;
    
    public class PlayState extends FlxState
    {
        
        override public function create():void 
        {
            
        }
        
    }

}

So lets review: when the player starts the game, it will initialize and enter the MenuState:

* When MenuState loads, its going to put the text on the screen and wait for the player to press X on the keyboard
* Once the player presses the button, the screen flash white, then fade to black.
* Upon completion of fade, it will move the game state from MenuState to PlayState - which is where all our logic located.

If you try out your game now, you'll be able to see the menu come, and flash / fade when you press X. After that is an error because we have not yet finished with the PlayState ... we will ensure that in the next section.

So your file should look like this in MenuState.as:

package com.Tutorial
{    
    import org.flixel.*;
    public class MenuState extends FlxState
    {
        override public function MenuState():void
        {
            var txt:FlxText
            txt = new FlxText(0, (FlxG.width / 2) - 80, FlxG.width, "Flixel Tutorial Game")
            txt.setFormat(null,16,0xFFFFFFFF,"center")
            this.add(txt);

            txt = new FlxText(0, FlxG.height  -24, FlxG.width, "PRESS X TO START")
            txt.setFormat(null, 8, 0xFFFFFFFF, "center");
            this.add(txt);
            }

            override public function update():void
        {
            if (FlxG.keys.pressed("X"))
            {
                FlxG.flash.start(0xffffffff, 0.75);
                FlxG.fade.start(0xff000000, 1, onFade);
            }
        
            super.update();
        }
        
        private function onFade():void
        {
            FlxG.state = new PlayState();
        }
    }
}

In the next part we will create the Player, and adding stuffs like game sprites!


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