Originally Posted by alastair john jack Diablo III's HUD is the best in the Diablo series I think, as you can see it was cloned in Torchlight too.
Diablo 3 UI explained:
Also, I'm not sure Runic really "cloned" the Diablo 3 HUD to make Torchlight. The guys who designed Diablo and Diablo 2, Max Schaefer and Erich Schaefer, co-founded Runic with Travis Baldree, the designer of Fate and Mythos. Who knows... its possible that Blizzard "cloned" their ideas for Diablo 3.
Interestingly enough too, Matt Uelmen (the guy who created the Diablo and Diablo II stoundtracks) also made the soundtrack for Torchlight. It's pretty good... I've given it a couple of listens on my MP3 player.
I liked the HUD in "Speial Forces", but everything else about the interface was awful - I remember it took me half an hour just to figure out how to select and start a mission - and that was without individually selecting and equipping my squad members first...
Any good HUD should display only relevant information, and any screen space used to create it should be used to its fullest. If you have some sort of passive upgrade, like something that allows you to double jump, then you shouldn't show that on the main HUD; Player decisions won't be affected by knowing at all times that they can double jump. Any item that is consumed (such as a key when opening a door) should be displayed on the HUD, as that information is needed to make a decision of where to go next (or what they can do in the case of explosives!)
Irrelevant information that can't be used to make a decision is clutter and shouldn't be displayed. Text and icons that mean the same thing (such as an icon for health and the text "Health" next to it) is redundant, and clutter; Pick one or the other, or find a way to cut down on both (perhaps by making the value a specific color?)
Artwork is a problem that is difficult to address. On the one hand, art makes an HUD more interesting. On the other, too much art is clutter.
I think some HUDs were made large to help keep up performance. Basically the bigger the main game window is, the slower the fillrate is. So a big HUD helps somewhat. So in some of those examples where the HUD could be smaller, there is most likely a reason for it.
Originally Posted by Spaceman Strife Wow, I didn't expect such a thorough explanation! Thanks a million, Jess.
No problem. My pleasure!
Originally Posted by Spaceman Strife I played around with the menu based on some of your suggestions, and here's the result so far...
Seems like a little bit of texturing can make a world of different, aye?
Great job, Strife! Huge improvement. Honestly, your HUD (and the HUD of all RPGs) will be far more complex than the HUDs for these shooters. So, you've got more work to do than I do.
By playing around with the information placement and mechanics of your HUD... you're actually dabbling in a field called "Usability". (http://en.wikipedia.org/wiki/Usability) When I used to work in Software Quality Assurance (a while back), I worked with Usability Engineers that would do nothing but develop software interfaces. They used detailed processes, created wireframes, conducted user focus groups, etc... all in an effort to develop the most appropriate user interface. In the gaming world, no company does this better than Blizzard. You'd be surprised how many people they have dedicated to the engineering of their game interfaces.
I think you're headed in the right direction. Honestly, you'd could spend a TON of time developing your HUD and never get it perfect. However, some time invested now in developing your HUD will certainly pay off later. Players will play your game longer and get frustrated less with an "easy to use" interface.
One quick note: Taking a look at your buttons in the bottom left, you might consider making them icon-tabs. Something like this:
Again, great work and keep at it!
Sketchy - Thanks for posting the HUDs! I hadn't seen that Special Forces HUD and you're right... it is good!
Sounds awesome! When I was in college, my Data Structures class touched a little bit on GUIs, but it wasn't anything overly complicated.
Looking at that screenshot, the tabs do look like add a nice touch. I think the main issue i'd run into is the fact that the inventory/skill menus are displayed using the IconView object, which always has a black border. If I draw the tab buttons the right way though, I might be able to find a way around that. The least I can do is perhaps change them into graphic buttons, which would make the MENU button stand out more.
I think you're trying to display far more information than the player needs, making it more cluttered than it should be.
All you really need to show are the health and magic(?) bars.
They don't need to be constantly reminded what experience level they've reached, or what items they are carrying.
Instead, you can just pop up a message telling them when they gain experience or find an item, and they will just remember it.
If they need a reminder, pressing a key would bring up a fullscreen menu, from which they could use items, and see more detailed information (eg. precise experience level, description of skills, etc).
If you want items to be used more directly, then you could show two item "slots" - primary and secondary, corresponding to button A and button B (or maybe one item and one weapon - you could use another button to cycle items).
You will remember that Zeliard's HUD was very simple - that's because all the unimportant stuff is viewed from a separate menu screen:
Actually, the items that appear on the HUD aren't the player's inventory - they're the shortcut keys. During the game, the player can select items from their inventory and then assign them to one of the 10 shortcut keys, so all they need to do is press the corresponding key in-game instead of opening up the inventory.
Also, I do have a full-screen menu, which is accessible by pressing the M key or clicking MENU at the bottom-left of the HUD. To be honest, I think the full-screen menu is more cluttered than the HUD now.
Just stopping in to say thank you to Jess Bowers for starting this thread. I read some the other day and it really made me want to make my own game's HUD look better so I did just that.
EDIT:
Here's before:
And here's after:
Edited by Del Duio
--
"Del Duio has received 0 trophies. Click here to see them all."
"To be a true ninja you must first pick the most stealthy of our assorted combat suits. Might I suggest the bright neon orange?"
DXF Games, coming next: Hasslevania 2- This Space for Rent!
Originally Posted by Del Duio Just stopping in to say thank you to Jess Bowers for starting this thread. I read some the other day and it really made me want to make my own game's HUD look better so I did just that.
Your welcome, Del Duio! I'm just like you guys... I'm designing a game and want it to have a cool HUD. Right now, my HUD is pretty basic but doing this research has really helped me come up with some fresh ideas. It may be awhile before I get to implement those ideas but I'm really looking forward to playing with different HUD designs. Whenever I get something drafted, I will definitely post it here to get some feedback from everyone.
I agree, having a good HUD makes a huge difference. It's the part of your game that's really not going to change much over the course of playing and you don't want it too complicated.
For mine I've been incorporating some corner tabs that appear over that squarish playfield depending on the circumstance because I didn't want to mess with what I had already. The upper LH corner is reserved for the Whore's pet HP tab and the new one I did last night is for the upper RH corner for a star / score bonus thing that expands outwards and to the left. I guess if I can think of 2 more reasons to use tabs they'll go in the lower LH and RH corners but I don't want to risk covering up too much of the actual gamefield if it's not necessary.
--
"Del Duio has received 0 trophies. Click here to see them all."
"To be a true ninja you must first pick the most stealthy of our assorted combat suits. Might I suggest the bright neon orange?"
DXF Games, coming next: Hasslevania 2- This Space for Rent!
We did the game in about three weeks (mostly late nights) and I had a lot of fun working on the HUD - so I thought I'd post it here. It's the first HUD I've done for an RPG so I looked at a lot of other examples (Diablo, Torchlight, etc.). Let me know what you think! Thanks!
Screen 1 - Title Page
Screen 2 - Play Screen
Screen 3 - Inventory
P.S. The top left spot of this Inventory screenshot contains a pair of leather boots. My daughters said they looked like hot dogs.
Advertisement
Post Reply
Edited by Del Duio
