Through this article I will talk how Rolling Bob's HUD was designed from the scratch and how evolve by team work and iteration.
First of all, I would like to thank the Moon Factory team for its support developing the interface and giving a hand when it comes to talk about HUD.
Just to get easily what were our needs designing HUD, I will explain brieftly Rolling Bob's game concept (please, look the game's trailer for a better a idea about our game).
"Rolling Bob is a platformer game where player (males and females from 9 to 12) has to lead and protect Bob by drawing his path to save the BITS".
Well, I do hope that you have a overall idea about the main premises of the game But, since we are here to talk about the HUD, I am going to list what were the most important things to track for the player:
Cores: collectibles with a strong lore. They affect the Final Score.
Time: it tells player how much take to finish the level. Affects the Final Score.
BITs: tiny robots from last generation; kind of our sons. They affect the Final Score.
Pointer position: the element which enables the player drawing from a given point of the screen to another as long as he has energy.
Energy: resource that enables drawing through pointer as long as it is available.
Once we know what it is needed to communicate player, let's decide how to do it.
Cores, Time, BITs and other achievements make the player earn Score Points.
Since our target audience were mainly males and females from 7 to 12 years old, the best thing to do is keep the things simple and kind:
Cores: these are not innovative at all in the way that are shown to the player, but effective. From the very beginning we had mechanics that affects the amount of cores collected, so it was necessary to keep the numbers there. Also, this is a good way to keep achievers looking for every single core in each level.
Time: since this is an element that builds the Final Score it is important to inform the player how long is taking to him going through the level. Moreover, its format (minutes:seconds:miliseconds) pushes the player to speed-up.
BITs: since it was important to us to keep clean the HUD due to drawing mechanic (player needs a clean canvas to draw and see what is coming), it was decided to let BITs as a diegetic element. They will follow Bob and they will perform fun animations to charm the most young players.
Pointer: in early stages of the development, pointer was a tiny green dot surrounded by a green circumference. When Draw button pressed, both shone to indicated that drawing was ongoing. This was a very basic element which improved tons after iterating the own drawing mechanic.
Energy Bar: this was the more delicate element since it is too important for player keep and eye on it constantly without decrease his attention over the main character. Having that in mind, it was pretty clear from a design point of view that it won't work as a HUD element placed out of the main character's area. The idea of place it on pointer was in the air and, after testing a placeholder bar on the top of the screen, it was confirmed the original theory: new approaches need to be tested.
Basically, everything planned and designed works as it was simple and effective. The problem with energy bar was noticed during the first testing sessions as it was predicted. But what we learnt during these phase was that we will not be able to catch the players' attention far from Pointer or main character since:
Players are not used to drawing mechanic's input since it involves aiming to the screen with the DualShock4.
Game demands certain accuracy drawing at the same time the player controls main character.
The high risk of dying (there is no lives or health, just one touch to die) makes the players being so focus on the intense gameplay.
For all these reasons, HUD remained practically unnoticed for players until they get some expertise. As long as Pointer was the main focus of attention for player, it was thought to be also the main source of information as long as it does not disturb for drawing. Then, the following changes were made in HUD to enhance the User Experience:
Energy Bar on Pointer: as it was originally designed (previous Energy Bar was a placeholder for early testing), Energy Bar was attached around Pointer, which increased its size.
Info in real time: increasing its size offered us the opportunity of providing info about other interactive elements inside the central dot for a great variety of situations. I.e: aiming to a switch (a game element) with the Pointer will print inside of it the button that the player needs to press to open it. This was a great point for telling the player how works the most complex elements as the Magnetic Surfaces, which has three possible interactions.
Levels of Energy: Energy Bar will also tell players when they are running out of Energy changing its colour and when they are out of it by blinking.
Dragging feature: Pointer felt more natural and responsive since the own drawing mechanic changes thanks to a dragging system similar to the one seen in Z-brush. Players can tell that you have enough anticipation to know how the traces will be drawn (direction and curvature) thanks to the second dot that you drag. Also dragging without drawing provoked that Pointer leaves a tail, which will aid the player to localize the Pointer in screen.
Of course, that was the more basic stuff; the game had more complex features that we learnt to communicate effectively using different channels for providing enough feedback to players. This is the case, for example, of the 'Time Bullet' skill, which enables, as you can guess, slow down time in scene. For this skill it was needed to show that:
Effect is activated.
How much is available.
Then, the following things where designed:
New element attached to main character. This new module was a light over its helmet with a green glow when Time Bullet energy was full. Helmet's light will turn, progressively, yellow, orange, and, finally, red to show that player is expending Time Bullet energy and he has run out of it. This also reinforce the fact that the main character evolves.
When 'Time Bullet' was on, apart from slowing down the time in scene, all the elements on HUD will be shown in gray scale. This change within the scene is also support with a deep and high-pitched sound to make more noticable the change in the game.
Even being great the sensation and the feedback changing between modes, players kept a bit puzzled when they have to tell how much energy is left. So, diegetic approach was not enough and game needed an extra HUD element, something that design want to avoid to keep it clean and, of course, do not saturate the Pointer.
Then, Pointer was no longer an option, so design go for the bar, but, taking advantage of the metaphore of the time, we introduced underneath of the Time Counter, which result very clear for players in later testings after the implementation. It was also added the same colour code from the light of the helmet to show how much is left.
As a self-imposed rule within User Interface design, HUD should remain as simple and clean as possible. This applies to other cases as the bosses' design.
Instead of having non-diegetic or spacial elements gauging the health points of the enemies, design take the beloved and handy diegetic approach to contextualize the life's counter in the boss concept design. Then, every boss tell player how is suffering damage by losing parts of his body as it can be head gems from the 'Bad Furnace' helmet (see the pic at left) or the wings and the turrent from a aircraft. This also has a use as a sense of progression and a reward during the boss fight instead of having numbers going down.
When a reinforcement was needed for certain mechanics as 'Teleport' (player can teleport to
another point in screen when Energy Bar emits a green glow), desing though to have signals inside the levels. These idea work nice since players were warned about:
Incoming dangers.
Interactive elements.
Near rewards (BITs, core stashes...).
Special areas or enemies ahead.
Regarding to HUD, the thing that I missed most were the animations. Due to a work overload, team was not able to deliver a more eye-catching HUD with animations, for instance, when a core is collected and it is summed up on Cores Counter. Here, it will be feel great have a +1 animation on total cores collected and a shaking effect of the counter, for example.
As designer, I will like to see a HUD theme related to the narrative. For instance, there was a proposal of having the HUD as the own interface of the main character. Something similar to the one seen in Metroid saga for Gamecube.
Of course, our HUD will not be that crowded since we have our rule of keeping it clean, but just adding helmet appearance and HUD icons as holographic will look nice and coherent. Moreover, HUD design proposal had two modes to avoid saturation of elements: minimal and expanded HUDs.
Minimal will keep the elements seen to this poin and expanded will have more as current score and objectives. Expanded HUD will prompt automatically when a main character get to the end of an area or a NPC calls main character through communicator (when player is not able to draw). This will show the players their own progress (they were able to change between modes by swiping over DS4 touchpad) and it will match more the theme. But, after some cutbacks related to in-level objectives, this idea was not implemented.
What we did implement was a HUD rays' effect when main character suffers an impact from an Evil Core, blinding partially player's vision and breaking the fourth wall. This required too much iteration until we reach something that was close to what we were looking for.
Rolling Bob main HUD is simple, but full of good ideas to solve certain issues as we discussed above (particularly, Pointer and dragging features). Overall, I am happy with the work that we did, but HUD animations and a contextualize theme could be the icing of the cake. But it can be forgotten that it was our first game on PS4 and it was developed in 8 months...
If you want to give it a go, Rolling Bob is available for PS4 in PS Store. Hope you like the game!
Please, feel free to share below any thoughts about the article. If you want to visit my site and read more design stuff, click here.
Read more about:
BlogsYou May Also Like
.png?width=300&auto=webp&quality=80&disable=upscale)