Sign in to follow this  
megabyterain

Scrollable View in Phaser 2.5.0 for Inventory or What?

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!

Share this post


Link to post
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.  

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.