GUI - where to put what?

[Cervator]

Starting a dedicated discussion on this like I promised to way too long ago. Rather than technical details (other than maybe feasibility) this is meant to be about GUI design from a human perspective i.e. what should go where to be a pleasing setup to the human eye? While also being easy to use, functionally powerful, and extensible via mods.

x3ro has prepared a setup where you can write GUI definitions in JSON which is still hovering in a branch somewhere. Hopefully that'll make the setup part itself pretty easy.

Current state: We've currently got a toolbar at the bottom that expands into a few rows of inventory space, along with a similar toolbar to the right that I think it would be great to also expand into a few rows of "special" space (think creatures to summon, spells to cast, etc, not so much "items"). On top of that we've technically got some buff icons that show up in the upper left corner, and temporarily in a prototype shape we had "reports" from miniions lining up on the left side (unless you were following the work overdhose was doing you probably missed it - not sure if it was just screenshots on IRC or so)

Options: We've done a few mockups scattered here and there, not sure how far we got. Seemed focused on dividing the screen into nine zones then probably do small GUI elements in the corner, bigger ones in the top/bottom/left/right centers (like the toolbars). Maybe we could get back on reports from creatures lining up to the left (akin to dungeon keeper or other games that keep a queue of events like that). Buff icons could be small enough to keep in a corner. Typical mini-map, if available, in the upper right? I'd love to have some sort of alternative health & armor display in a corner rather than a row of hearts. Eventually we need a place to equip gear, that could go in the center as an expansion of the inventory (could have spellbooks like that too). Then there's debug info that needs to go somewhere with minimal obnoxiousness.

Thoughts? Examples from other games that seem to work well? Mockups? Taking all comers!

My closest contribution to the topic is over in the miinions incubator thread where I took the "expanding inventory" idea from woodspeople and took it a step further to center windows of various function. I don't have a lot of solid ideas for nice elegant components for the corners yet.

 

[HeadClot]

I will mock something up in Photoshop. Standby!

 

[HeadClot]

Alright - Here is the Mock up for the GUI that the player will be seeing the most Action bar, Health and Armor. As well as companions currently in the players party.

 

[Cervator]

That seems a pretty solid classic design. I don't personally expect companions of that level of sophistication, but if somebody wants to add it make it so

Not sure what to do with health/armor, the current setup is just a placeholder. Wouldn't mind doing something different somehow.

Anyway, this thread is mainly for what types of stuff to put where, so that's a good example. Where would you fit other stuff in there like maybe a mini map, status icons, etc? Imagine what modders might do and what sort of "zones" in the GUI they may like to add stuff to

 

[Nym Traveel]

As reading this i just had an idea on two things:

Currently active item: If you play minecraft, your Itembar is static and your selectedItem-frame moves. So I thought why not turn this the other way round? Have the selected item in one spot and cycle the items around.

Health/Armour: As we have some approaches on skeletal animation and hitzones, why not carry this over to the hud?

To explain it a bit further:
lets say slot 0 is the active one and -1,-2,-3 the ones to the left and 1,2,3 to the top
Let the initial setting be: (a,b,c,d,e,f,g,h,i,j) the items in the quickselect and a active item.
so the visible things would be (on the indices [-3,-2,-1,0,1,2,3]):
[h,i,j,a,b,c,d] and e,f,g currently invisible. After one mousWheelUp event the list would be:
[i,j,a,b,c,d,e] with b as active item. Advantage: one could define arbitrary inventory slots as quickselects (maybe alt clicking or whatever it) and this slot is now in the rotation. So the extrem cases would be: nothing in quickselect, and whole inventory in quickselect. (Sorting and useability to be determined)

The top right section is some D2 style armourIsBroken indicator with a similar styled health indicator. on top of that could the active effects be stringed together.

I must admit the left side is somewhat of a placeholder

What do you think?

 

[Skaldarnar]

+1 for the item spot and scrolling!

I think one can combine this approach with the classical shortcuts for 0 - 9, or in extreme/advanced cases by allowing more than one rotation selection (I think of several item sets, maybe one for tools, another one for combat weapons and a third for magic stuff).

What about not showing armor and health the whole time, but only in the inventory view. In the game we could think about other (visual) indications that make the player aware of the armor state (quite unsure what exactly, though... )

 

[Nym Traveel]

I was thinking of just showing the parts that are damaged/injured.

Concerning Items: multiple rows would be cool, indeed.
Only problem: you just have on mouse wheel. So either keys to scroll through one and wheel for the other or wheel and shift-wheel action to seperate (could collide with sprinting or other actions)

Another use case for multiple rows: the skyrim approach where the sides represent the hands.
For convenience we could only allow shield or special tools in the left hand (or right for not discriminating left-handed people)

Just another screenie with alternative Map/Items placement

 

[Cervator]

I love the idea of the corner toolbar with static selection, that seems really novel and neat

At the same time I also really love the fold-out inventory, which would be hard to do in a corner, wah

I'm wondering if the modifier key would allow us to arrive at a nice setup, be it Skyrim, left/right hand, normal vs magic, etc. I really like the standard of SHIFT being run (double forward arrow makes me ), CTRL tends to be sneak/crouch , leaving us with ALT. In MC ALT doesn't seem to do anything and causes window focus issues (as if it is trying to open a menu, Windows-style) but Terasology is fine (nothing assigned, but no focus issues). On Macs there's no ALT, but is either Command or Option ever used as modifier keys? Not that we can't use something entirely different, but there's something nice about the major options.

Could be neat to use ALT as an actual alternate key (fitting!) for mouse clicks, wheel actions, and hot keys - if it makes sense to have hot keys with a static selection corner. Both bottom corners with selectors like that, either for hands or items vs special.

Right now though we have the fold out inventory that works OK. This makes me think more about the modding setup in general for GUI.

It seems sensible to divide the screen into zones, then register custom components to a subset of those. If we divide into 3x3, then optionally each of those into 3x3, I suspect we could come up with a system that could support both ?

Mod tries to reserve a GUI spot in the lower left - say we have a corner selector and a compass like above. Requests top right in that area, aligned to bottom left, then you could have a little extra navigational tool diagonally up from the compass.

The fold-out inventory could request bottom middle, and all 3 bottom slots there. If it expands then it claims the three above.

If one mod conflicts with another the user could assign it another spot, or better yet the mod author could provide a setting with alternatives that might work better than "Hey lets try to put it over here"

I wonder how close that comes to the design x3ro has pending in a branch. We need that!

Edit: Oh, and I like the armor/health paper-doll too. The bigger version could just supply more details (leg broken, severe burn, etc) with the tiny model just being a warning. Maybe we could display the same on the player's model itself, and if you're in 3rd person view you only get that, in 1st person the paper-doll? Here's for hoping the plain paper-doll thing isn't too hard

 

[Nym Traveel]

The fold out inventory can be centered, no problem
Maybe I can make a little ae movie next week showing this in detail

Shift for running is kinda obligatory, nobody wants double tapping -.-
Imho ALT/Option should be fine for switching.

I'll stay out when it comes to modding interfaces, not my cup of tea