Inactive GUI Layout

overdhose

Active Member
Contributor
Design
World
GUI
Cervator edit: Added header, moved to Incubator

Name: GUI Layout (gameplay related)
Summary: Coming up with the central design for GUI components on the main player screen
Scope: Engine
Current Goal: Solidify on a design
Phase: Design
Curator: Maybe overdhose, rapodaca and others involved in the past, Adeon did some initial GUI frameworking
Related: Earlier discussion

I mentioned this before, it might be handy to decide on a gui layout, I made a concept drawing, to see if we can agree on a general layout. I'll make seperate postings per layout for standard / inventory / spellbook etc. I'll start with the standard layout, let me know what you think of it / what you would like to do different. Feel free to download and rearrange it as you see fit.
 

Attachments

overdhose

Active Member
Contributor
Design
World
GUI
The standard layout :

guilayout.png

the reason I moved the health is because of the idea to open the inventory above the toolbar, possibly with a sliding animation later, letting you slide the toolbar up / down to open / close the inventory. It also gave me that retro zelda feeling. The grey area represents a tabbed chat.
 

overdhose

Active Member
Contributor
Design
World
GUI
the inventory :
guilayout2.png
 

Cervator

Org Co-Founder & Project Lead
Contributor
Design
Logistics
SpecOps
Linky for some related discussion over here: http://forum.movingblocks.net/threads/miniions.292/page-4#post-2773 with some on @woodspeople's expanding tool bar thing :)

Overall UI approach might be next after the art style thing. I know ironchefpython has a fair interest in the UI as related to events (the whole input thing) and Adeon did some of the frameworky stuff in the past. Yeah, definitely something to straighten out.

Flexibility as always is useful, especially considering mods messing with UI components. I'd personally be all over some sort of paper doll representation of health in the form of body part state instead of hearts, but that's probably for way down the road - just moving and rearranging them would be good :)
 

dei

Java Priest
Contributor
Design
Art
Would like the miniion bar (toolbar2) on the top of the screen. Commanding a miniion to a target etc. is an action that goes somehow upwards (away from you) so on the top seems more natural to me. That would match better by allocating F1-12 Keys to it too. What do you think?
 

Immortius

Lead Software Architect
Contributor
Architecture
GUI
Seems a bit busy having toolbars above and below the screen.

Do we even need a minion toolbar? Or ultimately would we just select them in the world, in which case we may need a simple "currently selected minion" display at most? Could have that anyway and just have a couple of keys to cycle through the minions?
 

Cervator

Org Co-Founder & Project Lead
Contributor
Design
Logistics
SpecOps
Well, it doesn't have to just be minions. In the other thread I called it the Special toolbar for anything other than objects (minions, racial abilities, spells, etc). I suspect we'll be able to come up with plenty of stuff that could justify a second bar.

I personally like having one bar on the side and one on the bottom, especially considering the expanding thing (could possibly interact with stuff all the way across the screen). I do agree that the function keys would be a natural choice, especially if along the top :)
 

woodspeople

Member
Contributor
Design
Possibly helpful: http://www.visual-literacy.org/periodic_table/periodic_table.html. My favorites for health visualization: R, Pa, Sa, Pc.

I'm keen on finding ways to show multiplex challenge/accomplishment: not just health but hunger, thirst, cold, wet/dry, illness, injury, blood loss, panic, etc. One of the more boring things about many games is the one and only one way in which you can be healthy.

Using function keys on the Mac is a royal pain: have to hit Function-F# because normal F# does something. Don't the F keys do anything on Windows?

Stupid question: what's a "buff"? Also the buff images are so tiny they are easy to miss. Too many things spread into corners is hard to keep track of? Dashboard style? What about the bottom is broken into thirds: left is chat (one line, expands up into more chat), middle is hotbar (expands up into inventory), right is special hotbar (expands up into more on that). Of course the dashboard thing has been done to death.

I think Immortius said it once, user movable/dockable GUI bits is the tip top choice. Then the layout is only the default. Maybe it's not as hard as making decisions like this? (Convenient as I'm not doing the coding :whistle:
 

Cervator

Org Co-Founder & Project Lead
Contributor
Design
Logistics
SpecOps
Neat diagram. Huge, too, never thought about there being so many. I spotted the name for one of the weird GitHub activity charts too :D

Spiderweb seems interesting. Yeah, it would be nice to be able to visualize more than "health"

F keys on Windows generally are application specific, with a few conventions like Alt-F4 being "close program" - the user could change that around anyway. Secondary bar could be numpad numbers instead, for one example.

Buffs are generally any beneficial temporary effect, they tend to be displayed in the same place as debuffs (negative) or even damage over time. I suspect the term could easily be meant as "any of the above"

Two bars plus chat at the bottom - might get cramped. User able to dock wherever would certainly be best :)
 

overdhose

Active Member
Contributor
Design
World
GUI
Also the buff images are so tiny they are easy to miss
it's an example, I think I actually forgot to double their size, but even then, not relevant.

Too many things spread into corners is hard to keep track of
that's what this thread is about, that's what I'm trying to figure out, you tell me.
I think Immortius said it once, user movable/dockable GUI bits is the tip top choice
I agree 150%, untill then, and even then, you need to provide a "default" layout, or are you gonna start the game by telling the player he needs to build a gui first?
 

woodspeople

Member
Contributor
Design
Informal survey of results of "game interface" Google images search. Not putting links because links in Google images are longer than this post.

Most often seen: GUI elements covering bottom tenth of screen, plus top two corners. Elements are overlaid (HUD) as partially transparent.

Less often seen but potentially cooler:
- Top and bottom tenth of screen given over to GUIs. When no GUIs apply, space is blank/black (no overlay). Creates "letterbox" movie effect.
- Same as letterbox effect but "picture frame" - entire outside of screen dedicated to GUI, you look "through" it to interior view of world.
- All GUI elements in four corners, in "pockets"; any can expand into center. Overlaid.
- All GUI elements take up one part of one dimension: top only, bottom only, left only, right only. Call this dashboard style. Not overlaid
- Dashboard, but tabs are used to reuse space for different views/modes. Call this multi-use dashboard style. Not overlaid.
- Expandable panels on all four sides of screen; sort of like corners except "drawers" slide out from all four sides. Usually overlaid.
- Overlaid GUI items scattered all over the screen, but capable of being hidden. Call this HUD display. (Hate this.)

My personal favorite: multi-use dashboard. Hate having stuff stuck all over the corners. Like having clear separation between GUI elements and world. Like world not having non-world stuff stuck all over it. Real world does not have menus and status bars all over it. Like that to be separate. May be due to lack of ability to multi-task.

You always need a default, but what I meant was, if the player can move GUI bits around there is less need to make it perfect for everyone, because it's not hard coded.

One more unsolicited opinion: does anybody really love the smeary things in the hotbar cells? Because I don't. I find they make the icons hard to make out.
 

overdhose

Active Member
Contributor
Design
World
GUI
does anybody really love the smeary things in the hotbar cells
I don't dislike them per se, the alternative is drawing boxes around them, which is in my opinion even more ugly, but you do need a way to indicate there is a "spot" there. What we might consider is not rendering the "smeary" when you are not working in the inventory.

Ideally yes I'd like my game to have as little gui as possible, however if that impairs game play then people will get annoyed to.

Primary reason to "switch" from minion bar to inventory was provide a way to organize your inventory without a chest or minion proxy, while optimizing the way to represent it a bit. It seemed one step up from the current thing which does nothing and really clutters the screen.
 

Cervator

Org Co-Founder & Project Lead
Contributor
Design
Logistics
SpecOps
Nice survey, very comprehensive - thanks woodspeople :)

I don't mind the "doodles" but am not sold on them either. I like the idea of having an option to make them (doodles or boxes) auto-hide when not actively in use / being tweaked, and having that a default would be cool too.

Incidentally, you could also just user CTRL-1 or ALT-1 instead of F keys (unless Macs don't have either of those, I forget). Then any number of toolbars could easily be supported hotkey-wise (oh boy did WoW ever have a lot)

The "Drawers" option sounds like what we're currently aiming for, tho I don't mind the multi-dashboard either. Couldn't you in theory have both, with the easily ability to move tabs around between the different spots? Tho this ends up mostly dealing with toolbars and inventory-like screens, not so much buffs and misc. I could see those using the corners mode, but at this point I'm probably not helping by liking everything... :)

That might be ideal for mods tho. 4 corners, 4 panels, can dock different features to different spots as you see fit. If you're really a minimalist you can switch to miniature versions of each feature that lay closer yet to the bottom, or hide in a corner, etc. You could even split a toolbar between two corners. Probably a ton of subjective opinion here.
 

overdhose

Active Member
Contributor
Design
World
GUI
I'll make a little tutorial to create mesh / material so others can play around to. where should I post it? Wiki?
 

Cervator

Org Co-Founder & Project Lead
Contributor
Design
Logistics
SpecOps
Sure, sounds like material for a How To section
 
Top