Welcome, Guest. Please login or register.

Pages: [1] 2 3
Print
Author Topic: Discussion - GUI "feel" and design  (Read 21247 times)
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« on: March 06, 2009, 10:41:40 PM »

Fallout menus had the 'skin' or look of retro electronic equipment, light bulbs, wires, rusty metal plates, the new BethOut has the Retro-electronic portable monitor and everything is displayed on this outdated led-type screen.

Diablo 2 had the stone and ornaments and gargoyles of a cathedral interior.

Arcanum has the steampunk wood and gilded plates and Art Deco designs, gauges, tubes and levers.


If you imagine yourself playing the game, what do 'feel' the GUI is like. Has it got to do with ice, icicles hanging, frozen low-tech screen (like of a frozen battle-sub) with frost covered levers and cold-war tech buttons, or is it more makeshift, low tech as in the char menu and quest menu and map are like old newspapers and notes on old letter's edges and ruined paper. old calendars, pinups... Slavic themed with a dashboard from an old Zhiguli/Volga (Russian cars), colourful Finnish folk-themed rugs and jewelry...

Some might argue that it's details and not very important at this point, but I say that it is an important part of the game. At least for me. The GUI is though which you interact with the game world, it's very important to me as an artist for example. The plot and story, which are not set in stone yet, can help or influence the design, but the setting itself and the thoughts of the players/creators are essential in designing something like that.
And as I've gathered so far, the setting is 20 years post-WWar Cold War era Scandinavia/Baltic Sea area which had strong Soviet influences from the east. I don't know about the US/West influences in Scandinavia though

What's your visions, guys ?
« Last Edit: November 11, 2009, 09:29:39 PM by Gaspard » Logged
eleazzaar
Community member

Posts: 255


attempting lucidity


View Profile
« Reply #1 on: March 07, 2009, 05:10:55 AM »

Fallout menus had the 'skin' or look of retro electronic equipment, light bulbs, wires, rusty metal plates, the new BethOut has the Retro-electronic portable monitor and everything is displayed on this outdated led-type screen.

Diablo 2 had the stone and ornaments and gargoyles of a cathedral interior.

Arcanum has the steampunk wood and gilded plates and Art Deco designs, gauges, tubes and levers.
I tend to consider that style of interface anachronistic... part of an era with limited pixels and limited kbs for storing graphics... possibly also a ploy to make screen shots look better.

I would tend to go with something stark and mimimalistic.
Also it is easier to change things around as the GUI develops.
« Last Edit: March 09, 2009, 02:26:15 AM by eleazzaar » Logged
zenbitz
Community member

Posts: 1164



View Profile
« Reply #2 on: March 07, 2009, 08:51:21 AM »

This seems pretty important, but quite hard.  At least for me.  Lamoot should weigh in...

What about "outdoor survival-y".   I envison a thermometer in the corner, with wind direction/speed and wind chill factor.
Maybe a compass like this one: https://www.collectrussia.com/DISPITEM.HTM?ITEM=11361
in the other corner.

http://www.battlefield.ru/index.php?option=com_content&task=view&id=214&Itemid=116&lang=en doesn't quite have the right amount of detail, but it's still pretty cool.

This is maybe too Fallout-like
http://www.arcticwebsite.com/USAAFsurvival.html

Maybe sort of a leather-and-furs look from early 20th C. Arctic and Antarctic explorers?
Logged

We are not denying them an ending...
We are denying them a DISNEY ending - Icelus
Lamoot
Community member

Posts: 161


View Profile
« Reply #3 on: March 07, 2009, 12:45:02 PM »

It is very important, you see the GUI almost all of the time.

No presentable ideas yet, just a general feel I have. Will post more later.

It's best we collect some screenshots how other games did this, will be a useful inspiration. Some are cool, some are bleh, but we'll get a feel for it.

* Hearts of iron:
http://upload.wikimedia.org/wikipedia/en/1/12/Hearts_of_Iron_Screenshot.jpg

* Hearts of iron 2:
http://static.filefront.com/images/glooeisuip.jpg
http://www.dailyraider.com/vg/pc/hoi2/56.jpg

* Commandos 2:
http://www.sg.hu/kep/2001_10/commandos2_bemutato_02.jpg

* World in Conflict:
http://www.battleclinic.com/images/battlepix/03c5ba3a169841da5222af0ddbb87d67.png
http://images.bit-tech.net/content_images/2007/09/world_in_conflict/b069.jpg

* Earth 2150:
http://www.deafgamers.com/earth2150lostsouls5.jpg
http://www.deafgamers.com/earth2150lostsouls6.jpg
http://www.deafgamers.com/earth2150lostsouls4.jpg
http://www.deafgamers.com/earth2150lostsouls1.jpg

* Dawn of War:
http://images.bit-tech.net/content_images/2008/03/warhammer_40k_dawn_of_war_soulstorm/b37.jpg

* Sudden Strike:
http://marksman-gaming.info/media/images/reviews/ss1/review_ss1_003.jpg

* Codename Panzers:
http://pcmedia.ign.com/pc/image/article/957/957886/codename-panzers-cold-war-20090227075500619.jpg

* Blitzkrieg
http://www.phantasia.nl/blitzkrieg/images/screenshots/Mission_interface.gif

* Talvisota: Icy Hell (note to self: very cool reference screenshots)
http://www.talvisota.net/screens/shot0016.jpg
http://www.talvisota.net/screens/shot0093.jpg
http://www.talvisota.net/screens/train_guns.jpg
http://www.talvisota.net/screens/shot0102.jpg

* Cuban missile crisis:
http://img.gamespot.com/gamespot/images/2005/131/920457_20050512_screen005.jpg

* Hammer&Sickle
http://upload.wikimedia.org/wikipedia/en/0/01/Hammer_n_Sickle_game.JPG

« Last Edit: March 07, 2009, 01:22:21 PM by Lamoot » Logged
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #4 on: March 12, 2009, 02:24:28 AM »

Awesome, Lamoot.

Well. I'm generalizing of course, but basically most of the GUIs were pretty simple. Many had the metallic look.
Quote
I would tend to go with something stark and minimalistic.
Also it is easier to change things around as the GUI develops.
a) I basically agree, but I'd think that the final product should feature a specific design element too. Something that, besides the in-game art, helps to set the general mood.

b) I might be wrong because I have never worked on a game before, but when the code and basic interface are done, wouldn't the strapping of the GUI on top of it all be simple enough ? Of course there's the coding of the individual animated objects and synchronizing it with the game engine itself etc; but like.. compared to the rest of the heavy work.

Personally what also appealed to me was the Commandos look. Specifically the one in Call Of Duty:
http://i10.tinypic.com/4opdykm.jpg

As our character is this lone figure in the frozen wasteland then it'd be cool if the GUI sort of reflected that. Call Of Duty's GUI base is the simple texture of cloth (appropriately coloured cloth, keeping in mind the military theme of the game) and the rest of the GUI's elements are interactive and are basically the items/functions used in the game. Character portraits are simple and the health bar without the numeric part.

I'd translate something of the kind into PARPG. The GUI would be what the PC would be carrying around:
Zenbitz' compass could be the health indicator with numeric values instead of/in addition to the NESW, a thermometre would act as exactly what it is, I'd envision the base itself as also something wearable, or like a wristband or a belt, cloth or a tanned animal pelt.
I totally agree to keeping it pretty simple, but by that I mean not cluttered and not distracting from the most important - the game itself. If it fits in well enough with the game overall look and feel then it helps not hinders. The GUI should present all the important information in a fitting format.

I liked Arcanum's solution of the GUI being two panels - there's the one on top that deals with more general game-related information and then there's the bottom one which has all the information and shortcuts that the player needs to play the character effectively on the general game map. Other interfaces (inventory, character sheet, area map/world map) could be merged into those two 'frames'. So all the menu's that would 'pop up' would look like they're part of the whole. The GUI would be the window through which you look into the PARPG world.
This image has several GUIs; Arcanum's inventory screen with the upper and lower panels are in the lower right corner:

http://www.flamingpaper.com/stuff/gui.jpg

Quote
I tend to consider that style of interface anachronistic... part of an era with limited pixels and limited kbs for storing graphics... possibly also a ploy to make screen shots look better.

I like beautiful things myself. Simple can still be good-looking, but a colour-edited Excel sheet with buttons just wouldn't do it for me in the end.
Logged
eleazzaar
Community member

Posts: 255


attempting lucidity


View Profile
« Reply #5 on: March 12, 2009, 02:52:19 AM »

Lamoot:  I love the blue ice shadows of the commandos 2 screenshots.


b) I might be wrong because I have never worked on a game before, but when the code and basic interface are done, wouldn't the strapping of the GUI on top of it all be simple enough ? Of course there's the coding of the individual animated objects and synchronizing it with the game engine itself etc; but like.. compared to the rest of the heavy work.

Depends if you are content simply changing colors, or actually want to adjust size, positioning, mouse-over behavior etc. And of course how it was all put together. As someone how has submitted a lot of designs for various game GUIs, it is apparently often quite hard to change things in anything but the most superficial ways.


Quote
I tend to consider that style of interface anachronistic... part of an era with limited pixels and limited kbs for storing graphics... possibly also a ploy to make screen shots look better.

I like beautiful things myself. Simple can still be good-looking, but a colour-edited Excel sheet with buttons just wouldn't do it for me in the end.
Don't forget the actual game content.  I consider a good GUI something like the frame on a picture.  You mostly want people to look past it and perceive the content.  If you decorate it too flamboyantly, you detract from what is inside the frame.
Logged
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #6 on: March 12, 2009, 09:27:20 AM »

/edit/ moved this post to my next one down
« Last Edit: March 12, 2009, 02:55:54 PM by Gaspard » Logged
Lamoot
Community member

Posts: 161


View Profile
« Reply #7 on: March 12, 2009, 11:27:15 AM »

Ok, Lamoot's more formed thoughts and replies:

Quote
Lamoot:  I love the blue ice shadows of the commandos 2 screenshots.

Same here, already found a way to make snow materials receive blueish tint in Blender. PARPG will have blue shadows, where available.

Personally, I like the codename panzers and commandos 1 and commandos 2 GUI's the most.

* Codename panzers has this nice metal- slightly blue UI feel to it.
* Commandos 2 is a minimalist approach to the interface, looks metallic, but doesn't waste space and still gets its feel accross.
* Commandos 1 (good find Gaspard, didn't really consider looking at this one until now) has that eye icon in top-right corner and the items collection in bottom-right. This creates a more personalized feel, gets you more in the spirit of PARPG. Usually games have buttons, but here the buttons are camouflaged as actual items or represenations of actions, like crawl, stand up, that eye icon. I really like this, and wouldn't mind using the same approach. It doesn't make the scene any more cluttered or distract from the main game screen.

In Fallout, you had mainly buttons in retro tech fashion, but they represented the PIP boy. In PARPG, it's really just you against the elements and the GUI should reflect this, by being more personalized. The old ways of civilization are gone, no more buttons or screens or statistics, just your body, your gun trigger and your items. These are the things you interact with in PARPG. I wouldn't exactly use the cloth straps as the UI decoration, but they don't seem that wrong.

In addition, we can add "outdoor survival-y" GUI elements zenbitz proposed, wind speed, thermometer and such.

Quote

Heh, No offense Gaspard Smiley - to me this chaotic collection of UIs shows such a russian mentality, the same behind the crude and robust T-34s that won the war over sophisticated german tanks Smiley. For PARPG it's better to have a more organized approach when analyzing various GUIs, with separate screenshots, description of functionality, it's good and bad sides, and put it at the parpg wiki.

Quote
Don't forget the actual game content.  I consider a good GUI something like the frame on a picture.  You mostly want people to look past it and perceive the content.  If you decorate it too flamboyantly, you detract from what is inside the frame.

Over-decorating the GUI should indeed be avoided. In addition the GUI shouldn't take too much of the screen-estate. The most straight-forward solution is to make a rather basic gui, but we might miss a big opportunity here. The GUI is seen ~95% of the time and we can use this to further enhance the feel and ambient we want to tell to the players. For PARPG I feel the commandos 1 approach really fitting. If you look at the screenshot again, there is no over-decorating and no crowding of the screen-estate, while giving the feel I described above.
« Last Edit: March 12, 2009, 11:32:59 AM by Lamoot » Logged
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #8 on: March 12, 2009, 11:32:18 AM »

/moved down a step/
OK, I guess the only way to continue with this topic in a reasonable fashion would be to flesh out the exact content of the various interfaces. Inventory/Barter is under discussion in another thread.

How about the basic game map-view. What should be there for you to see and easily reach ?
Some of the things that come to mind:

indicator types: (I consider the following sort must-haves, of course depending on whether some of the features will be used in the game at all)
* health bar - placement such, that you have an overview of how your character is doing <obligatory>
* ammo left/max; for a melee weapon/melee the indicator would be blank or display a dash or n/a <obligatory>
* action points < their use not yet decided in the mechanics forum <obligatory>
* armor class ? - if it varies with how many action points you have left at the end of a turn (like Fallout, as I remember), then it might need a place on the GUI to provide for a more tactical approach, otherwise I wouldn't care for that, you can always look it up on the Char screen/Inventory
* moneybag - could also act as a button to the Inventory <good to see how much money you have before starting up the trade screen, I'd consider this important>
* thermometer - shows the cold level or character cold protection/resistance vs cold ratio <obligatory>
* information screen - gives you the feedback about your skill uses and combat and maybe item and environment descriptions. <obligatory>

various clickables:
* skills (stealth, lockpick, steal, first aid, traps) - I usually use shortcuts for these (1;2;3;.. of F1;F2;F3.. etc) so I do not see a good reason why it should clutter the general interface, the shortcuts could be edited in the Options menu
* Inventory / Inventory button <obligatory>
* Inventory quickslots (in Arcanum there were the general quickslots that had certain keys assigned to them (1;2;3... to be exact) and you could place either an item or a skill into the quickslot (I also used it to save Inventory space by placing huge items into quickslots that were not in use, in Arcanum every single item would disappear from the Inventory itself in that case)) <depends on the Inventory type, mechanics>
* Map - marginal importance to actually feature a separate button, depends how useful the map in the game is in general (in fallout games I never used it, in fallout 3 a bit more) ? TAB is the common shortcut
* Character Screen button <obligatory>
* the Options menu - also it's usually the same as pressing ESC or in some cases F1. So minimal in size and marginal in placement.
* the Diary/Notebook/Goal List interface - this one I'd merge with the Map interface. It would all come up with a punch on TAB and then there are pages one for map, one for goals/quests, one for rumors/notes, one for maybe stats for your kills and karma

/edit/ OK I'll start setting up an article at the wiki
« Last Edit: March 12, 2009, 03:22:23 PM by Gaspard » Logged
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #9 on: March 12, 2009, 04:05:01 PM »

OK here we go:
http://wiki.parpg.net/Graphics:GUI_Design

will add to it over time.
comment, add/retract, guys

OK, there's three of the inspirationGUIs afloat right now:
* Codename Panzer - http://pcmedia.ign.com/pc/image/article/957/957886/codename-panzers-cold-war-20090227075500619.jpg
* Commandos 1 - http://i10.tinypic.com/4opdykm.jpg
* Commandos 2 - http://www.sg.hu/kep/2001_10/commandos2_bemutato_02.jpg

My point goes to a sort of mix of the Commandos ones right now. I'll try to Photoshop something together later

So, Zen, Eleazzaar, others - what are your thoughts on these ?
« Last Edit: March 12, 2009, 04:51:08 PM by Gaspard » Logged
zenbitz
Community member

Posts: 1164



View Profile
« Reply #10 on: March 12, 2009, 06:38:15 PM »

None of them really seem to have the feel of parpg.
It seems that they are grouped (including others not exampled above) into "minimalist" (i.e, maximize the viewport) and "chromey" (not metallic - but like fallout or arcanum - used to impart a feel or style to the game)

I actually didn't even SEE the controls in the commando 2 "GUI" until I looked for  the 3rd time... not sure if this is good or bad.

I guess that if we cannot come up with a bunch of graphics that captures what we are looking for well, then we should go minimalist.

I kind of liked the "Blitzkreig" one, but it's not minimalist.   I think we should have some contrast between the "white" of the world.  Maybe dirty soviet army green - or green/browns.
Logged

We are not denying them an ending...
We are denying them a DISNEY ending - Icelus
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #11 on: March 12, 2009, 07:17:24 PM »

http://wiki.parpg.net/Graphics:GUI_Design#Gaspard.27s_GUI_proposal

So here's a sketch.


Hmm, Zenbits. I was playing around with the greens and browns at one point and it actually works quite well. Why I didn't go with more obvious greens and browns was that it sort of started to resemble something like Fallout. Then again they are both set in a post-apocalyptic setting and the subconscious does it's own job. ..
Logged
eleazzaar
Community member

Posts: 255


attempting lucidity


View Profile
« Reply #12 on: March 12, 2009, 08:21:12 PM »

Hmm, the other major point i should have made is the question of resolution independence.

It made some sense for the older games with shorter development cycles and shelf lives to commit themselves to one screen resolution.  It's simpler to code that way.

But with a community project such as this development will probably take long enough that a standard screen resolution today might be considered totally inadequate when we reach 1.0.  Also screen rations are getting more varied.

So while absolute resolution independence would be a ton of unnecessary work, we should strive to make PARPG work on a variety of screen sizes and proportions, including ones not yet used.

This approach opposes at least some types of very ornate GUIs which aren't flexible.
Logged
Gaspard
Community member

Posts: 479


The Blackest Heart


View Profile
« Reply #13 on: March 12, 2009, 08:37:01 PM »

that's why the base elements of a GUI should be for example vector-based. The size of the buttons and text and ornaments would not have to change at all that much in size, Just so that the GUI would look logical and not glitched, when the base itself is adjusted to fit the correct size for the resolution
Logged
zenbitz
Community member

Posts: 1164



View Profile
« Reply #14 on: March 12, 2009, 08:59:33 PM »

Uh, I really like this.  The contrast is a teensy bit low.

Quote
Hmm, Zenbits. I was playing around with the greens and browns at one point and it actually works quite well. Why I didn't go with more obvious greens and browns was that it sort of started to resemble something like Fallout. Then again they are both set in a post-apocalyptic setting and the subconscious does it's own job. ..

 Fallout seems to have lots of yellow in it's green...  maybe more black-green?
Logged

We are not denying them an ending...
We are denying them a DISNEY ending - Icelus
Pages: [1] 2 3
Print
Jump to: