Here are my final versions for the HUD!

This picture below shows all of the huds and where they are placed in a still image:

-Still image with transparent background:

Hud compostion layout Final 2 transparent.png


-Still image with coloured in real life background:

Hud compostion layout Final 2 with background.png


Here is all of the Huds again but this time they are animated:

-Animation with background:


Here are my three teams and logos on three style sheets:

Team Clockworks:


Team Ruby:


Team Tophat:


This is the Speedometer. The hud tells how much speed you are doing. It goes faster if you hold down back triggers of the controller. This hud is a permit hud which will stay on the screen for the whole game. Below is the still image and animated versions:

Here is the starlight hud which is a Action Hud, which gets triggered when the game starts and then leaves the screen after a few seconds after the game has started. This hud is to tell the player the countdown for the race so they are ready to drive the racing car. Below are the still image and animated versions:

This is the Fuel Gauge hud. It is a permit hud which stays for the game. It tells the player how much fuel the car has and how much is left. When run out the car can not continue but can be prevented if the car gets fuel by electricity power in specific areas of the map. Here is the still image and animation versions:

This is the Lap hud. It is permit and tells the player what lap they are on and how many laps are left. Here is the still image versions:

Lap HUD Final.png

This is the position hud. It is a permit hud and tells the player what place number they are in the race and how many other racers are in front or behind them. Here is the still image version:



The Map hud is a permit hud and tells the player where they are on the hud. The map also gives other information like where are other players are on the map, checkpoints and the start/finish line. Here is the still image and animated versions:

-One just the map:


-One with the map and icons on map:


A small hud is the direction arrow. This is a permit hud which tells what direction you need to go in next. Here is the still image:


The last hud I made was the red alert hud which is a action hud. It get triggers when the player is running out of fuel. It glows bright red to warn the player they are low on electricity fuel and will have to recharge somewhere on the map or they will be out of the game. Here is the animation version of it:


Good points:


  • I like how the Hud theming can be fitted into actual hud interface from it’s unique style and format. Usually you find more simple colours hud but I wanted to make huds which are still realistic and can be seen it has a electro punk (steampunk) or olden times theming and style from the rusty metals, serif fonts and clockworks!
  • The animations, mainly for all of the clockworks gears, speedometer and fuels goes very well from the graphics I made for it!
  • The texturing of the metals were made from original metal texture from scratch just using one colour and noises and blurs to create some original good looking metal texture in Photoshop. I used that as my main base, then use some brushes for the the metal have more texture to it from staining and scratches, etc. The brushed pack also came with nuts and bolts which I used around each pieces of metal in the huds.
  • I like the additional clockwork cogs in the background of some huds the speedometer and start lights. It gives life into the huds as well adding more detail.
  • How all of the hud fit together in the final version of the hud layout. It contrast well the huds can give the right information to the player without overloading them with information!

-Teams and Logos:

  • I like the colours I have chosen for each. They are not the basic simple yellow, red and blue colours. The three teams colours show they are more unique in colours as it shows the team colours uses yellow, light red and light blue.
  • The style of each of the team’s characters styles show how they represented and how their clothes are shown, shows that each of the character is linked to their team.
  • The logos show they can be easy to read as the designs of the logos are basic which is linked to my research as most of the existing logos I have looked at shows that basic logos are easier to read and are more recognisable.

Bad points:


  • The huds may be filling up too much space on the screen, due to most of the huds not being transparent. However I decided to make most of the huds with metal not transparent as I personally feel it won’t be as good.
  • The style of the lap and positioning huds looks too basic and too bright compared to the other huds.
  • Would want to add more animations to huds which I didn’t make animations for or make more in depth complex animations for my existing hud animations.
  • The “Go” text in the animation for the start lights is black which isn’t that good with background. The Go text blends in with the darker backgrounds which makes it harder to read.
  • Some of the huds like the fuel gauge and speedometer are not transparent which might effect the gameplay as the player can not see all of the gameplay on the screen! When I was developing the realistic and non transparent huds, I thought if I add transparency to the hud it would ruin the look of each of the huds!

-Teams and Logos:

  • Should of have added more team members for per team to be more diverse with characters for all of the teams!
  • Logos could’ve shown more a steampunk vibe to them.
  • Change the colours up so it doesn’t seem to be similar to generic colours which are yellow, blue and red.



  • If I do this again, I will try to find another way to make the huds smaller or another way to make them transparent.
  • Will change the colours or style of the lap and position huds to fit with the tone of all of the other huds.
  • Will make new or more in depth/ complex animations next time.
  • I will change the colours to a bright orange or yellow for the go text in the start lights animation.
  • Next time I will look into ways to make all of the hud transparent but wont ruined the look and style of the huds!

-Teams and Logos:

  • When designing the team’s next time, I would add more team members to each of the three teams.
  • Will add a more steampunk theme vibe to the logos next time from using metal textures,etc.
  • Will next time add more animations to existing hud animations and make new animations for some hud which I didn’t animate.

General improvements:

Just to double check that I am working in a 72 resolution rather than a 300 resolution when making the graphics for the huds in Adobe Photoshop. Try to find a better filetype to export as when I export in After Effects rather than .mov file type which seem to only works in quick time player.

Comparing to official professional work:

I will be comparing my work to another hud interface from a sim driving racing game which was used in some of my research, the Need for Speed hud interface.




As we can see from my final layout it shows that, there is a lot which was inspired from the hud layout that Need for Speed has. From the laps, position, map and speedometer being in the similar position as the hud layout in Need for Speed. What is useful is that Need for Speed huds were all lined up on a line from left to right or where centered in the middle. I did something similar to my hud layout and shows that I have lined them up so it looks smarter.



What is unique about my hud layout that I added the starlights and fuel gauge huds which were not in Need for Speed game or huds design. The map hud are completely different on how they show map information. What unique to my hud is that I added clockwork behind the huds like the speedometer to show they are running on clockworks.

Need for Speed map shows that is zoomed which only shows the roads you will be driving onto next, while the driver arrow which is you on the maps, shows it usually stays in the middle of the map. The map moves if the player moves forward which makes the map zoomed in while my map is always showing the whole map. My map hud design was more inspired by the mario kart huds rather than the Need for Speed hud.

The speedometer style is very different compared to the Need for Speed hud. The similarities shows that it has the same format of numbering and has thin lines around the circle to give a more specific reading. It has similar animation of the hand going around the speedometer from 0-10/12. The main difference is the style/theme of the speedometer. Need for Speed is a modern themed game while my game idea is more Victorian time which didn’t have a lot of interface tech or cars. I wanted to make the hud style fit with the theme and time.

The text which are mainly the position number and lap number show for each of them stand out due to I used a bright colour like white. This makes the text easy to read due to the contrast is the opposite as gameplay would be darker than the text.

Overall the both huds layout and styles show they are both unique from the different kind of huds. My huds show it can be seen that my game would be set up in a different time like steampunk Victorian times compared to the modern time in Need for Speed. Need for Speeds huds show that it is a modern  sim driving game from the map and speedometer being very similar to a actual car speed meter dial. My one takes the speed meter dial from a modern car and converts it to a old fashioned speed dial.

Comparing similarities and differences to the my research/ideas to the my final product:

My research shows that a steampunk inspired themes was their from the basic start. I researched various steampunk themed clothing and cars. I was originally looking at various and different themes. I was originally looking at: Sci-fi, modern, medieval and steampunk/victorian times. From the ideas I thought to myself Sci-fi and modern is quite generic. Most of the existing games out there show that they are mainly modern or sci-fi. Examples are Dirt 3 and Need for Speed are all modern. So I decided to be unique and chose to do Victorian/steampunk. This would be more challenging due that the hud in the assignment brief said it need to be electric cars with realistic graphics.

I also looked into the development of the game series Need for Speed from the timeline I created. It helped me to know about the hud layout more and shows how it has developed. I also did this with Mario Karts huds layouts. The ideas which I made show that I had many team names and themes for them. I started team names on the mindmap and made a section called teams then naming then steampunk. I listed and show many idea for names and showed which one got accepted, etc.

Another adaptations I had to do from ideas to designs was the fact the brief wants me to use “electric concept cars to promote new technology and sustainability”. With this in mind I had to adapt the steampunk theme so the power they are using inside the game will not be steam any but would be electricity but  keeping clockworks and metals desings for each of the huds and character styles. So I define the theme to be an victorian time but with better technology and electricity. The theme would be called ‘electro punk’.


Overall I think the assignment went well. I have made realistic huds for a sim driving racing game. I have made three teams and a logo for each team to represent them while in race. I have create animations for most of the huds and have represented them. My hud interface dose communicate game information and does support the story/theme for the game. I have shown my research, ideas, designs, development and skills to achieve my final product for this assignment.