Creating different scenes is fundamental to creating any large game. A scene allows you to logically separate the concerns of each of your different game mechanics that do not mix. For example, a menu doesn’t usually appear while you’re playing the game right? This is similar to a scene in a movie; each one has its own purpose. Some examples would the shop menu from Nier Automata and the game menu from Legend of Zelda. You can see an example below!

Ocarina Of Time Menu

As you can see the above is completely separate from the rest of how the gameplays and controls serve a different purpose than they do in the main game scene.

In Flixel, we can make similar scenes with FlxStates and FlxSubStates. Let’s start with FlxStates as these are usually your most common scene.

FlxStates – Regular Scenes

FlxStates are akin to regular scenes. They are scenes such as the main game for gameplay, title screen, level select screen. They are reserved for the main parts of your game that require the most detail and act as the first link in a chain of scenes you navigate to often. Now, if that doesn’t make sense, don’t worry it will soon when we explain FlxSubStates. So, the big question is how do you create a FlxState in the code? Here’s an example.

/**
* Basic example of a scene used in the tutorial for HaxeFlixel as well.
*/
class PlayState extends FlxState {
override public function create() {
super.create();
add(new FlxText('Hello World', 32).screenCenter());
}
override public function update(elapsed:Float) {
super.update(elapsed);
}
}
view raw PlayState.hx hosted with ❤ by GitHub
FlixelState

That’s it, you created your first scene in your game! Here you can work on your gameplay loop, setup your sprites, and more! Now, there’s a lot more you can do, but this is the basics. Now, remember when I mention threads? Let’s get into that.

FlxSubState – Subscenes (Threads)

The FlxSubstate allows you to create sub-scenes. These are smaller scenes that aren’t the core experience such as menus. The important thing about scenes like this is that they need to link back to the main scene. That allows you as the creator to just restore the previous scene rather than recreating everything from scratch. This is the threading I mentioned. The main scene is what the FlxSubState will return to once your close the substate. This is done without destroying the previous scene; this prevents us from losing the current state of the game. If you didn’t have this, you would have to restart the game every time you enter the menu in Ocarina Of Time or change your game settings. Wouldn’t that be annoying? So, how do we do that in Flixel? Here’s an example of a sub-scene I use in my games. Note this contains some custom code so it won’t just work in your game.

package game.states;
import game.ui.TextButton;
/*
* Custom Pause Scene I made for my game.
*/
class PauseSubState extends FlxSubState {
public var pauseText:FlxText;
private var pauseExitSound:FlxSound;
private var initialPosition:Float;
private var timeCount:Float;
public function new() {
super(KColor.RICH_BLACK_FORGRA_LOW); // Lower Opacity RICH_Black
}
override public function create() {
pauseExitSound = FlxG.sound.load(AssetPaths.pause_out__wav);
FlxG.mouse.visible = true;
pauseText = new FlxText(0, 0, 1, 'Pause', Globals.FONT_L);
pauseText.screenCenter();
pauseText.y = 30;
pauseText.scrollFactor.set(0, 0);
initialPosition = pauseText.y;
add(pauseText);
var resumeButton = new TextButton(0, 0, 'Resume', Globals.FONT_N,
resumeGame);
resumeButton.screenCenter();
resumeButton.y += 40;
resumeButton.hoverColor = KColor.BURGUNDY;
resumeButton.clickColor = KColor.BURGUNDY;
var returnToTitleButton = new TextButton(0, 0, 'To Title',
Globals.FONT_N, toTitle);
returnToTitleButton.screenCenter();
returnToTitleButton.y += 80;
returnToTitleButton.hoverColor = KColor.BURGUNDY;
returnToTitleButton.clickColor = KColor.BURGUNDY;
add(resumeButton);
add(returnToTitleButton);
super.create();
}
override public function update(elapsed:Float) {
super.update(elapsed);
updatePausePosition(elapsed);
}
public function updatePausePosition(elapsed:Float) {
timeCount += elapsed;
pauseText.y = initialPosition + (30 * Math.sin(timeCount));
if (timeCount > 30) {
timeCount = 0;
}
}
//Resume game closes the substate allowing you to return to the previous scene.
public function resumeGame() {
pauseExitSound.play();
close();
}
//The same as above happens here for toTitle. The Substate will close, but also switch to a main state like
//the titleState/Scene.
public function toTitle() {
pauseExitSound.play();
FlxG.camera.fade(KColor.BLACK, 1, false, () -> {
close();
FlxG.switchState(new TitleState());
});
}
}

As you see it’s very similar to a FlxState. The cool thing is we have this close method that lets us return to the previous scene. Now, how would you go to a SubState from your main game scene? This is how you do it.

openSubstate(new PauseSubstate()) //Opens the pause substate ontop of the current scene.

Now, when making your own game, you’ll have to combine both of these types of states to make a cohesive game. You can see the usage of the close function which will return us to whichever scene came before the pause scene.

Conclusion

With that said, I hope this helps you with creating your own game in FLixel.

Good luck game making!!

%d bloggers like this: