Flixel Adventure Game Tutorial – Part 6: Creating layers with FlxGroup

Index
Previous part: Interactions

In the previous part we have expanded both our Character and our PlayState class to deal with character interactions. We are now able to have basic dialogue, without any events attached to it. In this part we will group the on-screen items into layers, so it will be easier to manipulate them later on.

Our interface currently consists of a dialog-box added on top of the background. Flixel has a useful class to order things, called FlxGroup. We will make group for each of the layers we have, we’ll do this in the constructor of our PlayState class.

You will know the first step by now, importing the package that we will need:

import org.flixel.FlxGroup;

Then, we’ll add the variables for each of the layers that we will have: front (GUI), foreground and background and inventory.

private var GUI:FlxGroup = new FlxGroup();
private var foreground:FlxGroup = new FlxGroup();
private var background:FlxGroup = new FlxGroup();
private var Inv:FlxGroup = new FlxGroup();

Then split all the objects into groups, and add the groups themselves to the game-loop. Instead of using ‘add’, without a prefix, use the prefix that corresponds to the correct layer the object is to be placed on. You won’t have to do this for the Inv group, we will do this in the next part of this tutorial.

For example, the variable ‘char’ will be placed on the foreground.
So change it from this:

add(char);

To the line below.

foreground.add(char);

Do the same for all the other objects in the list below.

// Background layer, map.
background.add(map);

// Foreground layer, with all the characters.
foreground.add(char);
foreground.add(char2);

// GUI layer.
GUI.add(dialogBG);
GUI.add(text);

At the end of the constructor, add all the layers in the right order.

add(background);
add(foreground);
add(GUI);
add(Inv);

This might have been a bit confusing, so here is what the constructor of the PlayState class looks like now.

public function PlayState()
{
	// Setting up the map.
	map = new FlxTilemap();
	map.startingIndex = 0;
	map.drawIndex = 0;
	map.loadMap(new txtMap, imgMap, 16, 16);
	background.add(map);
			
	// Dialog background.
	dialogBG = new FlxSprite(0, 0);
	dialogBG.createGraphic(FlxG.width, 42, 0xff333333);
	dialogBG.alpha = 0.75;
	dialogBG.scrollFactor.x = 0;
	dialogBG.scrollFactor.y = 0;
	dialogBG.visible = false;
	GUI.add(dialogBG);
			
    // Text used for dialogue.
    text = new FlxText(5, 5, FlxG.width - 10, "Hello World!");
    text.scrollFactor.x = 0;
	text.scrollFactor.y = 0;
	text.visible = false;
    GUI.add(text);
			
	// Creating the character.
	char = new Character(5, 5, imgChar, map);
	foreground.add(char);
			
	// Second character
	char2 = new Character(10, 5, imgChar2, map);
	char2.dialog = ["Richard: Hey how are you today!",
	"You: I'm ok, thank you.",
	"Richard: Do you want some candy?",
	"You: No."];
	foreground.add(char2);
			
	// Adding the FlxGroups.
	add(background);
	add(foreground);
	add(GUI);
    add(Inv);
			
	// characterList
	characterList.push(char);
	characterList.push(char2);
}

When you run the game you will see that everything still functions the same, this is good. We can change the visibility of FlxGroups just as we did for regular Flixel objects, doing this will save lines.

First, remove the following lines from the constructor.

dialogBG.visible = false;
text.visible = false;

Instead of setting each individual object’s invisibility, we’ll just use the FlxGroup’s property.

GUI.visible = false;

Do the same for the invisibility toggles in the update function:

text.visible = true;
dialogBG.visible = true;

Change the above, to:

GUI.visible = true;

And for the invisible part:

text.visible = false;
dialogBG.visible = false;

Change the above, to:

GUI.visible = false;

Now you have know what to use FlxGroups for and how you can conveniently change properties of all the objects in a group. In the next part we will take a look at creating an inventory and an item class. This is an important step in creating a fun-to-play game-mechanic for our Flixel Adventure Flash game!

You can download the code for this part here: Flixel Adventure Game Tutorial part 6 code.

Next Part: The Inventory

Leave a comment

Your email address will not be published. Required fields are marked *