The Power of Video Game HUDs

860,046
234
Published 2021-04-29
🔴 Get bonus content by supporting Game Maker’s Toolkit - gamemakerstoolkit.com/support/ 🔴

The heads-up display can change how a game works, feels, looks, and is made. Let's find out how.

=== Before you watch ===

Content warning: Some blood

=== Sources and Resources ===

Sources

[1] How We Made The Last of Us's Interface Work So Well | Kotaku
kotaku.com/how-we-made-the-last-of-uss-interface-w…

[2] How Slay the Spire’s Original Interface Almost Killed the Game | Ars Technica
   • How Slay the Spire’s Original Interfa...  

[3] Specter Knight Mobility Design | Yacht Club Games
yachtclubgames.com/2017/07/specter-knight-mobility…

[4] Building games that can be understood at a glance | Stfj
stfj.net/DesigningForSubwayLegibility/

[5] The Casual (but Regal) Swipe: Creating Game Mechanics in 'Reigns' | GDC Vault
www.gdcvault.com/play/1024278/The-Casual-(but-Rega…

[6] Into the Breach's interface was a nightmare to make and the key to its greatness
www.rockpapershotgun.com/into-the-breach-interface…

[7] Hearthstone: How to Create an Immersive User Interface | GDC Vault
www.gdcvault.com/play/1022036/Hearthstone-How-to-C…

Additional resources

Art Direction for AAA UI | GDC
   • Art Direction for AAA UI  

Immersing a Creative World into a Usable UI | GDC
   • Immersing a Creative World into a Usa...  

Bridging the Gap Between UX Principles and Game Design | GDC
   • Bridging the Gap Between UX Principle...  

Crafting Destruction: The Evolution of the Dead Space User Interface | GDC
   • Crafting Destruction: The Evolution o...  

So You Wanna Make Games?? | Episode 9: User Interface Design | Riot Games
   • So You Wanna Make Games?? | Episode 9...  

Game Design Deep Dive: Dynamic detection in Shadow Tactics | Gamasutra
www.gamasutra.com/view/news/290733/Game_Design_Dee…

The UI and UX of Persona 5 | Ridwan Khan
ridwankhan.com/the-ui-and-ux-of-persona-5-183180eb…

=== Support GMTK ===

Support GMTK on Patreon - www.patreon.com/GameMakersToolkit

Use Creator Tag "GMTOOLKIT" when buying on Epic Game Store

=== Chapters ===

00:00 - Intro
00:53 - What's the HUD for?
04:40 - How much HUD to show
08:36 - Using a diegetic HUD
11:13 - How HUD effects gameplay
14:08 - HUD can influence game design
16:05 - Patreon Credits

=== Games Shown ===

The Last of Us (2013)
Control (2019)
Crackdown 3 (2019)
Metro Exodus (2019)
Overwatch (2016)
Apex Legends (2019)
Call of Duty: Black Ops Cold War (2020)
Borderlands 3 (2019)
The Outer Worlds (2019)
Minecraft (2011)
Assassin's Creed Syndicate (2015)
Cyberpunk 2077 (2020)
Assassin's Creed: Odyssey (2018)
Eagle Island (2019)
Devil May Cry 5 (2019)
DOOM Eternal (2020)
Invisible, Inc. (2015)
Darksiders (2010)
Desperados III (2020)
Fire Emblem: Three Houses (2019)
Batman: Arkham Knight (2015)
Ghostrunner (2020)
Slay the Spire (2019)
Ori and the Will of the Wisps (2020)
A Hat in Time (2017)
Hitman 2 (2018)
Rage 2 (2019)
Homefront (2011)
Titanfall 2 (2016)
Sekiro: Shadows Die Twice (2019)
Star Wars Jedi: Fallen Order (2019)
XCOM 2 (2016)
Mario + Rabbids Kingdom Battle (2017)
Shovel Knight (2014)
Valkyria Chronicles 4 (2018)
Horizon Zero Dawn (2017)
Guacamelee 2 (2018)
God of War (2018)
Just Cause 3 (2015)
Monster Hunter: World (2018)
Resident Evil 7: Biohazard (2017)
Receiver (2012)
Sunset Overdrive (2014)
Battleborn (2016)
Final Fantasy VII Remake (2020)
Hitman 3 (2021)
Hitman (2016)
Tharsis (2016)
SpellTower (2011)
Hearthstone (2014)
Shadow Warrior 2 (2016)
Castlevania (1986)
Castlevania: Lords of Shadow (2010)
Ghost of Tsushima (2020)
Hellblade: Senua's Sacrifice (2017)
Persona 5 (2016)
Inside (2016)
Firewatch (2016)
Dead Space (2008)
Fallout 4 (2015)
Metroid Prime (2002)
Metroid Prime 2: Echoes (2004)
Far Cry 2 (2008)
Alien: Isolation (2014)
Call of Duty: Modern Warfare (2019)
Journey (2012)
Wreckfest (2018)
The Legend of Zelda: Breath of the Wild (2017)
Super Mario Bros. (1985)
The Last of Us Part II (2020)
Loop Hero (2021)
Reigns (2016)
Metal Gear Solid V: The Phantom Pain (2015)
Kingdom Hearts III (2019)
Gears of War 4 (2016)
Halo 5: Guardians (2015)
John Wick Hex (2019)
Mark of the Ninja (2012)
Katana Zero (2019)
Peggle (2007)
Shadow of the Tomb Raider (2018)
Forza Horizon 4 (2018)
Into the Breach (2018)
Immortals Fenyx Rising (2020)
Mirror's Edge (2008)
Room to Grow (2021)

=== Credits ===

Music by…
Music provided by Uppbeat - uppbeat.io/
License codes: PC3D3JQOFKHA7FNZ | 0X6GO4104801KFOE | H6D2IULHUG0BH7F7

Why I Work at Insomniac: Abdul Bezrati | Insomniac Games
   • Why I Work at Insomniac: Abdul Bezrati  

Eyetracking while playing Overwatch | Jon Matthis
   • Eyetracking while playing Overwatch  

=== Subtitles ===

Contribute translated subtitles - amara.org/en/videos/izVGIyScVfOY

All Comments (21)
  • @tomrivlin7278
    Huge respect for setting yourself up for the obvious "Press F to pay respects" joke and then throwing something 10x more insane at us with the "mass grave" prompt.
  • @Dalenthas
    I really like the way Celeste tells you when your boost is available by changing Madeline's hair color. Also, Madeline getting visibly tired and flashing when her wall cling is close to running out. Other HUD elements like Strawberry count are hidden until they change.
  • I will never get over how NieR: Automata took diegetic UI to the next level by having them be chips you put into your robot character. Want more space for more useful chips? Sacrifice some UI! Wonder why that chip says never remove? Go ahead, you'll get a little funny scene!
  • @Gehab
    Outside the small little health bar, Sea of Thieves absolutely nails its UI. Really helps to immerse yourself as a pirate in this cartoony world.
  • I love how he delivers jokes like the mass grave or five shots or six in such a monotone voice, makes it so much funnier
  • It's wild to me that people were cosplaying as the UI from Persona 5. I'm glad you brought that game up as an example because slick, stylish UI can definitely add a lot to a game.
  • @st0rmchild
    One of many reasons I appreciate GMTK: When there's a screen full of code, it's actually game code, not a screenshot from a web dev tutorial (as if the audience won't notice).
  • Halo: Reach has a pretty standard diegetic HUD for the most part, but the way it's used in the last level is amazing. The last level is a hold-out-as-long-as-you-can one that ends with your death, both gameplay-wise and story-wise. As you take more and more damage throughout the level, cracks begin forming on your in-game helmet, obscuring your vision and shorting out elements like the ammo counter. These cracks stay even if you go back to full health. It really creates a sense of dread and desperation and it's one of the only times I've seen the HUD itself tell a story.
  • @j.r.1704
    I think it’s literally been a decade since I’ve heard the phrase, “consider Peggle...”
  • @palinbian1464
    Something I really enjoy about the enemies that use whistles in the Last Of Us Part II, is how when you're playing as Ellie, the subtitles just say **WHISTLE** because Ellie has no idea what they mean. While you are playing as Abby though, it shows in the subtitles as Warning Whistle or Flanking Whistle because Abby has been fighting these people for years and knows their calls.
  • @Shyftus
    13 years later, and Dead Space UI still seems so insanely unique and cool.
  • @BON3SMcCOY
    Republic Commando was always my favorite diagetic UI, with ammo counts on weapons, in-helmet holoimages for squad commands, and a BUG SPLATTER VISOR WIPER
  • @adriantoine
    An interesting case is Nier Automata where HUD elements can be equipped, but that is using up slots that can be used for buff items. You could remove all HUD elements and have all your stats improved but the game is much harder this way, so you need to decide which UI elements are really useful to you.
  • I'd like to note how much Persona 5 was praised for how well it intgrated it's UI elements into the style and feel of the game, and how it became one of it's most praised and memorable feautures. It's one of those things so rarely paid much attention that when Persona 5 did it so well, it became instantly iconic.
  • I will always love how Sparks is your health bar in Spyro and, if you take too much damage, you will no longer pick up gems as easily since your health bar was grabbing them for you when you got close enough. I especially like that in the remaster he will point you in the direction of any remaining gems.
  • @Tr0lliPop
    10:46 I have seen an example of this in the mobile games "alto's oddyssey" and "alto's adventure" both released by the same team. The game is about sliding down endless dunes (or just hills in the latter game) and doing various tricks. The more tricks you do, the more you speed up and you can see this visually by the length of your scarf. This info becomes important when you get the wingsuit upgrade, which lets you glide for a while when you reach full speed, indicated by your scarf being very long and turning from colored to white.
  • @murduerousgub
    Press E to jump in mass grave is the best action prompt I have seen in a while
  • I really like how Splatoon shows your ink with a tank on the back and just has the enemies color ink get more prominent on the edge of the scree when you take damage. You don't need exact numbers for that game so its just works great.
  • @IONProd
    I am really happy that you showed mirror's edge at the end, it's HUD is so interesting because it's 2 main features are diegetic (health and runner's vision), and the way they implement runner's vision not as a direction but an object you need to use is really interesting.
  • @joejoetv1337
    I really like the system that Astroneer uses, where your oxygen and power stats and also your inventory is included in your backpack. Your invantory can also directly interact with the world and players can put stuff in your backpack. It really gives it a sense of integration and makes it feel right.