top of page

PROJECT B

Part 1

Research

Project Name: Niorun: The Dreamwalker

Design Goals: Design a HUD/UI integrated into seamless gameplay.

A Diegetic Interface

To know how to design the best HUD/UI for a video game especially one in third-person, the best place to look at is the public's opinion predominately located on Reddit Forums.

The most popular and favorite HUD mentioned on multiple forums and articles was surprisingly Dead Space's HUD, a game made by Visceral games owned by Electronic Arts released back in 2011.

dead-space-2-mono-keyart.jpg.adapt.crop1

What makes Dead Space's HUD/UI so compelling to video game lovers is that the components of the game are integrated into its gameplay. So what does this mean?

Attached below is a talk given at Game Developers Conference (GDC) 2013 and the Reddit forums. Components in this survival horror game such as ammo and health were part of the game rather than a floating piece of information bordering the screen. 

-Ammo count is displayed on the gun.

-Health Bar is displayed on Isaac's (the protagonist's) suit from green to yellow, to red.

 

-Transitions within the game were also part of the game. A very interesting point in the GDC talk explained the mapping system. Going from one map or to another was simulated on a tram that looked like it was moving. With the selection of a button on the map in the tram, it would halt the train or load in the next level rather than spinning up a loading screen players dislike to see when waiting for the game to load. (When playing the game back then, I noticed transitions made you feel like you were still in the game playing, rather than stopping the flow within a black loading screen that most games typically use.)

-Objective Locators within the game were not some bar or mini-map placed over the screen. Locators that Isaac uses is presented as a sci-fi tool that Isaac has to show him/the player where to go. Players could interact with this locator rather than having it displayed on the screen all the time.

0-j5ygvm4f5j2t5m41.png

The reason for these design choices were because their tools were limited. They worked with what they had and made it possible for these informational elements to be "diegetic in implementation."

-A really good point made by Ignacio, Dead Space's lead interface designer was that "the focus of third-person format should be the story. The story of Isaac. Rather than being pulled into you as a first-person character having an experience."

Links:

https://www.gdcvault.com/play/1017723/Crafting-Destruction-The-Evolution-of

https://www.gamedev.net/forums/topic/699753-what-is-the-best-video-game-hud-ever/

https://www.reddit.com/r/Games/comments/46i0xp/why_dont_more_games_adopt_a_dead_space_like_hud/

What can be learned from this game and the lead interface designer?

Many Reddit users and video game players can agree that less is more. Screens should not be filled with information overload and tiny words to read. No one likes to wait in a loading screen after an action-packed sequence of vanquishing monsters only to be greeted by silence for 10-30 seconds of loading time.

Niorun's UI Conceptualization

Dream state.png

The basis of Niorun's objective is to play as Ellis who needs to eradicate these entities who have invaded one's dream. The way to do so is using "The Guest's" power (please refer back to Project A Part 1). This means to introduce a combat system. 

-Framing: Ellis will be center stage at all times. (Subject to change)

2 States:  In and Out of Combat

Out of combat: Ellis will be normal with The Guest unattached to them and the world is in color depending on the situation (read more below).

In combat: The Guest shows and is connected to Ellis in the form of a red, wisp-like power. The design would be heavily inspired by Alice: Madness Return's hysteria mode.

maxresdefault.jpg

Combat simulation

When first entering an unbalanced dream state, the world is in black and white to Ellis like how the dreamer sees the world being controlled by the Dream Hub. As more of these lesser entities are vanquished leading up to the stronger entity, the more the world gradually restores to color. The effects of defeating these entities inadvertently causes the original dreamer to "wake" or be conscious again of reality and free from being controlled- not what the Shepherds of Humanity (SOH) intend to happen (gasp, potential societal uprising).

Health Display

The health system within the game would possibly be how bright or dim The Guest attached to Ellis glows. The more Ellis is damaged, the more tattered and hurt Ellis acts and the dimmer The Guest glows. When health is extremely low, a vignette creeps in towards Ellis. But in order to not obstruct gameplay, the rest of the environment can still be seen.

Map Function

There won't be a map or a mini-map as much as players always rely on a map to guide them through a level (Maybe I'm just cruel like that). Instead, when needing directions, a certain button could ping the camera in the direction towards progressing the area. This means the game is not open-world, but rather following a linear path with side areas players can explore for lore purposes which lead back to the main path.

Powers

What is a game when the players use the same old powers? Players would be able to strategically select their own powers to equip that Ellis can use within levels and change when out of combat, Transition would not be a separate menu, but a quick animation of Ellis meditating perhaps sitting with the entity moving in front of them. The menu contains floating shapes that show each power.

Attacks to fit a controller:

-Light Attack

-Heavy Attack

-Special 1

-Special 2

-Guard

-3 Passive Skills

Part 2

Draft

Draft3b.png

To start out simple, I decided to focus on the menu layout for the Abilities Selection menu. This menu is able to be opened when out-of-combat for players to be able to customize and choose certain abilities Ellis can use during a level. 

-The square shapes are placeholders for information- not necessarily the exact shape containing the information.

-I changed the idea of The Guest's color to be blue to not confuse players if it is an enemy or not compared to its species' unstable red counterpart.

For the skills menu, I wanted it to be quick access while in-game rather a transfer into a separate screen. Players are able to assign five abilities that could have different combos. When the player goes into the skills menu, Ellis would do a short animation of sitting down to meditate with The Guest looming either in front of Ellis or beside them.

 

Below are two quick rough drafts of how the menu would look on screen. Again, the squares are placeholders for layout information and may not be the final chosen design.

Variation 1

Draft1b.png

-The top bar would be the abilities equipped for Ellis to use.

-The information in the center would be the type of abilities. If this were to fit a controller for console, there would be a LB or RB (left button/right button) to swap between skill sub-menus.

-The dots underneath would be the tabs (suppose to be 4) for each category of skill.

1. Light Attack (2 slots)

2. Heavy Attack (1 slot)

3. Special Attack (1 slot)

4. Passive Skill (1 slot)

(Open to the possibility of Ellis unlocking a second special attack slot later in the game)

-The bottom bar describes which category the above information displays.

Variation 2

Draft2b.png

-The top information contains LB and RB buttons to swap between skill categories (with 4 dots, 4 categories).

-The information below contains the different kinds of attacks for the player to equip.

-The bar at the bottom indicates which category.

-The information to the left corresponds to which category is being displayed, The chosen skill will appear in this area that The Guest is holding.

Part 3

FINAL

gameplay UI

HUD2.png

The UI for Niorun: The Dreamwalker, is fairly simple. The only information displayed is an objective description at the top right of the screen. If players are lost, they could trigger the L3 on a controller and the camera will direct the player in the progressing direction while keeping Ellis in center frame.

HUD 1.png

When heavily injured, Ellis will act injured and The Guest's power will extinguish slightly. Overlaying the screen will be a dark red vignette that grows with each hit. 

abilities Menu

Menu1.png

When accessing the abilities menu, a quick animation shows Ellis sitting down to meditate and The Guest temporarily separates from Ellis and floats along the right side of the screen.

The top icons are the player's abilities they equip. As the story progress, the more slots they unlock. Abilities include light attacks, heavy attacks, special attacks, and passive skills.

The player would first choose which slot they want to replace an ability in the top selection, then the cursor is automatically prompted to the selections below of that type of skill. The LB and RB are to see what kind of different abilities there are within that category. 

When hovering over a skill, a small screen at the bottom shows a small animation of how the ability works. This is to provide players information about what that attack does. Without it, players would have to equip a skill, test it, and go back into the menu to try another ability. This rinse and repeat action is tedious and can be eliminated with this small view.

When the player is done making a selection, they can press the B or Circle button to go back to the first bar and continue customizing their loadout. (Back button not included in the photo)

  • Vimeo
  • LinkedIn
bottom of page