Creating user UI using Flixel

Question

I am new to game development but familiar with programming languages. I have started using Flixel and have a working Breakout game with score and lives.

What I am trying to do is add a Start Screen before actually loading the game.

I have a create function that adds all the game elements to the stage:

override public function create():void
   // all game elements
{

How can I add this pre-load Start Screen? I'm not sure if I have to add in the code to this create function or somewhere else and what code to actually add.

Eventually I would also like to add saving, loading, options and upgrades too. So any advice with that would be great.

Here is my main game.as:

package
{
    import org.flixel.*;

    public class Game extends FlxGame
    {
        private const resolution:FlxPoint = new FlxPoint(640, 480);
        private const zoom:uint = 2;
        private const fps:uint = 60;

        public function Game()
        {
            super(resolution.x / zoom, resolution.y / zoom, PlayState, zoom);
            FlxG.flashFramerate = fps;
        }
    }
}

Thanks.

Answer 1

The way that I usually do it is with a different FlxState - I use one for "Menu", the game itself, and the Game Over screen.

So make a new class that extends FlxState, call it maybe "MenuState" and then say:

super(resolution.x / zoom, resolution.y / zoom, MenuState, zoom);

Inside MenuState, on a button press or something, say:

FlxG.switchState(PlayState);