(http://www.whamgames.com/images/Forumsht/gui_plans.gif)
Here's a GUI I'm designing (yes, I am becoming a nuisance here, but I really want to make a quality game and I think outside opinions are a great way to improve).
I'm looking for any ways to:
-> Improve its layout
-> Improve its looks altogether
-> Make it clearer and easier to use
During gameplay the GUI's upper half is hidden and the lower half is visible, and as the player moves his cursor to the very top of the screen, the top half slides down and becomes useable. The inventory above is designed to be 8 slots wide, and not scrollable, as 8 slots will hopefully be enough at any time in my game.
CLARIFICATION EDIT:
The gun-button allows the player to quick-select his weapon withough activating the main inventory.
The three zeroes are the players ammunition counter.
The key-button allows the player to quick-select his keyring and chack on what keys and keycards he might be carrying.
Using the inventory that way seems very intuitive, so that's good.
Some things:
The exit button's icon is a little unclear. Maybe a X would be better.
What are those other buttons for? (The gun, the three zeroes and the key)
This is really a matter of taste, but if it's possible, I would have removed the arrows on the inventory items. It's a very good thing that you have them there when using them as cursors, but on the inventory screen they look misplaced somehow.
Also: The pure-green-lines-inventory looks awesome, but there may at some point be problems withunderstanding what they're supposed to be, so I suggest that when the player mouses over them you let them have full colors, while keeping the green design at all other times. Just a suggestion.
Quote from: olafmoriarty on Tue 05/08/2008 21:21:35
This is really a matter of taste, but if it's possible, I would have removed the arrows on the inventory items. It's a very good thing that you have them there when using them as cursors, but on the inventory screen they look misplaced somehow.
Also: The pure-green-lines-inventory looks awesome, but there may at some point be problems withunderstanding what they're supposed to be, so I suggest that when the player mouses over them you let them have full colors, while keeping the green design at all other times. Just a suggestion.
I was thinking of a green text floating below the mouse cursor when it is hovering over the item, but showing it in full colour might also be a good idea! I'll look into it.
I like the look, but the gradient is a bit much for the GUI. You could animate it to have lots of noise and just use the images and let them flicker.
Arrows are a bit cheesy, maybe you could add another box that shows the item you've selected and just use a different cursor that you only use for objects. Or lose the arrows and make the boundaries around the interactive object big so there's no pixel hunting.
I like the idea of showing the item in color, but maybe keep the colors semi-opaque and fade in. You don't want everything changing colors if your cursor moves across the GUI.
There's a really easy method of handling the "little arrows" problem.
-Draw the arrows above the item's pixels. Meaning, if the arrow is 3 pixels tall, make sure none of the item's pixels has a y-coord lower than 3.
###
##
__#_#________________________
top item pixels here
-After adding the InvWindow, add a button set to NoAction covering the top three pixel rows of the InvWindow. Then set it's image to the part of the GUI background image it's covering.
Voilà , arrows at the cursor, but none in the inventory.
Quote from: KhrisMUC on Tue 05/08/2008 23:25:25
There's a really easy method of handling the "little arrows" problem.
-Draw the arrows above the item's pixels. Meaning, if the arrow is 3 pixels tall, make sure none of the item's pixels has a y-coord lower than 3.
###
##
__#_#________________________
top item pixels here
-After adding the InvWindow, add a button set to NoAction covering the top three pixel rows of the InvWindow. Then set it's image to the part of the GUI background image it's covering.
Voilà , arrows at the cursor, but none in the inventory.
So bsically "make the sprites a it taller, and hide the arrow behind another picture"... Not a bad idea actualy...
I do not post here very often, but i really like this GUI.
Jp
One thought on the whole "GUI-will-come-down-when-mouse-comes-up" thought: At which y coordinate did you plan to let the GUI fall down?
I think I would find it annoying if I was pushing the mouse upwards towards the save button to find that when I reached a certain point the save button was *below* the cursor and I would have to change directions just because the GUI moved.
Quote from: olafmoriarty on Wed 06/08/2008 23:05:41
One thought on the whole "GUI-will-come-down-when-mouse-comes-up" thought: At which y coordinate did you plan to let the GUI fall down?
I think I would find it annoying if I was pushing the mouse upwards towards the save button to find that when I reached a certain point the save button was *below* the cursor and I would have to change directions just because the GUI moved.
The save button' hightest pixel is approximately 12 pixels from the top of the screen, while the inventory comes down when the mouse reaches 3 pixels from the top. So unless you have a very inacurate mouse-hand, the problem you described should not appear too often.
Oh! I assumed it would appear when the mouse cursor had y... 70 or something.
The problem with having GUI appear at y=3 is that if the player never moves the cursor that high, they won't find the interface. I remember that when I first played KQ5, the first adventure game I played, I spent a long time just walking around from screen to screen because I had no idea where to look for the GUI, and it never occured to me to hover the mouse over the top of the screen.
Now, most AGS players are used to having to mouse over the top of the screen to check if there's anything there. But since there already IS a visible GUI on top of the screen, why would we assume that there is more above it?
If you hide away the GUI that well, make sure that you have some kind of hint that it's actually there. For instance, have the GUI slide down every time a new item is added to the inventory (heck, you could even go fancy and animate the inventory object materializing inside the green beam or something if you want to).
Quote from: olafmoriarty on Thu 07/08/2008 12:30:22
But since there already IS a visible GUI on top of the screen, why would we assume that there is more above it?
The appearance of the visible GUI itself is a hint towards more being hidden above (the connecting metal bars and the red cables. There is also the MANUAL (sometimes called README.txt) where I usually hide away such little tidbits of useless information as the operation of GUI, game controls, story background and FAQ.
Odds also are, that when you move your mouse to use the buttons for the first time, you will accidentally move it just a bit too far and be greeted with the inventory.
Seriously, olaf, it's not like the player is required to type Ctrl-3-/ while turning the mouse wheel north to get the GUI.
Quote from: KhrisMUC on Thu 07/08/2008 14:33:06
Seriously, olaf, it's not like the player is required to type Ctrl-3-/ while turning the mouse wheel north to get the GUI.
I know. I'm nitpicking. It was just a suggestion, and it probably was a bad one. Sorry about that.
It's a valid suggestion with the probability of a 'pain in the ass' outcome.
Sometimes people (I never do this myself, but I hear lots of people in the AGS forums do this) they'll play the game in a window and not full screen. With there only being 3 pixels of grabbing room it could be quite challenging. And with a computer resolution set to the extreme, those 3 pixels are going to be Much worse.
Now I have no idea what happens to a drop down menu when the mouse passes the 3 pixel hot spot and then rolls over the title bar or desktop. I imagine it stays open, but you never know.
Also there lies another problem. I don't know how you plan on having your battle scenes, but if the player is required to react quickly to click on the small gun icon--it would only further frustrate them if the inventory GUI kept dropping down if they were accidentally a few pixels above the gun. < This is what beta testers are for.
What you could do to avoid that frustration, would be to keep the gun button static and have the inventory GUI slide underneath it.
Just tossing in my 2 cents.
What about having the two grey ends together and slide apart when you hover over it? That way it's not in the way of the gameplay and you still have lots of room to work with.
Ryan:
I thought of this also, but for the player's mercy the game wont be requiring this sort of "panic use" of the gun icon at all, as it will be replaced with a different gameplay mechanic. This should eliminate most problems with that.
Evil:
Suggestion is not bad at all, but I think that any further lenght added into the inventory window opening would make the inventory too slow to use. At the moment the "slide" down will either be instant one, or a three to four frame long one. I'tll depend on how well I can animate it, if at all (its my firs GUI).
I'd add a bit of a glow to the red text as if it's LED's off of some equipment.
You can never go wrong with using a classic for reference...
http://www.americangirlscouts.org/agsresources/Pics/templates/sq6.png
It's in German, sure, but take a look at the LED numbers... there is a hint of dark red on segments not being used (the middle bar on a "0" for example), to make it look more realistic in terms of an actual LED display.
I would also get rid of that gradient and (if possible) animate some long streaks of green "static", kind of, of some other fizzling effect. Even if it has to be static, it can be done. Check out an example below (I have the Photoshop file if you want, with layers in tact):
(http://img382.imageshack.us/img382/5619/whamguims5.jpg)
Otherwise, AWESOME gui, I'd love to play a game with a GUI like that.
You've actually inspired me in the GUI design for my own game. ;)
I really like what you did with your edit, Terran.
I'm personally not a very big fan of drop down menu/inventory or a click to open inventory. I like the inventory being visible at all times, that way you can't forget what you are currently carrying.
But this inventory design isn't too bad.
Quote from: TerranRich on Wed 03/09/2008 06:02:52
You can never go wrong with using a classic for reference...
http://www.americangirlscouts.org/agsresources/Pics/templates/sq6.png
It's in German, sure, but take a look at the LED numbers... there is a hint of dark red on segments not being used (the middle bar on a "0" for example), to make it look more realistic in terms of an actual LED display.
I would also get rid of that gradient and (if possible) animate some long streaks of green "static", kind of, of some other fizzling effect. Even if it has to be static, it can be done. Check out an example below (I have the Photoshop file if you want, with layers in tact):
(http://img382.imageshack.us/img382/5619/whamguims5.jpg)
Otherwise, AWESOME gui, I'd love to play a game with a GUI like that.
You've actually inspired me in the GUI design for my own game. ;)
You have a good idea, and I'll have to try and redesign the holo-beam between the projectors indeed. I'm keeping a bit busy right now, bu I'll be back with a new version ASAP.