First Person Shooter HUD Layout

In order to create a HUD for a first person shooter (FPS), I must first look at other FPS games to find what elements are included and how they are organised on screen.

An FPS HUD should typically display:
– health bar
– weapon type
– ammo count
– radar/minimap
– team information: score, teammates, round number (if applicable)

Counter Strike: Global Offensive (CS:GO) – 2012

CS:GO has one of my favourite HUDs. It has a very simple, minimalistic and clean look which does not hinder playability or visibility during gameplay. 

The lower left of the screen holds the player’s health and armour stats, while the lower right displays the player’s ammunition for their current weapon. The top left shows the player’s current location on the map in order to assist with call outs to teammates, it also holds a minimap which allows the player to see theirs and their allies’ locations relative to the environment. The bar across the top of the screen shows both teams players and whether or not they are alive. It also shows the round numbers won by each team and counts down the time remaining for the current round.

All of this information is vital to the player and is very easily accessible during fast paced gameplay while also not obstructing the players’ visibility and limiting their view of enemies. The low opacity backgrounds allow the important stats to be seen clearly while not blocking out areas of the screen. In my opinion, this layout works very well and is a great reference for my HUD.

Call of Duty: Warzone – 2020

The lower left of the screen shows the player’s health and match earnings as well as those of their teammates. It also shows the player’s rank in the game and how much they will win from their game. The lower right of the screen shows the player’s current weapon, ammunition and available utility. The top left shows a minimap and the remaining time for the current match. The top bar is a compass that shows the player’s current direction in order to assist navigation.

There is a lot of information in this HUD and personally, I feel that it is okay. The important elements stand out from the gameplay relatively well, with the exception of the weapon stats in the lower right. I think that the lack of a low opacity floating box makes it difficult to read on an everchanging background of gameplay. I will try to improve on this when creating my own HUD.

Halo 5: Guardians – 2015

This layout is slightly different to the previous examples. The lower left of the screen displays a radar to help detect enemies. The lower right shows the score and rank of both teams and shows the number of kills needed to win. The top left shows the player’s available utility while the top right shows current weapon and ammunition. The top bar displays the player’s health.

I really like the simplicity and artstyle of this HUD. It shows the correct amount of information in a clear and concise way while also remaining unobtrusive to gameplay. The artstyle also mirrors that of a futuristic helmet interface. This really improves immersion for the player and makes the HUD layout seem more purposeful well considered.

3 Week Practical Project

Summary

My semester 1 deadline is the 8th of January and, although lectures have finished for winter break, I will continue to work on my MA.

For my submission I need:

– a learning agreement – outlining my aims and objectives of my project so far
– a reflective diary – this blog is a clear reflection to look back on and track my progress
– a body of work – this blog shows all of the work I have done and will continue to do

Over the next 3 weeks running up to my deadline, I will be creating my own concepts for UI. I have chosen 3 genres of games and I will create a HUD for each. 

Contrary to some of my recent research I will not be adding colour blind versions of these concepts as I hope to tackle this in a project sometime in the new year after further study.

I have 3 weeks before my deadline and I have created an outline of what work should be done on each of these weeks to keep me on track.

Week 1 – UI Layout Research 

To start off this project I will be researching HUD layouts for my three chosen genres to find what is effective and ineffective when it comes to placement and scale. I will be considering:

– what works? 
– how does it work? 
– what doesn’t work? 
– what can I improve on? 

Once I have understood these concepts, I can begin to implement them into my designs. 

Week 2 – Concepts 

I will be designing HUDs for the following genres of games:

– first person shooter
– racing
– action adventure

I will be creating these using Procreate and Adobe Photoshop.

Week 3 – Conclusion 

I will write a short (200 – 300 word) summary of the project and reflect on my work. In my conclusion I will discuss: 

– my opinion on the pros and cons of each design 
– any issues I found when creating them
– anything I would like to learn/explore going forward

Colour Blindness Test

I recently ran an experiment with my classmates and tutors to explore the percentage of colour blindness. On average it effects 1 in 12 (8%) of men and 1 in 200 (0.5%) of women but I wanted to take a sample myself.

I used The X Rite Colour Challenge and Hue Test
https://www.xrite.com/hue-test

The lower the score, the better the persons’ ability to differentiate colour. 
The higher the score, the more likely the person has colour blindness.

I sent the test link out to everyone on my course and received 12 responses.
– There were 9 male responses and 3 female responses.
– 11 of the participants were aged 20 – 29, while only 1 was aged 40 – 49.
– 11 of the participants scored 0, while only 1 scored 8.

You would expect that the participant who scored 8 would be male and aged 40 – 49. This is due to colour blindness being more common in men, and often worsening later in life.

However the participant who scored 8 was actually female and aged 20 – 29.

From this sample we can see that even the highest scoring participant does not suffer with colour blindness. My sample does not reflect the global averages but there could be several reasons for this:

– I only tested a small group, the differences would be more pronounced on a larger scale. 

– The ratio of males to females tested were not evenly split.

– The ratio of age groups tested were not evenly split.

– Participants may have used different devices with varying size and colour depth.

– I have tested within a class that specialises in visual design. Had I tested people from various occupations, the results may have been very different.

Given the unusual spread of results and the lack of consistency with the known average, I believe this experiment was inaccurate. There were too many variables that could have swayed the result and I did not receive enough responses for my test to be comparable. I also had to discard three tests as the participants had not included their age or gender. This also limited the number of responses I could use.

This was still a fun test and sparked an interesting conversation about colour blindness with my peers who also found enjoyment in the competitive aspect of scoring their visual abilities.

Colour Blind Accessibility in Games

There are a number of ways to ensure a game is easily playable by colour blind players without becoming an expert on the condition. 

– ‘Understand where you are using colour as information in your game. This could be character colours, UI, puzzle elements, lights, items or even text’. ⁽¹⁾ 

– ‘Use colour blind preview tools/simulators to better understand how colour blind players will experience your game’. ⁽¹⁾ 

– ‘Don’t just use colour for presenting information. Consider using sound, shapes and animations to support the information’. ⁽¹⁾ 

– ‘If you cannot avoid using text colours for information, ensure there is another visual element present to inform the player, such as an icon, image or border. Don’t be tempted to make the text itself more visually complex, as this can make it harder to read for players with dyslexia or reduced vision’. ⁽¹⁾ 

– ‘If you cannot avoid using colour to distinguish information, then consider developing a colour blind mode for your players to use. The best colour blind modes allow the player to choose the colours of the most important elements. For example if your game is a team-based game, let the player set the colours for ‘my team’ and ‘opposing team”. ⁽¹⁾ 

– ‘Giving the player control over colours doesn’t just mean they can distinguish elements form each other, but they can make them distinguishable from everything else in the game. If you have a red team and a blue team in a brown environment the teams will be distinct from each other, but the red team will likely be hard for colour blind players to see against the environment’. ⁽¹⁾ 

– ‘If you have a large artistic team, create colour presets that they can assign textures to. This will allow you to manage the colour information of your products as a whole and work it into your colour blind modes’. ⁽¹⁾ 

– ‘In multiplayer games, character customisation often allows colour blind players to create a character silhouette that they can recognise. For example, I don’t need to know that my character is green, I just need to know that it’s the one wearing the top hat’. ⁽¹⁾ 

– ‘Make your colour options easy to find in the menus. Either have a specific accessibility menu or include them in the top-level game graphics options. Make it as easy as possible for players to find the options that can make the experience playable’. ⁽¹⁾ 

– ‘Finally, talk about your features with colour blind players to see if they’re usable. Remember that some colour features may be completely invisible to them, so be sure to explain the gameplay intentions of your features, systems and art’. ⁽¹⁾ 

References 

(1) Douglas Pennant. (2020). Color-Blindness Accessibility Guide 
Available: https://caniplaythat.com/color-blindness-accessibility-guide/.  
Last accessed 14th Nov 2020. 

Colour Blindness in Games

From completing puzzles to distinguishing enemies from allies, colour is implemented for a vast range of purposes in games. So what happens when 1 in 12 men and 1 in 200 women are affected by colour blindness? A large number of games have options in their settings that cater for their colour blind players. 

Filters 

‘Perhaps the most common way of implementing colour blind accessibility in is including modes for the different types of colour blindness via a whole-screen filter. This is meant to target the problem colours for colour blind people; however, these filters tend to oversaturate the entire colour palette, resulting in some undesirable colours’. ⁽¹⁾ Here are some examples:  

Call of Duty 

Originally COD’s colour blind settings would only effect its HUD and map but it’s 2014 release, Advanced Warfare, introduced filters for gameplay too. 

‘Overall, the colour palette seems unchanged; there is some slight subtle discolouration with certain aspects of the map. The most noticeable difference, is the colour of the stairs through the scope of the gun, which appears more purple [than red] with colour blind mode enabled’. ⁽¹⁾ The difference is also apparent in the sky as it has a much more green tone in the colour blind mode. 

colour blind left / default right 

The colour blind mode in Ghosts is much more noticeable. As shown in the image below, the red tones are purplish when colour blind mode is enabled. For the majority of cases, red and green colours are too similar so ‘colour blind mode adds a tinge of reddish bright pink to help the players differentiate between the two [but] this comes off as unnatural, even to those with colour blindness’. ⁽¹⁾ 

colour blind left / default right 

Conclusion 

‘Whole screen filters are, typically, not the best approach to colour blind accessibility. 
– Compressing the entire colour palette pushes hues away from the problematic areas and bunches them closely up against other hues, swapping colour clashes for other colour clashes. 
– Changing all of the colours that are distinguishable to those with colour blindness makes the game look bizarre and unnatural. 
– Do not alter that which does not need to be altered. 
– Help the player distinguish between vital information necessary to play the game. 
– A player should not experience colours in games differently than they perceive them naturally in the world’
. ⁽¹⁾ 

I am inclined to agree with the above conclusion. The unrealistic colours can be distracting and disorienting for players, especially if they already struggle with colour differentiation. The drastic changes to environment colour palettes is unnecessary and hinders gameplay more than it helps. 

DOOM 

DOOM uses the same idea of a filters that cover the HUD, map and gameplay. ‘DOOM inherently uses a lot of reds; notice how turning on deuteranopia mode drowns all of these out, which essentially makes all the colours bland and muted’. ⁽¹⁾ 

colour blind bottom / default top 

Customisable Colours 

‘Another way to implement colour blind accessibility in video games is to include preset or customisable colour combinations, based on types of colour blindness, for representing different types of vital information in the game. This method tends to receive more favourable feedback from those with colour blindness since it only induces changes in colours that are problematic without altering the rest of the game’s colour palette’. ⁽¹⁾ 

Battlefield 4 

‘Battlefield 4 changes the colours of specific essential visual indicators, such as the colour of UI elements related to the player’s squad, team and enemy. Additionally, as many people do not know their classification of colour blindness, the game instructs players: “If colour blind, choose the team colours that differentiate the most among each other”‘. ⁽¹⁾ 

Destiny 

‘Similar to Battlefield 4, Destiny offers preset colour palettes for these three types of colour blindness’. ⁽¹⁾ 

Conclusion 

‘Ideally, provide the option to let players select and customise colours for vital information. 
– These can be applied to outlines, health bars, icons, names, object indicators, etc…
– One size does not fit all. 
– There are varying degrees of colour blindness, so customisation can offer a personal and, ultimately, more optimal experience’
. ⁽¹⁾ 

I fully agree with this statement. Less is not more when it comes to accessibility and offering players the ability to customise their experience to their specific needs or preferences is a huge plus for a game. 

Iconography 

‘Perhaps the best approach to colour blind accessibility is including iconography as a form of supplementary conveyance. While it is always best practice to convey information via multiple methods (eg: audio, visual and textual conveyance), is is not always plausible. It is imperative that vital game information not be conveyed solely by colour, as it colour negatively impact the experience of a player who struggles to see a specific colour’. ⁽¹⁾ 

Grand Theft Auto V 

‘GTA V, as well as many of the games in the GTA series, include icons as a form of conveyance. Although there is a colour assigned to specific icons, colour alone is not relied upon to understand what they mean’. ⁽¹⁾ 

Hearthstone 

‘In a 2016, changes were made to the card collection UI on Hearthstone. ‘While it may be possible that these changes are purely aesthetic and were not implemented with usability in mind, there are now colours associated with specific heroes for each of your deck. In addition to these colours, Blizzard also incorporated each hero’s symbol used on the tabs of the card collection UI. Again, including this iconography not only allows the player to make an association between the hero/colour/icon, but not rely solely on colour as the only source of information’

Conclusion 

‘Avoid relying on colour alone (by adding symbols, text, varying enemy design, etc.) 
– If not possible, include a simple colour palette that can be used as a single-colour choice that is not problematic for those with colour blindness (eg, dark orange/light blue). 
– If neither of these are possible, a brief review of the game aspects that absolutely need to be differentiated in order to successfully play the game (eg, teammates vs enemies) can be done to decide if specific UI/gameplay elements can be modified’
. ⁽¹⁾ 

I like the idea of symbols to indicate points of interest or icons but they can be difficult to read in certain situations, such as fast paced multiplayer shooters. Icons can be great but, for me personally, they would have to fit the genre and pacing of the game to be effective. 

References 

(1) Bill Hardin. (2016). Colorblind Accessibility in Video Games – is the industry heading in the right direction?. 
Available: https://www.gamersexperience.com/colorblind-accessibility-in-video-games-is-the-industry-heading-in-the-right-direction/
Last accessed 14th Nov 2020.

What is Colour Blindness?

As mentioned in the summary of my previous project, I would like to research into the effects of colour blindness on colour differentiation in games. I need to learn more about this condition and how it can be considered when designing UI to be more inclusive.

What is Colour Blindness?

Dictionary.com defines colour blindness as: 
The ‘inability to distinguish one or several chromatic colours, independent of the capacity for distinguishing light and shade’. ⁽¹⁾

Gamasutra states that ‘colour is perceived by the brain as a result of light rays reflecting off objects and hitting the retina of the eye. However, different colours can have different biological effects and not all people see colour the same’. ⁽²⁾

How Does Colour Blindness Work?

‘In the [eye’s] retina, there are two types of cells that detect light. They are called rods and cones. Rods detect only light and dark and are very sensitive to low light levels. Cone cells detect colour and are concentrated near the centre of your vision. There are three types of cones that see colour: red, green and blue. The brain uses input from these cone cells to determine our colour perception.

Colour blindness can happen when one or more of the colour cone cells are absent, not working or detect a different colour than normal. Severe colour blindness occurs when all three cone cells are absent. Mild colour blindness happens when all three cone cells are present but one cone cell does not work right’. ⁽⁴⁾ 

Types of Colour Blindness

There are multiple types of colour blindness in which specific colour perceptions vary. 

Trichromacy is classed as ‘normal vision [and] uses all three types of light cones correctly’. ⁽³⁾ 

Dichromacy is where ‘only two types of light cones are able to perceive colour’. ⁽³⁾ 

The image below shows the comparison between trichromats (people with normal vision) and dichromats (people with colour blindness).

Deuteranopia

Deuteranopes are more likely to confuse:
1. mid reds with mid greens
2. blue greens with grey and mid pinks
3. bright greens with yellows
4. pale pinks with light grey
5. mid reds with mid browns
6. light blues with lilac

Protanopia

Protanopes are more likely to confuse:
1. black with many shades of red
2. dark brown with dark green, dark orange and dark red
3. some blues with some reds, purples and dark pinks
4. mid greens with some oranges

Tritanopia

Tritanopes are more likely to confuse:
1. light blues with greys
2. dark purples with black
3. mid greens with blues
4. oranges with reds

Monochromia

The image above shows an extremely rare condition known as Monochromacy (Achromatopsia), in which a person ‘can see no colour at all and their world consists of different shades of grey ranging from black to white. Achromatopsia is extremely rare, occurring only in approximately 1 in 33,000 and its symptoms can make life very difficult. Usually someone with achromatopsia will need to wear dark glasses inside in normal light conditions’. ⁽³⁾

References 

(1) Dictionary. (2020). Colour Blindness. 
Available: https://www.dictionary.com/browse/color-blindness?s=t
Last accessed 1st Nov 2020.

(2) Herman Tulleken. (2015). Color in Games: an in-depth look at one of game design’s most useful tools. 
Available: https://www.gamasutra.com/blogs/HermanTulleken/20150729/249761/Color_in_games_An_indepth_look_at_one_of_game_designs_most_useful_tools.php#:~:text=The%20Function%20of%20Color%20in,them%20easier%20in%20the%20game.
Last accessed 1st Nov 2020.

(3) Colour Blind Awareness. (2020). Types of Colour Blindness. 
Available: https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/. 
Last accessed 1st Nov 2020.

(4) David Turbert. (2019). What Is Color Blindness?. 
Available: https://www.aao.org/eye-health/diseases/what-is-color-blindness#:~:text=Color%20blindness%20occurs%20when%20you,and%20reds%2C%20and%20occasionally%20blues. 
Last accessed 1st Nov 2020.