Valheim Menus

I’ve been working on the Valheim UI for a little while and I have finished my first iteration.

As shown here, I have redesigned the inventory, the chest and the workbench tabs. 

I didn’t like the wooden texture of the original menus so I kept the translucent grey from the original HUD and added a battle scene in the background. This represents lore in the game that the player is fulfilling a prophecy in which they will destroy the enemies of Odin and free Valheim. I have also updated some of the symbols but these may be changed in the future.

Modifications

The Equipment and Quick Slots ⁽¹⁾ mod in my last post influenced the change in inventory layout. This mod adds an armour section to the player’s inventory as well as a shortcut bar for consumables. In my design, I included an armour section in the inventory to allow quick access to equipped pieces. I also left slots for Megingjord (a belt which increases players’ carry weight) and the Wishbone (an artefact which glows to reveal buried valuables).

As the game is in early access, it can sometimes be a little difficult to navigate the storyline without referring to the guidebook online. With this in mind, I created a section for quests in order to give the player a little more direction while not breaking immersion. I also made a ‘to do’ tab that allows the player to write a list of personal objectives. I decided this would be useful as, in my personal experience, it can be hard to keep track of all of the little jobs that need doing – especially in group servers when the homestead needs maintaining or there are supply shortages.

The chest is simple but I have swapped the menus so that the chest is now on top rather than below. This will be easier to understand for the majority of survival game players as it is a common order for menus.

The workbench is similar to the original, but as with all of these menus, the main difference is the change in location to the centre of the screen for ease of use, especially on larger screens.

The background of the menus and the quest artwork are not mine and the artists are linked below.

References 

(1) RandyKnapp. (2021). EquipmentAndQuickSlots. 
Available: https://valheim.thunderstore.io/package/RandyKnapp/EquipmentAndQuickSlots/
Last accessed 15th March 2021.

(2) FudgeYea. (2021). My Tablet Drawing of The Elder in High-Res. 
Available: https://www.reddit.com/r/valheim/comments/m2sct1/my_tablet_drawing_of_the_elder_in_highres/
Last accessed 22nd March 2021.

(3) Yves Capelle. (2015). Caesar. 
Available: https://film-storyboards.com/caesar/
Last accessed 22nd March 2021.

Valheim HUD

I’ve been working on the Valheim UI for a little while and I have finished my first iteration.

As shown here, I have made a few changes to the layout of the HUD. The minimap has stayed the same but the passive effects have been moved below it. The inventory toolbar has been moved to the lower middle of the screen while sitting below the original stamina bar location. The health bar and stomach have been moved to the upper right corner and I have added an extra shortcut bar in the lower left with the player’s boss ability.

I added viking style dragon figureheads to the UI to make it more thematic while keeping the translucent grey from the original HUD. I found this dragon head design on Deviant Art and I loved its simplicity. ⁽⁴⁾ I have also updated some of the symbols but these may be changed in the future.

Modifications

I did some research into UI mods for Valheim to see what improvements players would like to see. I found some very interesting ideas which I will be implementing in my design.

The first is called Better UI⁽¹⁾. It is a mod which adds a star system to the level of tools, weapons and armour and a colour changing bar to their durability. I used this concept when designing my toolbar.

The second is called Equipment and Quick Slots ⁽²⁾. This mod adds an armour section to the player’s inventory as well as a shortcut bar for consumables. The bar contains three slots on the Z, X and C hotkeys. I used this idea for my toolbar in the lower left of screen and will use it to improve my inventory menu too.

The third is called Minimal Status Effects ⁽³⁾. This mod moves the player’s current passive effects below the minimap and compacts them into a small list. I have also used this idea to reduce the consumption of space across the top of the screen.

References 

(1) Masa. (2021). BetterUI. 
Available: https://valheim.thunderstore.io/package/Masa/BetterUI/
Last accessed 15th March 2021.

(2) RandyKnapp. (2021). EquipmentAndQuickSlots. 
Available: https://valheim.thunderstore.io/package/RandyKnapp/EquipmentAndQuickSlots/
Last accessed 15th March 2021.

(3) RandyKnapp. (2021). MinimalStatusEffects. 
Available: https://valheim.thunderstore.io/package/RandyKnapp/MinimalStatusEffects/
Last accessed 15th March 2021.

(4) VikingTattoo. (2011). Viking Dragon Outline 2011. 
Available: https://www.deviantart.com/vikingtattoo/art/Viking-Dragon-Outline-2011-195872557
Last accessed 27th May 2021.

Valheim

What Is Valheim?

Valheim is an early access survival sandbox game by Iron Gate Studio. The player takes on the role of a Viking in the afterlife where they must craft tools, build shelter and defeat enemies. The game can be played solo or with up to 10 friends online with the option to toggle PVP or PVE.

It was released on 2nd Febuary 2021 and by March 2021 it had over 5.7 million sales and was listed 39th on Steam’s all-time bestselling games.

Personal Interest 

I purchased the game on 12th February and have accumulated 150 hours play time in just 3 weeks! I have been playing on a server with friends where we are following the storyline and progressing to kill the 5 bosses. I also have a lot of hours in my own single player server where I have been exploring the building mechanic and creating my own island settlement using the game’s primitive creative mode.

I heard someone describe this game as a cross between Minecraft and Skyrim – two of my favourite games – and it explains why I love it so much.

User Interface

Keeping in mind that this is an early access game, there are a few bugs and mechanics that need refining. My least favourite part of the game however, is the UI. It is functional but the aesthetic is lacking and I personally feel that the layout is a little off. Somehow I am always struggling to find what I want in the HUD and locations seem counter intuitive. I think this is because it does not follow the layout of the majority of popular survival games. Whether this is a design choice or simply lack of time with the game being in early access, I thought it would be an interesting project to redesign.

Here is the standard HUD in Valheim. In the lower left we have a health and hunger bar along with the current equipped boss blessing. The lower right shows some basic movement controls. The upper left shows the player’s current toolbar with 8 keybound slots. The upper right shows the minimap and any passive buffs that the player is currently effected by.

Here is the chest interface. When a player opens a chest, their full inventory drops down from their toolbar. The chest contents also drop down below that to allow players to transfer goods between the two. On the right we have a menu interface. The top section is split into 4 and contains the player’s learned tutorials, their skills, their collected trophies and a toggle for PVP/PVE. Below this is a crafting menu where the player can see tools they can make with materials they currently carry. On the right it also shows the stats for each tool.

This is the workbench menu. Similar to the image above, it shows the crafting menu. Players may switch between crafting and upgrading from materials they currently carry as well as seeing the stats of their creations. There is also a hammer symbol to allow players to repair any damaged equipment they have.

This is the menu popup for previous tutorials. Throughout the game, the player will be given instruction from Odin’s raven, Hugin. All of the previously accessed tutorials from Hugin can be found here if the player needs to refer back.

This is the skills menu, it shows what the player’s current level is in each learnable craft or tool. To increase levels in any given category, the player must simply practice with that tool by using it more often.

This is the trophy menu, it allows players to see which enemies they have defeated and which trophies they have yet to collect.

When using certain tools such as the hammer, hoe or cultivator, a bar will appear at the bottom of the screen. This shows which structure or terraforming tool is currently selected and the resources are required. This selection can be changed in a larger popup menu,

This is the menu that allows the player’s selection with the hammer, hoe and cultivator. The player can switch between categories to find which item or terraforming tool they need.

This is the menu for the trader, Haldor. Once found, Haldor will trade certain valuables for upgrades, collectables or rare commodities.

This is the HUD for sailing. On the rudder is a wheel, this shows the current rotation of the ship’s sails and the height of the sails. On the right is another representation of the sails, showing no sail, half sail or full mast. Below this is an indicator of wind direction as this effects the speed and direction of the ship at varying sail heights.

Finally, this is the map. It is a larger version of the minimap on the standard HUD and shows the exploration of the player. It allows the player to toggle their map visibility to other players on the server and to pinpoint special locations on the map with a variety of symbols.

Mobile Variation

So for the last couple of weeks I have been working on improving the previous HUD.

Over my winter break, I designed three HUDs for three genres of games. I posted these on my professional Twitter account: www.twitter.com/asgamedesign. I received some feedback from Senior UI Designer, Richard Warner, who shared a number of constructive points to bring forward into my next project. 

After recreating one of the designs in Adobe XD with Richard’s ideas, I took more of his advice into consideration by creating a mobile iteration of the HUD. 

Original Design 

XD – Mobile 

This is the mobile version of the design. I took all of the previous components and scaled them down to a much smaller screen. I had to rearrange a number of assets in order to incorporate the additional buttons that have to take up screen space on mobile. I found this project a lot more difficult than designing for PC.

I never play mobile games so it took time to adjust to the number of extras needed on screen. This made it very difficult to arrange in a way that looked aesthetically pleasing as well as being functional. As seen in my research post for mobile UI, a lot of mobile iterations for games can look ugly when it comes to interfaces so it was a big goal of mine to change that in my design.

It is also difficult to design for an imaginary game. There are no mechanics, rules or buttons for me to base the design off of. This means that everything designed in the interface is a generalisation and more or less assets may be required for a real project.

Overall, I am happy with how this design turned out. It was tricky at times but the result was worth the issues I faced as I think I created a functional interface that is far more easy on the eyes than a number of mainstream FPS mobile games that I researched.

Mobile HUDs

In my previous post, I presented a number of modified iterations of a HUD I designed over my winter break. I followed the advice of Senior UI Designer, Richard Warner and feel like I incorporated his feedback relatively well. However, there is one point that requires more research to complete, a mobile version.

As I don’t play any mobile games and have never designed games for that platform, I completely overlooked the idea of creating an interface for it. I understand that many popular games are redeveloped into simplified versions for mobile players to enjoy and that, in industry, I may come across this type of brief. 

I decided to pick a few popular games to dissect in order to gain a better understanding of the elements needed in the transition from FPS PC games to pocket edition.

Player Unknows Battlegrounds (PUBG) – 2016

The PC HUD layout is very clean. The player and team health is displayed in colour coded bars on the lower left, while the lower right displays the minimap. The lower middle shows the player’s current weapon, ammo, health bar and armour bar. The upper middle shows compass directions in a narrow bar and the upper right shows the number of players remaining.

The mobile HUD is far more busy. This can be based on the smaller screen size but is also due to the player’s lack of keybinds. These controls must be displayed in on-screen panels and buttons for quick use. 

Immediately we can see that both the team information and the minimap have been moved to the top of their respective sides of the screen. The remaining player count has also been switched from the upper right to upper left corner. But both the player health bar and the compass have kept their place.

The interesting addition is all of the buttons. On the left we can see a controller stick for movement along with a backpack symbol to open the player’s inventory. The current weapon indicator has been improved to show both of the players weapons and allows them to swap quickly. It also now shows med-packs and utility which can be pressed for use. On the right we can see a large bullet symbol which allows the player to fire their weapon. There are also three movement buttons, crouch, prone and jump and a crosshair to allow the player to use their weapon scope. Up the side of the minimap there are also options buttons for settings, volume and microphone.

Conclusion

At first glance, I hate this HUD. It is far too busy and overwhelms me a little. I also feel that the text needs some revision as there is some overlap, especially around the compass at the top. I understand the need for the extra buttons but I feel that some symmetry or more aesthetic layout could have been used here. This layout strikes me as function over all else which can be good for ease of use but does not feel inviting or intuitive, especially for new players.

Fortnite – 2017

The PC layout is very exciting and colourful. The lower left shows the player’s health and armour while the lower right shows the player’s inventory, supplies, weapons and ammo. The bar at the foot of the screen shows the player’s level and progress. The upper left the team’s health and armour. The upper right displays the minimap and the upper middle shows a compass.

The mobile HUD is quite charming and presents the same fun and colour of the PC version while not overcrowding the screen. The minimap has swapped to the upper left corner alongside the player health and armour and the team information. The compass has remained in the upper mid section. The inventory and weapons bar have been separated. Now the player’s supplies are in the upper right corner along with the options button, while the weapons and ammo are in the lower mid stretch. The inventory and build buttons frame this bar. The lower left now holds a controller stick for movement while the crouch, jump and shoot buttons are on the middle right of the screen.

Conclusion

I prefer this mobile HUD far more, I think this is mainly due to its simplicity. The number of buttons don’t over face the player and even the colour and opacity choice are easier on the eye. I will keep this design in mind when I design my own mobile HUD in the future.

Minecraft – 2011

While not an FPS, I believe that it is important to consider ideas from other game genres. Minecraft’s PC HUD is very simple with all of the interface grouped in the lower middle section of the screen. The player’s inventory is displayed in boxes with their level progress bar, health and hunger laid out above.

The mobile HUD retains the simplicity of the PC HUD. It keeps the inventory bar at the base of the screen with a button to open the inventory menu. The health and hunger bars have been moved to the upper left of the screen and a menu button has been added to the upper right. Movement buttons have also been added in the lower left corner.

Conclusion

I love both HUDs for Minecraft, their simplicity really give players an easy and informative learning experience when starting the game. I really enjoy HUDs that allow players to explore for themselves without becoming overwhelmed or lost and losing interest in the game.

Final Thoughts

All of these mobile HUDs include the same elements overall:

– movement controls (lower left for access with thumb)
– shooting or additional movement (lower right for access with thumb)
– options/settings
– inventory or weapon swap buttons

These elements will all need to be included in my mobile HUD iterations and it will be interesting to see how they will change the existing layout that I have designed. I am excited to try this challenge over the next few days!

Adobe XD Variation

It’s been a while since my last post as I have been teaching myself how to use some new software and have had nothing to present until now. I have been using YouTube tutorials to learn Adobe XD, a programme for designing, prototyping and animating UI/UX. 

Over my winter break, I designed three HUDs for three genres of games. I posted these on my professional Twitter account: www.twitter.com/asgamedesign. I received some feedback from Senior UI Designer, Richard Warner, who shared a number of constructive points to bring forward into my next project. 

I chose one of the three original designs and decided to recreate it in Adobe XD, taking Richard’s advice into consideration. 

Original Design 

This was the original design for the FPS HUD and Richard’s feedback from Twitter. 

XD – Version 1 

This was the first version I created in XD. It is a direct recreation of the concept made on my iPad and varies very little from the original. The only real difference is the aspect ratio which, as per Richard’s advice, is now 1920 x 1080. Due to this larger size, I also incorporated the advice of my tutors to give the components more of a bleed space to the edges to cater for different sizes of screen. 

XD – Version 2 

This is the second version of the design and I have updated a couple of aspects. The diagonal angle of the frames is now symmetrical and far more easy on the eye. I have also updated the lower bars. The utility symbols have an empty state which will show when the player has used their consumables. The health and armour bars are also represented much cleaner with low opacity symbols for each bar and a colour coded underline for each. 

XD – Version 3 

This is the third version of the design. I discovered a feature in XD which allows me to blur backgrounds within shapes. I used this to replace the gradient look of the frames and also added a pale gradient line to the frames to give a reflective effect – like that of frosted glass. I thought this nicely incorporated Richard’s advice about considering differences between reality and gaming as the glass ties in with weapon scopes and helmet visors. I also created more states for the health and armour bars, similar to the utility states from the previous version.