Implementing an inventory GUI (backpack) with Quickgui

Hey all, I'm working on an RPG and i've decided to start testing some stuff with QuickGUI. I was wondering if anyone has any ideas on how to make a GUI For a backpack (inventory system).

I'm really looking to have a window with many icons which represent different items (items are represented by icon pictures). I was thinking of some kind of grid of icons, maybe with n-state buttons, but I haven't thought it completely through.

Another thing I plan to have with the inventory GUI is some type of drag and drop for the items (ie. clicking on an icon makes it the mouse cursor icon, then clicking on another inventory spot swaps out the icons). I know quickgui has no drag and drop system implemented, so I will probably have to alter it, but if anyone has any ideas on how to implement the rest (or has done it before), I'm open to input.

I've seen two instances of drag and drop, but haven't yet had the time to implement these widgets. Would your equipment be similar to the Diablo style inventory, where you have limited space (grid)?

I can send you the code I have of the drag and drop that fassihi implemented, but it was done a while back, for QuickGUI v0.9.4 or earlier I think.

QBound has also implemented a drag and drop, as shown in this link he gave:

http://wiki.nightfist.org/index.php?title=Image:NF_CLIENT_REV_0_0_71_5.JPG

I had some good ideas about it when I first discussed it with Fassihi, I will look through my email and see if I can post it.

What I wrote from a while back, slightly modified:

I would try making a widget, call this DragDropContainer. You will have to come up with a structure to enforce *cells*. DragDropContainer has properties including the width and height of the cell. You'd also need to make an image in Photoshop (a simple grid for now). Later you'd make a DragDropItem. This should derive from the Button class because you can choose to allow using it as a button, or you can disable the button part of this and use it as an icon. DragDropItem's must be set in a container when not actively being dragged. DragDropItem has a number of cell's it occupies. Depending on how you want to implement this, you can make DragDrogContainer's ignore cell layout of Items. For example, in Diablo, you can equip a helmet in the helmet slot. The helmet slot can either be a 2 x 2 cell DragDropContainer, or it can be a DragDropContainer that ignores cell structure, so the helmet just goes in. (but maybe we should enforce cell size)

To be even more fancy, we should allow DragDropContainers to only accept certain types. The user will have to register what types are acceptable to drop in this container. DragDropItem's will have to register what type they are.


I should probably take fassihi's code and integrate it in and update it, but I have a ton of things to do already.

Hi,

the shown shortcut bar is not fully implemented yet. At the moment you can only drag an item and not drop it. The reason is that if i cllick on an ActionItem and held the LB then i unhide a moveable Actionitem and set the position right under the cursor for moving it around.
And that is my current problem... If i move with this 'MasterAI' to a new place then the 'MasterAI' receives the event and not the WidgetGrid under it...

The Grid is made by simplem n*m QuickGUI::Image 's and i only change the texture from the AI.

An Inventory System is slightly heavier i think. If you want to support multiple Sizes then you have to do a simple 2D collision detection. It might be possible that QuickGUI can help you with that task.

Iam also writing an RPG and if i am ready with the shortcut bar i will move on to the inventory system.
I think that many people can use such a system. therefore if i have fully implemented it i will share the code... btw our client is already hosted on sourceforge...

If i move with this 'MasterAI' to a new place then the 'MasterAI' receives the event and not the WidgetGrid under it...

What if you made an event handler for ActionItem ON_LOSE_FOCUS, which detects if the cursor is over an empty slot and then does the moving of ActionItems?

btw our client is already hosted on sourceforge...

Does this mean we can peek at your code? What's the license on this, and what network lib you use?

I may just end up making some kind of icon grid widget, which has a table/grid of icons. As far as having items take up multiple spots, this might not be as tricky as it seems; if you just keep track of the amount of boxes each item can take up (store it as say, a short) then you can easily tell how many boxes every item needs.

I was thinking of doing something like i mentioned: having a double click event switch the icon to the mouse cursor, when clicking on a part of the grid. Then when the mouse cursor is an item icon, when clicking back on another part of the grid it would swap out the icons. For this, I would probably need to implement some kind of ItemIcon class (or custom MouseCursor class).

Like i said, I haven't really put much thought into the concept yet, its all been just brainstorming.

What I'm trying to describe, if you can't quite picture it, is depicted in this screenshot (altered by someone in my dev team, for GUI design input):



If we stick to the conventions of the idea in the picture, we probably wont have mutli box items.

Dang, my work blocked the image!

I think the cursor swapping is a cool idea. I guess I will need to implement a

void MouseCursor::setMaterial(const Ogre::String materialName);

function to the mouse cursor to support this.

I'll make sure to check out the screenshot later this evening.

Hi,

the Screen looks good

your way was my last try. the 'problem' is that the mousecursor uses a material an not only a texture like in former versions.
That is why i created a MasterActionItem...

I will try the ON_LOSE_FOCUS...

Yes the sourcecode is availble under Artistic License (because my code is art ) might change in the further. hier is the svn path: https://nightfist.svn.sourceforge.net/svnroot/nightfist

your way was my last try. the 'problem' is that the mousecursor uses a material an not only a texture like in former versions.
That is why i created a MasterActionItem...


It seems to me that you could still just make mouse states for all your icons. This would let u switch between them whenever a specific icon is clicked. If you have a ton of icons it might become a pain, but its almost the same as defining an icon for each item.

I think what can be done is defining all the icons in a skinset somewhere and then calling

MouseCursor::setSkinComponent(".someIcon1");

That way you can have some images in your skin like the following:

qgui.someIcon1.png
qgui.someIcon2.png
qgui.someIcon3.png
etc.

I'll have to look at the Mouse Cursor again to see if this fits with what I implemented for it.

great idea... i think that it must work because of the cursor changes you make when hovering over a border.

qgui.cursor.resize.diagonal1.png
qgui.cursor.resize.diagonal2.png
qgui.cursor.resize.leftright.png
qgui.cursor.resize.updown.png

atm i try to switch from images to buttons and set for every button an own skinset like:
qgui.ai.powerup.png
qgui.ai.powerup.over.png
qgui.ai.powerup.down.png

but the problem will exist in this case too, but i think the handling will be cleaner