Index
Previous part: Creating layers with FlxGroup
In the previous part we have used the FlxGroup class to group objects and manipulate them. In this part we will make an on-screen inventory.
We want to display items on-screen like we do with the dialog. Let’s start by creating an item class, we want it to extend FlxSprite, so we can display images using it. On top of that, we would also like to name each item so we can reference to it easily.
package com
{
import org.flixel.FlxSprite;
/**
* ...
* @author kcnh
*/
public class Item extends FlxSprite
{
// Image variable, publicly accessable.
public var image:Class;
// Name variable, publicly accessable.
public var name:String;
// If there is only 1 argument specified, the name, the image variable will be null.
public function Item(name:String, image:Class)
{
// Setting up variables.
this.image = image;
this.name = name;
// Load the graphic.
loadGraphic(this.image, false, false, 16, 16);
}
}
}
Now that we have defined what an item has as its properties, we want to create the items on-screen. Usually a player in an adventure game starts out with empty pockets, so we will start out with zero items displayed in the inventory.
Download the images above and save it in your project’s com/data folder, and add the variables to your PlayState to embed the image into your file.
// Pencil [Embed(source = "data/pencil.png")] private var imgPencil:Class; // Letter [Embed(source = "data/letter.png")] private var imgLetter:Class;
For this game we will start with a simple item-slots system. When you get more experience programming, you can try to expand this into an inventory where you can drag-and-drop and select items, but for now we’ll keep it simple.
Make an array that will contain all the items in the inventory and an array that contains all the items that we can add.
private var inventory:Array = new Array(); private var items:Array = new Array();
In the constructor, add all the items you want in your database to the items list.
// itemslist
items.push(new Item("Letter", imgLetter));
items.push(new Item("Pencil", imgPencil));
The next function contains a for-loop that with go through all the items in the inventory array and place them in the inventory-box, underneath the dialogue-box. Note that we can only have 20 ( 320 / 16 = 20 ) items on-screen this way. For our tutorial-game it will do just fine, however, you can be creative and come up with your own ways to display the inventory!
private function updateInv():void
{
for (var i:int = 0; i < inventory.length; i++)
{
inventory[i].x = 16 * i;
inventory[i].y = 44;
}
}
We want a function to add an item to the inventory.
public function addInv(name:String):void
{
// temp Item variable
var newItem:Item;
// find item
for (var i:int = 0; i < items.length; i++ )
{
if (items[i].name == name)
{
newItem = new Item(items[i].name, items[i].image);
}
}
newItem.scrollFactor.x = 0;
newItem.scrollFactor.y = 0;
// Add newItem to the list
inventory.push(newItem);
// Add to Inv layer.
Inv.add(newItem);
// Update display.
updateInv();
}
And, of course, a function to remove an item from the inventory.
private function remInv(input:String):void
{
for (var i:int = 0; i < inventory.length; i++ )
{
// If the names match.
if (inventory[i].name == input.split(",")[0])
{
// Remove item.
Inv.remove(inventory[i], true);
inventory.splice(i, 1);
// Remove all, or just 1 instance.
if (input.split(",")[1] == "true")
i--;
else
break;
}
}
// Update display of inventory.
updateInv();
}
You might wonder why both the add and the remove function have only one argument, a String. I have done this so it will be easier in the next part to convert strings to functions so we can have events, such as item trading, while talking.
Let’s design our inventory box, first, a new variable.
private var invBG:FlxSprite;
Second, in the constructor.
invBG = new FlxSprite(0, 42); invBG.createGraphic(FlxG.width, 20, 0xFF773333); invBG.alpha = 0.75; invBG.scrollFactor.x = 0; invBG.scrollFactor.y = 0; Inv.add(invBG);
We want our inventory to be visible, but only when the ‘x’ button is pressed, place this code outside the ‘if-frozen’ part of the update function, so we can always toggle our inventory on/off.
if (FlxG.keys.justPressed("X"))
{
updateInv();
if (Inv.visible)
Inv.visible = false;
else
Inv.visible = true;
}
When you run the game, you will see that the inventory starts visible, if you want to change this, you can do it like we did for the dialoguebox.
Inv.visible = false;
For testing purposes, we can add and remove some items to the inventory, do this in the constructor.
addInv("Pencil");
addInv("Letter");
remInv("Pencil,false");
The remInv function will look for matching names, so pay attention to what you write down when removing items from the inventory. If you run the game, you will see that only the letter is in the inventory, this is because we remove the pencil after it is being created. You can now remove the previous three lines from your code.
We now have a functioning inventory, we can add, remove, and show items. In the next part we will focus on trading items with non-playable-characters and picking up items. I hope you are getting more acquainted with programming, Flixel, Flash and Flashdevelop. If you are having a hard time, I suggest reading back previous parts of this Flash/Flixel Adventure Game tutorial.
You can download the code for this part here: Flixel Adventure Tutorial part 7 code.
Next Part: Picking up items