Simple Inventory System

[jmunsch]

Hello,

 

I am currently working on RPG type mechanics.

I am trying to figure out how to create a really simple sprite based inventory system.

How can I get the sprites located on a tile without detecting collision, more generally what are some techniques to use for item collection without using collision? I am currently trying to do it based on clicking the sprite/tile and eventually will do it based on some action key like spacebar or something.

I am adding them to the map like this.

   

       LOOT = game.add.group();     // LOOT.name = 'LOOOOOT'    map.createFromTiles([76], [0], 'LOOT', 'statues_objects', LOOT, {key: 'shovel'})// group, properties)    map.createFromTiles([77], [0], 'LOOT', 'statues_objects', LOOT, {key: 'pick'})// group, properties)    map.createFromTiles([78], [0], 'LOOT', 'statues_objects', LOOT, {key: 'rope'})// group, properties)    game.input.onDown.add(getTileProperties, this);    LOOT.children.forEach(function(c){        console.log('LOOT child.x/y',c.x, c.y)    })

 

And when I click on some of the target tiles/sprites with:

 

function getTileProperties() {    var wx = game.input.activePointer.worldX;    var wy = game.input.activePointer.worldY;    var x = statues_objects.getTileX(wx);    var y = statues_objects.getTileY(wy);    console.log('clicked tile X, Y, wx, wy', x, y, wx, wy)    var tile = map.getTile(x, y, statues_objects);    console.log('tile worldX/Y', tile.worldX, tile.worldY);    tile.properties.someProperty = true;}

 

 

However when I click on the tiles/sprites the numbers just are not matching up the tile size is 32px by 32px:

 

// These Pixel locations game.html:191 LOOT child.x/y 1408 64game.html:191 LOOT child.x/y 768  384game.html:191 LOOT child.x/y 1440 64game.html:191 LOOT child.x/y 800  384game.html:191 LOOT child.x/y 1472 64// Should match these locations?game.html:200 clicked tile X, Y, wx, wy 14 16 453 528game.html:202 tile worldX/Y 448 512game.html:200 clicked tile X, Y, wx, wy 19 15 620 497game.html:202 tile worldX/Y 608 480game.html:200 clicked tile X, Y, wx, wy 20 15 667 500game.html:202 tile worldX/Y 640 480game.html:200 clicked tile X, Y, wx, wy 19 16 625 522game.html:202 tile worldX/Y 608 512game.html:200 clicked tile X, Y, wx, wy 19 16 619 529game.html:202 tile worldX/Y 608 512

Any thoughts would be greatly appreciated, been trying to step into each of the functions to see if I could find any clues but haven't found any yet.

I also found this thread about the same time that I asked this question: http://www.html5gamedevs.com/topic/17090-how-to-make-a-inventory-system-in-phaser


I have my attempt online at: http://www.jamesmunsch.com/games/starpusher/game.html

[drhayes]

I don't think I understand.

 

You want the player to be able to click on the items to pick them up, not run over them with the player sprite? You can input enable each sprite and look for pointer events on the sprite itself.

 

Or maybe you're talking about a Diablo-esque inventory screen? Have you seen Phaser.Button? "A Button is a special type of Sprite that is set-up to handle Pointer events automatically.".