UI is not Dead Space

User Interface, no doubt a riveting topic for another blog post. Wait don’t leave! UI is rather important. When done poorly the user will struggle against it and when done well the user might not notice it at all. Ultimately UI is a means to convey critical information to the player. This can range from: how much health the player has, direction of threats or simply navigating through menus.

The Dead Space games are a paragon of excellent UI design.  For those unfamilar with the series it’s a third person shooter with a survival horror element and is set in various fictional space ship environments. I highly recommend the first two entries in the series, the third one not so much. So why is the UI so neat you ask? Simply because it is both extremely functional and unobstrusive.

The health bar is built into the spine of the player’s space mining suit, when the player aims a display appears on the weapon showing the ammo level. Even the inventory is immersive, which is projected from the suit as a hologram without pausing time. You can check out in-game screenshots below.

1468865-deadspace2_gc1
Screenshot showing the ammo counter on the weapon, health bar on the spine, the numbers indicate seconds of oxygen left and the semi-circle bar represents energy levels for stasis powers.
inventory_2
Screenshot showing the projected hologram inventory which will move and rotate as the player does. Issac (the player controlled character) will even turn his head to look at it.

Cool huh?

The lead UI designer Dino Ignacio wanted the UI to be diegetic, you can read a great interview with him here. The Dead Space UI is awesome because important information was all told in-game while the game was happening.

I thought this was relevant as I have tried to implement UI in the same spirit. Earlier iterations of my game showed player scores via text at the top of the screen. Now score is represented visually on the player sprite itself.

score ui
Screenshot showing the current scoring system, a corner is filled in white from the bottom left in an anti-clockwise direction, when a player reaches a winning score of five a centre pattern appears, making it obvious who won.

On the other hand I had a pretty clear idea from the start on how I should represent player health  which hollows out the sprite as damage is taken.

From left to right a player with 3 health, 2 health and 1 health. When the player dies the sprite disappears entirely.

The traditional way of displaying health would usually be a health bar at the top of the screen or just above the player sprite. I think my method is a little better in conveying the same information in a less obtrusive fashion. All the player specific information is found on the player itself: health, score (and who won), player number (via the pointer shape) and direction the player is facing.

Anyone who has played video games will tell you that your focus is rather specific and information on the periphery is likely to be ignored. This is especially true in non-turn based action games where the focus is centered on the player being controlled. So I think it makes sense to have all the information visually represented on the player which can be read without taking an eye off the action.

I’ve been busy redoing menus, adding content, getting paper work done, looking into adding trails to projectiles and the usual bug fixing. I also went to a friend’s wedding on the weekend where I got to talk to another developer who recently released their first game. It’s a grid based puzzler called Randy which is available on iOS devices.

That’s about it for this week, a public test build draws ever closer. I’ll finish up adding modifiers for now and add in missing sound effects so you guys can tell me what you think.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s