Picture, if you will, another dimension balanced between game and the real; a dimension of sight and sound, a realm of things and ideas. No, it isn't the Twilight Zone, but the zone known as the HUD.
Named after the heads-up display found in modern aircraft, the HUD is the most effective way of communicating with the player. The HUD refers to any visual element that communicates information to the player. The mini-screens and icons found in a HUD are some of the best tools in a video game designer's bag of tricks. They can communicate information, emotion, even tell the player where to go and what to do. Let's look at some of the HUD elements found on an average game screen:
A staple of action, adventure, platform, and shooter games, the health bar represents how close the player is to death, or having to restart for some other reason. Health bars are the most flexible of the HUD elements and come in a variety of forms and imagery depending on the game:
Many health bars are bars "filled" with color (often red) or icons. As the player takes damage, they lose a percentage of the bar or the color empties from the icon. When the bar is gone, the player dies ...
or vice versa, you can have a damage bar. When this bar is full, the player dies.
The health bar may represent the status of some sort of on-board defense system, as seen in the Metroid games.
Health can be represented as shields. When all of your shields are gone, the last hit destroys the player, as seen in Star Wars: X-Wing (Lucasarts, 1993). Shields can also be represented as a numeric percentage.
Health can be represented as a story device. In Assassin's Creed (EA, 2007), the health bar represents the game's narrative. Stray too far from the "correct story" and the narrator says "that's not the way it happened." Then the character is "reset" back to the proper point in the story.
Just because a player loses health, it doesn't mean they can't get it back. If Halo players find cover and wait, their health bar eventually recharges back to full. This "wait for health" technique is becoming increasingly popular in action games and I think it's a pretty good compromise in lieu of a game over/death screen, which pulls the player out of the game.
Recently, health bars have become replaced by first person style effects which are also used in third person view. In Uncharted 2: Among Thieves (SCEA, 2009), damage is indicated by blood smears or a red blur effect that "point" in the direction of the source of damage. Just don't obscure the player's view so much that they can't see the action.
In Metroid Prime and Batman: Arkham Asylum, if the player is hit by an electrical attack, the screen "fritzes" for a brief moment.
As the player takes damage in the Call of Duty titles as well as Uncharted 2, the screen darkens, accompanied by heavy breathing and a heartbeat sound effect. In Silent Hill the controller's actuator simulates a heartbeat as the player is dying.
A targeting reticule helps players locate and/or lock onto ranged targets. They can vary from as simple as the "dot" of a laser sight to a complex lock-on system that also provides target information such as health and range.
A reticule shouldn't dominate the screen, but don't make it so small that it's hard to see.
I have seen many reticules rendered in white, but this can make them hard to see on some surfaces and backgrounds.
Reticules are commonly activated in a zoomed-in mode, such as a sniper's scope. Some reticules change size to allow for more precise targeting when zoomed in, as seen in Red Faction: Guerrilla (THQ, 2009).
Have the reticule change color or "sharpen focus" when over a target. This gives the player a clue when to fire.
Give your reticule some "stickiness", also known as "aim assist." When aimed at a target, make the reticule gravitate towards it, allowing for faster targeting. This works great for vehicular weapon targeting.
Build in gameplay to your reticule. Team Fortress 2's zoomed-in sniper's reticule also projects a laser pointer spot. Enemy players see this spot and can make efforts to avoid being shot.
Whether your ammunition gauge displays bullets or a simple number, it will be one of the most watched gauges onscreen. As some games sparsely distribute ammo (Resident Evil 2, I'm looking at you!), placing this gauge in an easy to see location is particularly important.
If you have the screen space, display both clips and individual bullets, like in Operation Wolf (Taito, 1987).
If the player has to track multiple types of ammo, such as grenades or rockets, make sure that they can be brought up with a button press (as they are in Ratchet and Clank: Tools of Destruction).
I know this one seems like a no-brainer, but always display the ammo gauge of the weapon currently armed by the player.
Even if your player's weapon has infinite shots, you can still display it to let them know what weapon is armed. (The Metal Slug games do this.)
A staple in adventure and RPGs, inventory allows players to track and manipulate objects collected during the game. Keys, potions, puzzle items, and weapons are common inventory items.
Players need quick access to items like potions and spell components. Hotkey or drag-and-drop systems will help players grab items quickly.
Allow the player a location to see their inventory items in all of their glory. Tomb Raider (Eidos, 1995) shows the items in Lara's backpack on a larger scale for easier inspection.
Diablo has a limited inventory where each item has a specific size. Inventory becomes a bit of a puzzle where the player has to fit as many items as possible into a limited space.
Inventory items can be represented either realistically or as icons. Whichever graphic style you choose, make sure that they have clear silhouettes and use simple color schemes.
If you are going to create a restricted inventory system, allow the player to expand it later in the game. For example, start with a pouch; expand to a backpack and eventually a magic bag of infinite holding.
Make sure the player has another permanent location in the game (like their home base) where they can store their items. No one likes losing what they found or bought.
Why not use a "magic box" like in Resident Evil 2? Whatever items are stored in the box appear in boxes found further in the game. That way the player never has to run back and forth through the game world.
In the beginning, there was scoring.
Can you believe the earliest video games only had single-digit scores (Pong and Computer Space)? It quickly jumped to four (Space Invaders), then six (Galaxian), and by the time the arcade boom started in the early 1980s the high score was king. Entering your three-letter handle into a game's high score table was the sign of true mastery—provided the arcade owner didn't reset the machine and wipe it out!
As the home market grew, high score became less important and stat tracking started to replace it. Text-based combo meters replaced score bars in games like Devil May Cry (Capcom, 2001). However, with the increased popularity of online gaming leaderboards, scoring has returned to live harmoniously alongside combo meters, stats, and achievements.
Scoring indicators can take a variety of forms. They are still most commonly found in arcade-style games and Japanese RPGs like the Final Fantasy series, but scoring is starting to creep into western-developed RPGs like Borderlands[81] (2K Games, 2009).
Whatever form your scoring takes, make sure that when it happens, it's big and flashy. Video game developers are great at making players feel unskilled and stupid, but bad at making them feel good. There's no such thing as overdoing it when congratulating the player. Zack and Wiki: Quest for Barbaros' Treasure (Capcom, 2007) does a great job of making even the worst player feel like the smartest, most skilled player in the world. Every little successful action results in a shower of fireworks, congratulatory text, and happy pirate rabbits flipping through the air! And let me tell you, nothing stokes your ego more than back-flipping bunnies!
Here are a few pointers to make your rewards feel rewarding:
Use voice and sound effects to call attention to whenever a player gets a reward.
Freeze gameplay to allow for the player to savor the moment of reward or have the hero celebrate along with the player with victory animations, sounds, and effects.
You can never have too many particles, especially when celebrating an achievement or awarding a high score.
The player needs to see a clear "cause and effect" for scoring, so they understand how they achieved their score. For example, as the player collects a gold coin in the world, the coin "travels" up to a tally. Don't forget the cool "Las Vegas-style" sound effects. Cha-ching!
Choose an easy to read font. Ornate fonts (like medieval script) with heavy stylization or even serifs can be hard to read. Watch text length as you may run out of screen space!
Fill up as much of the screen as possible with your celebratory effects, but don't interrupt or cover up gameplay.
The first game radar/map was found in Rally-X (Namco, 1980), which allowed players to see the location of power-ups without seeing the game map or enemy cars. Since then, map screens have provided much more detail to players, from outlining the playfield to revealing secret clues.
Make your map large enough to be legible, but not so big it fills up the whole screen; if you must have the map fill up the whole screen, do your player a favor and pause the gameplay.
Make it easy for the player to move/travel and look at the map at the same time. It's too much of a chore to open a map, memorize the locations, and then close the map to return to the game. The smart designers of GTA4 let the players add markers onto the map, which lead the player right to the objective!
Create a legend for your map's icons so the player can easily identify and find checkpoints, doorways, quest items, traversal goals, or story points.
Be sure to indicate changes in elevation on your map if you have them in your game world. It's too easy for players to get confused when dealing with levels with multiple elevations. Use a color code or an "onion-skin" effect to show what layer the player is currently on.
Show the player's direction using an arrow or some other icon. This way the player will know if they have to reorientate themselves in relationship to goals.
The fog of war is when a map is obscured until the player actually "clears the fog" from an area by moving through it. You can always give your players ways to expose the whole map. Avoid refogging areas as the player will get confused and turned around on the very thing that is supposed to help them navigate.
Add other information to your map to aid the player. Batman: Arkham Asylum provides a distance-to-goal counter while the Metal Gear series shows the "detection cone" of enemy guards. Harry Potter and the Order of the Phoenix (EA, 2007) displays the names of NPCs on the "Marauder's Map."
Incorporate visual themes into your mini-map. Fantasy maps look good on parchment, use a high-tech holographic display for a sci-fi game, and so on. Even the map can add to the game's gestalt.
The context-sensitive prompt is an icon or text that appears when the player is next to an object or character with which it interacts. The most common context-sensitive prompt displays the icon of the button or control that the player has to use to have the event happen. For example, in Grand Theft Auto 3, an icon of the "Y" button appears whenever the player stands next to a car they can hijack.
In Maximo: Ghosts to Glory, we created a variation of context prompts called "plings": emoticons that told the player when they couldn't do an action as well as when they could. Need ideas for when to use these guys? Here's a short list of suggested uses for context prompts:
Doors, gates, and/or hatches.
Mechanics such as cranks, levers, and pushable objects.
NPCs: not only for talking anymore, you can use plings and emoticons to show their emotional state. Catch them in a good mood and you'll get a better response/reward than if they're angry, scared, or sad.
Items and weapons that can be collected by the player.
Use of vehicle or minigame. There are numerous games that allow the player to man a machine gun turret during the middle of regular gameplay.
Jump locations: The Legend of Zelda games do this.
Quick time event prompts, as seen in the God of War series: a preset sequence of events that progress if you press the right button (see the quick time event section further on in this chapter).
Combat notification: icons that show when an enemy is vulnerable to a certain type of attack.
Secret treasure items: have your icon appear when the player is close to a hidden item.
In addition, there are HUD elements that are self-explanatory, like fuel gauges, speedometers, and countdown timers. Just like the others mentioned above, keeping it clear, clean, and simple is the winning formula for making a successful HUD system.
Ah reality. It's a double-edged sword. You want your game to look like a ... dare I say ... cinematic experience ... but you still need to communicate gameplay and controls to your player. What to do, what to do?
Well, the first step in keeping your screen clear is to make your HUD elements move or fade off screen while they are inactive. Of course, they need to reappear whenever they are valid (such as when the player is taking damage or collecting treasure) and always make sure that the player has a quick and easy way to bring them back up if they need to know the information. A simple shoulder button press usually does the trick.
Some games strive to remove HUD elements altogether. Peter Jackson's King Kong: The Official Game of the Movie (Ubisoft, 2005) utilized a few prompts at the beginning of the game, but mostly conveyed game information via sound, animation, and visual effects. The result made for a very cinematic and immersive experience. If you want to go this route, here are some suggestions:
Have characters react to things in the world to indicate function or interaction. Have them look at collectable items, reach for places they can get to, comment on things in the world that they are supposed to interact with, and so on.
Opt for full-screen-sized effects over smaller or subtle ones. It never hurts to overemphasize. Use whatever you can to get your point across—sound, voice, visual effects, color, and lighting.
Use glows or other attention-drawing effects on items to make them stand out. Or use what I call the "Scooby Doo effect[82]."
Use cinematic characters to lead your players through the world. If you don't want to do that much work, have a big ol' glowey arrow or path markers show te way.
If video game interfaces were a galaxy of planets and on one side of the galaxy was the planet "No Interface" then all the way on the other side of the galaxy would be the planet "Gobs of Interface." I might add that both of these are very dumb names for planets, I mean what do the inhabitants of these planets call themselves? "No Interfacians?" or "Goblings?" But I digress ... This is where the RPGs, RTSs, simulations, adventure games, and some slumming shooters all live. Hello there friendly life forms of planet Gobs of Interface; let's examine your interesting markings and plumage.
The first thing you'll notice on many RTS and adventure games is that there are a lot of icons on screen. Icons for tracking stats; icons for weapons; icons for magic spells; icons for the contents of bags of holding and whatnot. I believe part of the allure of these icon-heavy games is that the player makes lots of choices, has lots of things to build and collect. That's OK—not every game needs to be like one made by Oscar winner Peter Jackson[84].
So as you are making icons for your game, here are 157[85] things to think about.
Pick the right image for your icon. If pressing your icon builds tanks, then guess what picture should be on the icon[86]?
Make sure the image that you use is current and accurate. I was working with a team who had an icon for a stamp function (like an ink stamp) that looked like a postage stamp. Many of the younger testers didn't even know what a postage stamp was!
Color-code your icons. Fiery punch? Make it red! (Or at least orange.) Chilling hand of frost? I'll give you one guess (blue). You can take color coding one step further and make the image or background of the icon a representative color. For example, all the icons that advance the player to the next screen could be green, and your sword combat icons could all have a red background or feature that color in the artwork (make sure it's a different shade of red than the one you are using for fire attacks!). The goal is for the player to understand similarities between icons and be able to choose the correct one at a glance.
If color isn't enough, then use shapes as a differentiator.
Try and avoid text in your icons. Not only will you have to change them for localization, but they may be too small to read.
If you are going to use text (like a word) as an icon, make sure it is legible and looks more like a button than straight text.
Never, ever combine several visual elements (like text and a character and a logo) on one icon.
Surround your icon with a strong black or white outline to make them "pop" off the background.
Look at all of your icons together to make sure you aren't creating any similar-looking ones. Try to make each of them as individual as possible.
A good trick is to have text of an item's name (spell or whatever) appear if the player moves their cursor over the icon. A reminder from time to time never hurts!
Don't leave creating icons to the programmers. They only care about the functionality, not the design or the art.
Learn from the experts. Apple, Adobe, and Microsoft have dedicated icon artists that create clear and clever icons for their software and operating systems. You can find great graphic design books and font sets that incorporate icons. Games that use lots of icons like RTSs and sims are great sources of inspiration. When we were making Maximo's ability icons we were inspired by the designs on Boy Scout merit badges. Icons can be found everywhere, don't feel you have to reinvent the wheel.
When the player selects the icon make it do SOMETHING. Change color, make a clicky sound effect—anything to register user interaction. I would avoid using a voice effect though, as no one wants to hear "Good choice, commander!" every time they press a button. If you need voice, then only repeat it once every three or so clicks. And make sure to record a few extra voice cues to avoid repetition. So, to make this clearer[87], think of it this way: click no. 1, "Yes sir!"; click no. 2, "Right away!"; click no. 3, "I'm on it!"; click no. 4, "Yes sir!"; click no. 5, "Right away! ... you get the idea.
The most important button on the interface should be the biggest. This goes for the most-used button as well.
Make the most-used buttons easy to reach from the middle of the screen or wherever the player's cursor will spend the most time.
Make your icons a little "sticky" so the cursor will easily gravitate towards the buttons.
Ultimately, the rule of thumb when creating icons is:
KYSS = KEEP YOUR SYMBOLS SIMPLE[88]
Today's audiences are very familiar with icons, from comics and cartoons[89] to the desktop of their computer, so take advantage of it! Over the years, video games have developed their own vocabulary of icons. Here are a few classic examples:
Red cross: used to designate healing items[90].
1 Up: universal video game-ese for an extra life. Also the head or little "doll" version of the character works well for this.
Heart: can be used as a replacement for red cross or 1 up.
Food/soda can/pills: energy or healing. As in "Elf needs food badly[91]."
Exclamation point: put one above enemies' heads to show surprise. Put it above your hero's head to show they can interact with something.
"No" symbol: which means that the player cannot use or does not need this. Also used for busting ghosts.
Skull: poison, death, danger. And sometimes pirates.
Coin: money, gelt, dough-rey-mi. Howabout a nice big sack o' cash lusted after by bank robbers?
Controller icons: used as a shorthand to prompt the player to press the specific control for a specific action. You find these a lot in quick time events, which we'll come to next. And here we are!
Quick, press the button!
Now press it again. Too late! You died. Congratulations. You have just lost the first book-based quick time event.
A quick time event, or QTE, is a prompt that forces the player to make a split-second action or suffer usually painful or fatal consequences.
Dragon's Lair (Cinematronics, 1983) first featured QTE gameplay—hell, the entire game is a quick time event—but after a brief spurt of similar arcade games (Cliffhanger, Space Ace, Thayer's Quest) QTEs almost went the way of the text adventure. Shenmue (Sega, 1999) brought them back and christened them QTEs at the same time. They've become a gameplay staple since Resident Evil 4 and God of War made them popular.
Players either love or hate QTEs, but they are here to stay. There's no need to hate them though; they're just one more gameplay tool in a designer's tool kit. The trick is to use them responsibly:
Never use a QTE for something the player can do for themselves in the game. I prefer to use them as shortcuts to cinematic sequences. Save QTEs for big exciting moments and nigh-impossible actions.
Timing is everything. Give the player a "beat" to process the appearance of a QTE icon and another "beat" to press the appropriate button.
Don't string them out for too long; as most QTEs need to be repeated if the player fails the sequence, there is nothing worse than having to repeat the QTE over and over and over again.
There's something worse than repeating a QTE, and that's a QTE that doesn't play fair. While random QTE icons sound like a good way to introduce variety, this is the one time you want predictability in your game. Once the player memorizes the pattern, they can concentrate on watching the cool actions. Now I know what you are saying. "Wait a second! There are video games with random QTEs in them." And I'd say "You are correct." However, I just don't like them. They make the player feel like they won because they were lucky, not by their own skill.
Keep your QTE controls to a single set of controls. Most games use the buttons or sometimes a stick. Try not to use the harder-to-reach shoulder buttons.
Make sure the QTE icons are big and easy to see. Keep their placement consistent: don't move them around.
Try not making the QTE mandatory. Both Uncharted 2 and Batman: Arkham Asylum offer QTEs as options for dispatching enemies, however, if the player misses that opportunity they still have plenty of other ways to take the bad guys out.
When using motion-controlled QTEs, keep the waggling short. And if you are going to make them waggle the controller, don't do it too many times in a row. Gamers want to play your game, not get wrist injuries.
Now that you have created a whole mess of beautiful icons, what are you going to do with 'em? Why slap 'em up onto the screen, of course! But before you are going to display them willy-nilly, let's see where they can go. Our zombie friend is going to help us out with this one.
This part of the screen is sometimes known as the "safe frame" because screen objects almost never get obscured out here in the middle. Since the middle of the screen is where the action is, please refrain from putting your HUD there. (Unless it's for targeting, a reticule, or id'ing game objects.) If you have to bring up a full-screen display, consider making it translucent like the holographic screen in Dead Space (EA, 2008). This way, the player doesn't get disjointed from their environment and "lose their place" in the game world.
The upper left side of the screen is traditionally used for the most important information: health, score, and so on. As the (westerner's[92]) eye travels from left to right when reading information, putting icons to the left so the eye can travel back "into" the game on the right usually feels pretty good to the player.
Displaying icons along the bottom of the screen works well too, as long as you watch out for clipping that can occur if a player is using a monitor or TV screen that isn't calibrated for your game. Assume at least 50% of your audience has a crappy television set; heck, even gamers with excellent HD LCD rear projection sets still can get clipped images on the sides of their screen. Get that information as close to the safe frame as possible (and always offer screen calibration options).
If you are going to use the right, left, and bottom of the screen, be careful of the "bracketing effect" that happens—this will make your game screen seem smaller and claustrophobic. I've seen some RTS screens so filled with HUD elements, it felt like I was looking out of a mail slot!
If you are going to have lots of icons on screen, why not consider letting the player choose which ones they want and prioritize where they should go. This way, the player can choose what they feel are the most important icons for them. Just make sure you don't give them the option to obstruct the main gameplay field.
Some icons open up other screens, like inventory lists. Make sure the player has a quick way to get back to the game. You may want to consider allowing the player to pause the game so he/she doesn't get bushwhacked by an enemy while they are trying to find their +6 rod of killing. Of course, you could be like the designers of Dead Space and intentionally allow enemies to attack while your character is rooting around in their holographic space backpack for another air canister. According to interviews with the team, this was an intentional choice: they wanted the player to not be able to rely on the "gamey" mechanic of the world freezing (as happens in, say, Resident Evil) while looking for inventory items. It really conveys the sense of dread as necromorphs are bearing down on you when you realize that you just don't have time for a break.
When you are dealing with interface, there is one very important rule I never, ever try to break. Pencils out?
Why? Because the player doesn't want to spend the entire game pressing buttons to reach interface and inventory screens! They want to play the game! Let them play the game! Why aren't you letting them play the game? Think of the children! Oh, the humanity!
Sorry. Lost it there for a moment.
Seriously, don't make the players dig to find the options and get to the gameplay. Make everything in the game reachable within a button press or two. Consolidate screens if you have to. On one game I worked on, it took 16 button presses just to reach the game play. After some thought and re-conjiggering, we managed to get it down to four button presses. Not too shabby if I do say so myself.
Oh, video game screens. There are so many of you. Where to start? With a list of course!
Title/start screen. The first thing your player sees (other than the box cover[93]), so it's important to set the right mood. The problem is, there are so many styles to choose from! Let's see:
The "movie poster" title screen that mirrors the cover of the box.
The "heroic pose" title screen where the hero is standing on some high bluff, long hair blowing in the breeze, giant sword and/or gun at the ready ...
Why am I in a jungle? What is that monkey statue doing there? Is it a relic I will be raiding? These are all questions brought up by the "enigmatic image." The image is something important to the game, but the player has no idea because they haven't played the game yet. When they finally learn the significance, their minds will be blown!
The "logo" screen, where a large image of the game's logo is displayed. Not very exciting, but effective. Make it more exciting with strobing colors, rotating effects, bouncing text, anything to get some motion in there.
Title screens often feature menus that offer selections such as save/load, number of players, options, bonus features, and difficulty. It all depends on how many button presses you want the player to make before they get into the meat of the game; however, I find that players just want to get to the good stuff so keep the button pressing to a minimum (no more than three screens "deep" right?, not counting your front-end logos and legal). And remember, you can always put many of the start/title screen functions on your pause screen.
Pause. The well-designed pause screen can do more than give the player a break. It can be used to save a game, access the options screen, game map or inventory screen, or even exist to be enjoyed as with Banjo-Kazooie's (Nintendo, 1998) lovely acoustic version of the theme. Whatever you do, just make sure that the player doesn't feel like they are missing any of the game by pausing. Remember, most people use pause screens to take bathroom breaks. Of course, you can always skip the pause screen altogether like in Dead Space, but God knows when you'd get a chance to take a whizz.
When designers create pause screens, they have this bad habit of making the first choice "resume" and the next one down something like "options." Usually the map and save game is a few more choices down. This makes no sense to me. Let's say you use the start button to bring up the pause screen. Think of all the times you are going to have to press the start button, then d-pad down the list to the "save game" selection, and then save the game and then return back up to the resume button? Why not use the start button to close it again? Why do you even need the resume option? If the save button is the most common selection the player will be making, then make it the first thing they can select. If it isn't, make it the map or the inventory. Plan your pause screen out as carefully as you do your level! Your players will thank you for it.
Wow. Look at that graphic below. Those are all the options that can stem from a pause screen.
Options. Like the ancient labyrinth, the option screen usually leads to more screens. But don't lose your player in a maze of choices. Think of the option screen as a hub, with the choices the spokes that radiate from it. Sound and music volume controls, controller settings, difficulty settings, and even bonus and cheat codes can be placed under the options heading.
Calibration tool. If your game is particularly moody and dark in theme and visuals, then I suggest having a screen calibration tool. A calibration tool allows the player to adjust the screen's contrast on a dark-colored image or set of color bars. While it's fine for this to live in the options screen, I prefer to have the player adjust it before starting the game, to see the game in the best light ... er darkness possible.
Save/load game. One of the most important aspects of your game, keep it simple and automate the process whenever possible. Always start a new game with creating a new save file. Don't make the player hunt around for this and make sure they quickly pick up on where it is—even in the tutorial if possible.
I highly recommend allowing for several (at least three) save files. Players often restart new games after completion, want back-up files in case they make catastrophic choices during gameplay, or even just to let someone else concurrently play the game.
Customization goes a long way when creating a save file. Let the player name their own files. Store playtime, titles of game levels or chapters, and even inventory items like lives or gear to help the player remember their progress. Show icons or images to help jog the player's memory further. Everything helps.
Autosave is a useful function that acts as a backup if players are too engrossed in playing. Give the player the option to load a game from a saved file or the autosave. You can always give the player the option to turn autosave off, though I'll be damned why you'd want to.
Be careful when designing the save system that it doesn't become a "reset system." There have been many games where it is easier and faster for the player to reload a game than to die and start again. Don't let the player use the save system as a gameplay mechanic, as it breaks the immersion of the play experience.
Loading screen. Many players consider loading screens as a necessary annoyance, but that's just because developers fail to treat them as part of the game. More recent games strive for a "seamless" loading-screen-free experience by disguising the loading screen with slowly opening doors, long elevator rides, or dissipating fog. If you must have loading screens, here are a dozen ways to spruce them up:
Show concept art
Ask trivia questions
Have a playable minigame[94]
Display the game map
Display a character bio
Provide tips on gameplay or control (though be careful not to repeat these—even the most useful tip becomes annoying after several viewings, so don't display control tips that the player has already seen)
Fill in gaps in the game story
Play a short video briefing the player on the upcoming mission or location
Have the player fight endless waves of enemies or destroy a large object
Provide "beauty shots" of your character or items in the game
Have the player manipulate an interactive object like the game's logo or an item.
Hardware manufacturers require that there be some moving image on a loading screen so the player knows that the game hasn't crashed. No matter what your loading screen displays, you should provide a progress bar or percentage loaded indicator so the player knows how long they have to wait.
Controls. When showing the control screen, first and foremost, you need to display an image of the game controller as shown in the above image.
Some games show the character that performs an action when you press the appropriate button. At the very least, display text explaining the control.
Make sure this screen is easily accessible from the game for quick player reference. Also, consider allowing the player to customize the controls or at least give them several options to remap controls schemes.
Scoring/stats. Otherwise known as a "Tally Screen", this screen appears at the end of a level. It displays the player's progress and performance in the game. You can tally just about anything on a tally screen. Here are just a few:
Score
Time of completion
Accuracy of shooting
Enemies slain
Money remaining/collected/spent
Number of lives
Rating (can be an A, B, C grade or a "word" rating, like "Awesome dude" or "Master of the Universe")
Objectives reached/completed
Secrets found (usually expressed as a X/Y value)
Gallons of blood spilled/distance travelled/chests smashed ... you get the idea.
Legal/copyright. These screens are required by publishers and hardware manufacturers. Make sure that they are legible and more importantly, accurate. And for Thor's sake, make them skippable.
Credits. Allow me to pull out my soapbox for a moment. People work very hard on games. Too many people in the video game industry get screwed out of the credit they deserve due to egos, politics, and old-fashioned neglect. I am a firm believer that if you work on a game, you should get a credit. That credit should be what is on the person's business card. Sadly, it doesn't always happen that way: it's something in the gaming industry that needs to change.
Regardless, credit screens are an important part of the game. They are a celebration of the people who made and contributed to the final game. They deserve to be seen, but they should be as entertaining as possible. Some games get it—LittleBigPlanet for example has an amazingly entertaining credit sequence. Typing of the Dead (Sega, 2000) has a playable minigame where the player can type the credits! It's simple:
If you want to find more inspiration for great looking screens, take a look at most movie DVDs. DVD designers do a great job at creating a gestalt[95] built around the film. This level of attention to detail takes a lot of time and effort on behalf of the art director and designers, but it's always worth it[96].
There are other screens that fall under this category as well, such as the game over, bonus materials, and store screens. Don't worry; I'll be covering these screens in greater depth later in the book.
As you make HUD and display screens, you are going to need to think about fonts. I find that fonts follow many of the same rules as icons when it comes to legibility and clarity. However, they do present some of their own issues:
Theme your font to your game, but don't use overly ornate fonts that are hard to read.
Be mindful of the color of your font and your background. For example, never place red text over a black background, as it usually blurs on many TVs, particularly older ones or ones where the console is hooked up on composite cables.
With the rise of HDTVs, developers can display higher resolution fonts. However, I have found that any font size under 18 point is very hard to read on a standard definition television. Remember that not every player has a state-of-the-art screen[97]!
Remember, the goal of all of these screens is to communicate clearly and efficiently to the player. Now let's move on to the good stuff: the game itself! But first, the obligatory Universal Truths and Clever ideas section ...
Level 8's Universal Truths and Clever Ideas:
The HUD communicates game concepts to the player.
The player should be able to access the HUD information quickly.
Keep HUD elements away from the sides of the screen and closer to the safe frame.
Design easy-to-see and read icons.
Make QTEs fair and easy to perform.
You should never have to press a button more than three times to reach anything in the game.
Don't make the player dig through screens for important information.
Fonts should be easy to read: don't make them too small or too fancy.
Even the most "boring" screens can be exciting and interesting.
Give credit where credit is due.
[81] Borderlands' developers call it a RPS—a role-playing shooter—but would that qualify as picking nits?
[82] The "Scooby Doo effect" is named after a by-product seen in Hanna Barbara cartoons of the late 1960s and 1970s. While the background image of the cartoon is beautifully painted, the animated elements (such as a character or prop) are more flatly colored (usually lacking shading), making them unintentionally stand out against the more detailed background.
[83] Yeah I know, that was a really really bad pun. Sorry.
[84] In 2004 for The Lord of the Rings: Return of the King. He did that HUD-less King Kong game too. Weren't you paying attention?
[85] Give or take 150 or so.
[86] I can't believe you are actually looking down here for an answer!
[87] Or possibly to make this understandable at all.
[88] That's Your with an "I".
[89] Icons in comics and cartoons? Sure! From stars and tweeting birds over Daffy Duck's head to Pow! bursts when Batman throws a punch, to scratchy marks over Charlie Brown's head to show that he's mad to those swirly circular "rootbeer-ootles" coming out of Opus the penguin to show that he's tanked on A & W, you can find icons all over comics and cartoons.
[90] The Canadian Red Cross has contacted game developers about using the red-colored cross image in "violent video games." The organization interprets the use of the image as a misuse of their trademark. The video game industry as a whole has not officially addressed their complaint.
[91] I wonder what game has "Elf needs pills badly"?
[92] While many Asian and Middle Eastern languages read right to left, I can't think of a single video game that displays information on the screen in this way.
[93] OK, technically, the player also sees a warning screen, a publisher logo, a developer logo, and the logos of the companies of any technologies leased by the development team, but starting with those wouldn't make for a very exciting list, would it? Stop making me get ahead of myself!
[94] Unless you work for Namco, you may want to avoid this one as they own the US patent (#5,718,632).
[95] Die Gestalt is the German word for "whole." In the context of games, it applies to the overall feel of an experience.
[96] Some excellent examples of gestalt in games include Twisted Metal Black (SCEA, 2001), Brütal Legend (EA, 2009), and House of the Dead: Overkill (Sega, 2009).
[97] The text displayed in Dead Rising (Capcom, 2006) was so small that players couldn't read mission objectives—rendering the game unplayable to those with standard definition sets.