Jump to content

Scrollable View in Phaser 2.5.0 for Inventory or What?


megabyterain
 Share

Recommended Posts

Ok, so I'm trying to set up an inventory system for a game of mine in Phaser 2.5.0 and there doesn't seem to be a way to have a scrollable view in for my inventory. I'm trying to make an inventory similar to that of Fallout's where part of the screen scrolls through the items, while the other part shows the item's description and picture (no fullscreen scroll please).

Has someone found a work around to this? If I can't use a scroll view would the next best thing be a multi-page inventory? Maybe a grid based one? Any ideas?

 

Thanks!

Link to comment
Share on other sites

Scrolling tends to be pretty hard to implement, and most games I've seen use a page-based inventory instead.  The easiest way to make a scrollable inventory would be to use HTML DOM to render the inventory items in a div with overflow: auto and float it over the game canvas, but that might be hard to make consistent on mobile and also to style to match the game.  

Link to comment
Share on other sites

You can use masks to not have the inventory area span the whole screen, for example: 

var subMenu;
var mask;

subMenu = this.game.make.image(x, y, 'sprites', 'ui/ui_bottom_right_menu_sub_back_3');
subMenu.name = 'subMenu';
subMenu.alpha = 0;

mask = this.game.add.graphics(x, y);
mask.beginFill(0xffffff);
mask.drawRect(0, 0, 200, -300);
subMenu.mask = mask;

As for the rest with scroll bars and etc, I think it's too specific to be something included in this framework by default, but all the tools to make it are there.  There's some math involved depending on the height of the scrolling container versus the height of the scrolling bar.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...