Interface designs

[SharkD]

Here are my interface designs, all in one place. Click on them for larger views. Enjoy!

[SharkD]

How about a background behind the UI text like this?



[edit]

Edited the image to show text, icons and gameworld.

[KA101]

Looks nifty, and seems like it has enough room for Daemonward's infobox patch.  I wasn't kidding when I stated that speed, move type, and encumbrance ought to be standard (recall: speed & move-type did come standard in GH1).

White corner seems a little stark, at least in that mockup.  Not sure if shading's feasible; I'm wondering if (somehow) making it more of a raised metal "edge" might look better.

Where are status icons going to go?  If they stay where they are in the current box, it looks like they'd end up in that lighter streak along the bottom.  That may (secondary ticker-type screen) or may not (metal monitor frame) be intentional on your part.  If that's intentional, we need to take that into consideration when designing status-effect icons.

[SharkD]

I forgot about the status icons. If they can't be squeezed in anywhere I can always make the panel larger.

Also, Joseph said he wanted something like Star Trek's LCARS system (i.e. flat computer graphics instead of raised metal surfaces and knobs).

[KA101]

Well, as it currently is they would fit--just in the differently-colored portion.  I guess it might help if I knew what you were intending to do with your nifty UI box: is it colorful for the sake of being colorful, some type of in-universe technological info-display (the latest from Galconde), or something else?

[SharkD]

It's meant to be a replacement for the current (and ugly) user interface.

[KA101]

OK, I guess I wasn't clear.  I realize that the current interface is purely (if insufficiently for my tastes) functional.  So, it looks kinda dull.  You're making it more exciting.  No problem with that.

What I'm wondering is whether you're planning for the interface to (kinda) exist in the game world, or just be aesthetically pleasing but clearly the proverbial fourth wall.  For instance, Fallout 1/2 had the interface done using 1950s-esque fonts & digit displays, and the quest log was the in-universe PipBoy Data Bracelet*.  This might translate to the interface using different colors (purple borders for being a Rocket Star?) or the result of hitting "m" would look somewhat like your PCS.

*And there is the time in FO2 when the person giving you free drugs tells you outright not to push that "barter" button with all the wires & fuses, because he likes you and he's giving you the stuff for free.  But that's clear fourth-wall breakage.

If it's just a prettier fourth wall, then your mockup is pretty good as-is.  Might look into toning that white down and making room for the status effects, but otherwise seems good.

[SharkD]

I was able to fit everything into the UI.

No, it is not meant to represent a physical object. You can use your imagination however.



I've attached the SVG files used to create it.

Note that the UI is based off of "Sci-fi UI panel" at OpenGameArt.org, here.

[edit]

Here's a version with drop-shadows (which I don't actually like).

[KA101]

Agree re drop-shadowing: reduces contrast and a net downgrade.  Especially with the conversation window: I like the explicit line between dialog & options, and the shadowing loses it.

Basic black is better, and the LCARS was colored stuff on a black background so that would fit better as well.  (Hadn't noticed that edit before.)

Still not sure about encumbrance & status effects will go--none in the shots provided.  (Status effect--quickest way I know of to get one is to go into a room alone and close the door.  Should get the stealthy-purple person because nobody can see you.  Eating chocolate is another option.)  Sorry.

Edit: Gagh--just noticed the status icons along the left side of the display.  Apologies, SharkD.

[Phil Munoz]

Is it just me or is the portrait image contrast affected in the change of the UI design?

also, how about a little bevel effect like this?

[SharkD]

Still not sure about encumbrance & status effects will go--none in the shots provided.  (Status effect--quickest way I know of to get one is to go into a room alone and close the door.  Should get the stealthy-purple person because nobody can see you.  Eating chocolate is another option.)  Sorry.

Edit: Gagh--just noticed the status icons along the left side of the display.  Apologies, SharkD.

Could you post a screenshot showing encumbrance next to all the other stats?

Is it just me or is the portrait image contrast affected in the change of the UI design?

also, how about a little bevel effect like this?

I'm not sure about the portrait. Maybe it was just a bad set of random colors.

I don't think the beveling looks too hot.

[KA101]

@SharkD: sure, if I could get Daemonward's patch to compile in a usable fashion.  Xe has several such screenshots in xyr thread, here: http://www.gearheadrpg.com/forum/index.php/topic,1679.0.html

I've been working on that instead of actually playing the game for almost a week now.  Rather irksome.

also, how about a little bevel effect like this?

Aside from the whole "avoid raised metal surfaces" thing, no problem.

Joseph said he wanted something like Star Trek's LCARS system (i.e. flat computer graphics instead of raised metal surfaces and knobs)

(JH's statement is here: http://www.gearheadrpg.com/forum/index.php/topic,144.msg1847.html#msg1847 )

That white streak doesn't seem as stark in your screencap as it did when I saw it in SharkD's mockups, PMunoz.  Did you tone it down, or is it just me?

[SharkD]

@SharkD: sure, if I could get Daemonward's patch to compile in a usable fashion.  Xe has several such screenshots in xyr thread, here: http://www.gearheadrpg.com/forum/index.php/topic,1679.0.html

OK, thanks. Those screenshots are all sort of fuzzy though.

[SharkD]

Here's a version with a different shade of white/blue for the left-hand chrome.

[KA101]

Better--it still emphasizes the mech-info but doesn't jump out quite as much.  Thanks.

Switching between the two in photobucket for a while, looks like you pulled the blue version  a few pixels to the left as well. That probably helps too.  Next test is probably to take screengrabs in space--we spend a lot of time there in GH2 and that contrast [against black] is important.

Hadn't realized the original was supposed to be chrome/metal; without some sort of texture (to be clear, I realize that raised-metal is to be avoided--I'm not asking for any) it's tough to tell materials apart.