Harry Potter HUD and GUI
The brief for this project was to create a HUD and GUI for a fictional Harry Potter game. The game would represent the new Harry Potter film; the Deathly Hallows and would be in the genre of a first person shooter.
This brief also required that there be some level of interaction within the final menu system as well as possibly showing in-game footage with the HUD in place. This posed a series of questions about how best to implement the requirements for the project, the first being what medium would best be suited to show the HUD as well as how to show first person footage from a fictional game.
As regarding the issue of the footage I decided that the best way would be to access footage of the film itself and edit together a small sequence of first person shots. Having access to all but the latest Harry Potter film I examined them all until I found suitable footage. However this footage was only available from the first film, Harry Potter and the Philosophers Stone. As the brief required it to be about the latest film The Deathly Hallows I was concerned that this would be an issue, however as the footage was of good enough quality and showed a variety of actions that could be used to demonstrate various aspects of the HUD, I decided to use it.
The next issue was the level of interactivity that was required from the final concept. Having looked at the footage I saw that there was several moments in it that I could use where interaction from the player could be used to progress the footage forward. For example there is a moment where Harry opens a door so I decided I would try to make it possible where it requires a mouse click or a button press from the player to have Harry open the door and for the footage to continue.
Even though this was my initial aim I was unsure as how to do that to the footage so I decided that whilst attempting to do it I would also add extra layers of interactivity into the menu system in case I was unable to get the footage to work. This extra layer of interactivity was to be in the form of the games Menu System. The menu system would be assembled in Flash and would show the Game Start and Options menu that are viewed at the beginning of almost every video game.
This menu system would be designed in line with the setting of the new Deathly Hallows film and would therefore be dark and creepy but whilst also tying into the overarching Harry Potter theme’s through the use of Font and Sound.
Realising the importance of the menu’s GUI, I did research into what aspects make a good GUI as well as what makes a bad one. I began by first looking through the menu systems of various games i both own and have played to get a feel for what aspects are common throughout and which ones had elements that stood out whether they be good or bad. I also read several articles regarding both video game GUI design on Gamasutra and general GUI design on http://www.classicsys.com.
I found through my research that regardless of the user group, the best menu systems were simple to navigate, functional but also displayed a connection to the game itself. An example of this is the Splinter Cell Conviction menu system.
The menu for this game is clear and easy to read with each menu option being clear in its purpose as well as keeping the necessary information to a minimum. This is accomplished through the use of an easy to read font and simple words and sentences. The menus background though is dynamic and very visual but doesn’t interfere with the legibility of the menu options. The background is also in keeping with the theme of the game and serves a purpose by engaging with the user and creating a sense of excitement.
The video game Colin McCrae’s DIRT 2 takes this sense of engagement with the user and expands upon it by making the menu system a physically interactive element. It does this by making each section of the menu a different location within your characters environment and when you choose a different menu option the camera moves around a 3D area to where that menu option is located. This level of interaction is very impressive and is keeping in both with user group the game is marketed towards and with the subject matter it represents, however the menu system is confusing and the 3D environment aspect removes the ability for the user to quickly move from one menu to another.
After looking at these various game menus I decided that my own should be simple to navigate with clear understandable phrases whilst also having a design element in it that connects it to the Harry Potter franchise as well as making it dynamic and pleasing to interact with. With this game being both a Harry Potter game and a first person shooter, the age range for it would be from young children up to early teens and with this in mind I looked at also making sure the menu was age appropriate with no gore or rapidly flashing images but also not too clean and childish.
The first task in creating the menu system was to map out the different menus and the sub menus that would branch out from them. It was also important at this stage to visualise where about the menus would go on the screen. This stage of the design was influenced by the idea that I wanted to have a dynamic element in the background that would take up most of the background area with the menu buttons layered over it.
To do this I used simple sketches to map out different menu layouts as well as the menu paths themselves. This allowed me to see what screens and elements I would need to create for the final concept (see Research Log)
After deciding upon a menu layout I then proceeded to design a background element for my menu structure. I researched the new Harry Potter film and found that there is a design element that runs throughout the last book, this element is the symbol for the Deathly Hallows, a triangle with a circle and a line running through it. Finding that the symbol is a collection of simple geometric shapes I looked at creating and animating the symbol in 3DS Max with the help of fellow student Danny Mitchell. With his guidance I quickly created the symbol and after adding both texture and lighting to it I added a simple animated loop of it rotating.
This element combined with the music from the film forged the background images to which I added my menu system. The font for the menu systems text was important as it needed to be in keeping with the rest of the menus theme so the lettering need to be dark but also legible. I did this for the main menu by using a Harry Potter font and then various elements in Photoshop to get the embossing, shading, colour and texture of the letters correct. After showing this to fellow classmates I was offered some suggestions on how to improve the start menu by adding a moving background element in addition to the Deathly Hallows symbol. After this peer review I added a moving cloud element to the background which added some more depth to the menu.
For the other text elements I used a different font but repeated the design elements to it so that the letters were shaded, coloured and texture the same. The use of a difference font was that I felt the original Harry Potter font would look far too busy and disrupt the menu system.
After developing the Flash menu I returned to the footage that I had edited together and looked at the HUD elements for it. I felt that with the game being a big film license it would want to keep the immersive experience of the movie within the game; this would mean a stripped down HUD with very few elements. However because this was also a FPS it might require certain staples of that genre such as an ammo counter, health meter and mini map.
After examining other shooters such as King Kong, Call of Cthulu and Metro 2033, I found that these games use little or no HUD’s at all in an attempt to keep the game immersive. Therefore for the Harry Potter game I decided that the minimum of on screen icons and symbols would work better than if there was an overabundance of HUD elements ala Modern Warfare2.
The elements of the HUD however that needed to be addressed were representations for the players’ health, ammunition/number of spells, location and direction of objectives and a danger or warning meter. I also felt that in keeping with many current FPS’s that the game would make use of a Quick Time Event system similar to that first implemented in Sega’s Shenmue.
I decided that the player’s health and the player’s danger or warning meter would best be represented by use of colour instead of a physical graphic. When the player is injured or near death the screen would start to darken until the screen would go completely dark when the player was knocked unconscious. If the player avoided more damage, then the screen would brighten again as the health is regenerated. I chose this method as it isn’t as graphic as the commonly used blood splatter and the health being represented as a numerical value didn’t seem to fit with the rest of the concept. As for the Danger/Warning sign I decided that the screen pulsing a bright red to dark red at the edge served to warn the player of impending danger or attack. With red being a common signifier for danger I felt that this would serve well to alert the player be careful.
As for the ammunition counter, with most FPSs it is an important element as it tells you how much ammo your gun currently holds, however with this game the player does not use a gun but rather a wand. There is no ammunition for the wands in this game therefore there is no need for an ammo counter. I instead looked at how the wand could be affected by firing spells so that there is an element of risk for the player. If there was no risk in shooting then the player could simply fire repeatedly without fear of running out of ammunition.
I decided then that the best way would be for each spell to have a cool down period after being fired with each spells cool down being longer or shorter depending on its strength. This cool down would stop the spell from being fired again immediately.
With this gameplay element developed it allowed me to add a HUD element to represent the action of a spells cool down. After doing some preliminary sketches I decided that a coloured ring of smoke or magic spinning around the wand until it disappeared would work well to show the cool down timer. Each spell would have a different colour as well as a different time period until it ended.
The map for the HUD would again need to be functional for the player but at the same time not intrusive and distracting from the immersive experience. After looking at several games such as Call of Cthulu and Alone in the Dark I decided that making the map a separate screen that the player physically takes out and looks at would make the map easy to look at while also adding an extra level of immersion to the player.
The map that the player would take out would be the Marauders Map, a prop and magical device from the films that allows the user to see a real time map of Hogwarts and the village of Hogsmead. The map, when shown, would be taken out by the player with both hands so that the first person perspective of the game is not broken.
I am pleased with the final results I have produced as I think they show a good proof of concept and illustrate my initial ideas well. I think that my HUD ideas give the game a sense of immersion in keeping with the films and that none of the elements break from the theme of the films. I have also enjoyed the peer review process as it made it possible for me to add changes to my GUI that I would not have previously thought of. I would like to have made fully animated the map so that it shown better but my lack of animating knowledge is an area I need to address in the future. I still feel however that the short clip of the menu serves the purpose of demonstrating the concept of the mechanic.
