How to make a inventory system in phaser

[ghjkg546]

Any example?

[NateTheGreatt]

This is an extremely vague question. How do you want your inventory to be rendered? Do you want a simple list or a more complicated grid-layout? Storing items is as easy as making an items array on your player object and populating it when the player collects something in the game world.

 

I'm currently creating an inventory for my game that renders everything in a grid and will allow you to drag and drop items between slots. This is being done by creating a simple 1d array on my player called items which is added to whenever the player overlaps an item laying in the world somewhere. You can populate the items array with actual sprites or with a simple JS object containing data about the item. I then created an Inventory class which renders each item from the player's items array into a nice, evenly spaced grid that shows/hides when the "I" key is hit. I'm currently working on drag+drop features for moving items from slot to slot.

[jmunsch]

+1 on this.

I just asked a similar question, but more based on item collection within a world based on sprites and tile locations.

I have scoured the internet and see a lot of examples based on collision, but haven't been able to find an example of click based, or sprite based item collection.


Here is what I have so far for an inventory system. (sorta messy and probably not the best way to got about it) but use keys "c", "i", and "1" to see how it works Its based on the example here: http://phaser.io/examples/v2/text/text-tabs-from-array

Should work if you copy and paste it into the phaser.io example text editor. I wasn't able to figure out why it wasn't attaching the `parseList` method to the text object.
 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create , update: update});function preload() {    game.load.image('basic_inventory_bg', 'assets/skies/deepblue.png');}var headings;var atext;var atext2;var inventory_group;var inventory_open = false;var inventory_key;var inventory = [];function loadInventory() {    headings = ['name', 'damage', 'speed', 'description']    items = {    '0': {        'name': 'Knife',        'damage': '3',        'speed': '1',        'description': 'A simple knife' },    '1': {        'name': 'Dagger',        'damage': '4',        'speed': '1',        'description': 'A simple dagger' },    '2': {        'name': 'Rapier',        'damage': '6',        'speed': '2',        'description': 'A simple rapier' },    '3': {        'name': 'Sabre',        'damage': '6',        'speed': '3',        'description': 'A simple Sabre' },    '4': {        'name': 'GreatSword',        'damage': '12',        'speed': '10',        'description': 'Must always be used with 2 hands'}    }    addItemToInventory(items[0])    addItemToInventory(items[3])    console.log(returnInventoryItemsAsList())    inventory_key = game.input.keyboard.addKey(Phaser.Keyboard.I);    inventory_key.onDown.add(inventory_start);    inventory_clear_key = game.input.keyboard.addKey(Phaser.Keyboard.C);    inventory_clear_key.onDown.add(inventory_clear);    inventory_add_key = game.input.keyboard.addKey(Phaser.Keyboard.ONE);    inventory_add_key.onDown.add(inventory_add);}function inventory_clear() {    inventory = [];}function inventory_add() {    addItemToInventory(items[1])    addItemToInventory(items[2])}function addItemToInventory(item){    inventory.push(item)}function returnInventoryItemsAsList() {    return inventory.map(function(item)    {        return headings.map(function(key)        {            console.log(item[key])            return item[key]        })    })}function inventory_start() {    if (inventory_open)    {        inventory_group.destroy();        inventory_open = false;    }    else    {        var style = { font: "10px Courier", fill: "#fff", tabs: [ 150, 110, 60 ] };        var inv_bg = game.add.sprite(0,0, 'basic_inventory_bg')        atext = game.add.text(inv_bg.position.x, inv_bg.position.y, '', style);        atext = addParseList(atext); // not sure why this isn't happening but should be able to remove this line         atext.parseList(headings);        atext2 = game.add.text(inv_bg.position.x+30, inv_bg.position.y+30, '', style);        atext2 = addParseList(atext2);        atext2.parseList(returnInventoryItemsAsList());        inventory_group = game.add.group();        inventory_group.add(inv_bg);        inventory_group.add(atext);        inventory_group.add(atext2);        inventory_open = true;    }}function create() {    loadInventory()}function update() {}// ?? hrm ??? https://github.com/photonstorm/phaser/blob/486c15f16fd7c2f154d55cb0239fa0dbdeaed1f8/src/gameobjects/Text.js#L1003addParseList = function(textObject){    textObject.parseList = function (list) {        if (!Array.isArray(list))        {            return this;        }        else        {            var s = "";                for (var i = 0; i < list.length; i++)            {                if (Array.isArray(list[i]))                {                    s += list[i].join("\t");                        if (i < list.length - 1)                    {                        s += "\n";                    }                }                else                {                    s += list[i];                        if (i < list.length - 1)                    {                        s += "\t";                    }                }            }        }            this.text = s;        this.dirty = true;            return this;        };    return textObject;}

[NateTheGreatt]

I have finished a basic implementation of a classic MMORPG grid-based inventory, the demo of which you can check out here if this style is what you're going for. The inventory system is encapsulated as a component and is added to the player entity. I'm considering rewriting this as a Phaser plugin maybe. Hope this helps!

[jmunsch]

@NateTheGreatt 

Awesome work. Reading through the code right now.

Here is the question that I also asked it was pending approval when I bumped this thread.

http://www.html5gamedevs.com/topic/17278-simple-inventory-system/

[NateTheGreatt]

Oh okay, nice! Glad I could help. The code is a liiittle messy right now, but I tried to organize things into logical, higher-level functions. Readability needs polishing but it's completely functional. Let me know if something doesn't make sense. Soon I will be refactoring the grid logic to implement equipment slots & ability slots using the same code.