Valheim Trophies

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

As shown here, I have added the trophies menu. Here the player can see their collection of slayed enemies.

The trophy menu is split into biomes. Each biome is on a new row while the bosses alight down the centre column.

I kept the trophy menu very similar to the original but I tried to simplify it to match my design. Within the circles will be images of each trophy (unfortunately these are too low res to add to my designs). I kept the name of the trophy under each icon but removed the descriptions. These now appear on mouse rollover and create a slight glow around the selection.

Valheim Skills

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

As shown here, I have added the skills menu. Here the player can see how each of their skills are progressing.

Skills increase based on usage, the more a tool is used or an action is performed, the higher that skill will be. Skills can increase up to their maximum of 100. The large yellow bars represent the skill level, while the red bars indicate the player’s experience in that area. Each time the red bar fills, the yellow bar will increase by 1.

I kept the skill menu relatively similar to the original in terms of layout and colours although I have simplified it slightly to fit with the minimalistic style of my UI. The main skill level bar remains yellow and the smaller experience bar is still red.

The main addition is very subtle. I have added a marking system behind the bars. There are 100 increments in total to represent the maximum level of the skills. For me personally, little touches such as these make it easier to visualise my progress.

Valheim Compendium

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

As shown here, I have added to the HUD. I have added an arrow to the top middle of the screen. When rolled over with the mouse, 4 menu buttons drop down at the top of the screen. I have kept the symbolism in these the same as the originals. The first is the compendium.

Originally, everything was in a large list but I felt that it would be better to separate the sections into tabs. Therefore I created the effects, messages and tutorials tabs.

The effects tab shows a skill wheel. The active effects appear around the vegvisir. When rolled over with the mouse, passive effects will show their description in the centre of the wheel.

The message tab simply shows the current session’s message log and allows the player to type to other players in the server.

The tutorials tab shows all of Hugin’s tips in one concise list for the player to refer back to find any information given earlier in the game. This list will grow as the player discovers more within the game and will not reveal anything before it is found.

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 ugly 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.