Designing for the User

Thursday, 5 May 2011

Meg and Mog Final Menu

Here is a link to both my final menus

http://newmedia.artdesignhull.ac.uk/dfu/HarryPotterMattHeaney.swf

http://newmedia.artdesignhull.ac.uk/dfu/megandmogMattHeaney.swf

Meg and Mog Assets

Here I have compiled into tables the assets for my HUD and an explanation of them.

Wednesday, 4 May 2011

The brief for this project was to create a HUD and GUI for a fictional 3d adventure game based upon the Meg and Mog childrens book, Meg on the Moon. The game is intended for young children in the same age group that the books are written for.

This brief also required that there be some level of interaction within the final menu system as well as possible 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 the 3d environment the game required.

The first step was to research the genre of childrens games and to see what elements I would use in my creation of a HUD and GUI (see research Log).

The information that I gathered from my research was that in the design for a childrens game there needs to be a common style that is reflected in all aspects of the game. This means that the menus and the on screen assets need to all have the same look and feel so that none of them stand out as different to each other. I also felt that with the Meg and Mog books having their own unique art design, that the menus and on screen assets should match that design sensibility as close as possible. It would have been possible to redesign the characters and art from the books completely but I felt that as the game was aimed at children who would be fans of the books that this would be a redundant task.

I also gathered from my research that the design elements for a childrens game need to be based on a graphical element as often as possible instead of text. This makes the game accessible to an audience where the level of literacy cannot be assumed.

My first task after completing the research was to look at creating the 3d environment for the game. I considered creating the environment in a number of programmes, such as the Unreal Editor, UDK and 3Ds Max 2011 but having little experience in these programmes I felt that I should seek and alternative which i found in the 3D game engine Unity. After finding a suitable engine, I used the Meg on the Moon source material to find a setting that I could recreate with the same visual flair that is found in the book. I decided to recreate the surface of the moon as the book uses some very striking visuals that I thought would look good replicated in 3D and would also making an interesting game level.

After several experiments I eventually created a version of the moon’s surface in the Unity engine that I was happy with. This bright yellow surface featured a large amount of creators, each with an orange interior, and a purple sky. This terrain piece, I felt matched the aesthetic of the source material whilst also giving a solid environment in which to stage a childrens adventure game.

After creating the terrain that I would set my HUD against I looked at creating an interactive menu system that would be at the start of the game. After my experience in creating a similar menu for my Harry Potter GUI, I decided to use the same methods by using Flash to create a series of menus that the user could navigate freely around. My research had shown that the best types of menu interfaces are those that combine a pleasing aesthetic value with an ease of use and understanding. I chose to use material from the books themselves as the art work for the menus and used a text that was both colourful and cartoonish for the menu buttons. I felt that this choice made the menus easy to read whilst also staying in line with the Meg and Mog artwork. I also made sure that the menus were as short as possible so that they were not confusing to young audiences.

The next part of the design process was to create the HUD elements themselves so that I could place them into my Unity level. I began this process by deciding what assets the game would require there to be. With it being a childrens game, the HUD would be required to need very little explanation as well as showing all aspects important to the game. As this game was fictional with no set gameplay I decided that before I created my list of what assets the HUD would need, I would also create the gameplay elements that would need a place on the HUD.

I decided upon a simple collection mechanic where the player has to collect stars and also mechanical parts for Meg’s ship. These mechanics would require the HUD to have graphics to represent the Stars and Ship parts that the player has to collect and also counters on screen so that the player can see how many of each that has been collected. The Star counter would feature a single counter that increases by one number every time a Star is collected, and the Ship parts counter would feature a counter that showed how many parts had been collected out of a set total.

In addition to these counters I also felt the game would require the following;

· A health bar

· An icon to represent the number of lives

· An icon to show what character the player was playing (Meg or Mog)

· A map icon pointing to the objective

· An icon to represent a health pack

After deciding upon what icons I would need I then sketched out my ideas on paper first so that I could get a sense of what would work and what wouldn’t.

After these preliminary sketches I then recreated my chosen designs in Photoshop. My final designs were based upon the original artwork of the Meg and Mog books using the characters themselves where possible. I chose to use the artwork for Meg and Mogs heads as the in-game portraits and to also use the character of Owl as the games objective indicator (mini-map). The icons for the ship parts and the in game health packs were also inspired by the original art work, with the ship parts looking like minature versions of Megs ship and the health packs look like a stylized version of Meg’s witches cauldron. I included the mechanic of a health pack and a health bar as I felt that while there is a trend for the use of regenerating health in a lot of modern video games, the use of a health bar suits the age range the game is designed for as it gives the player an accurate representation of their health as well as introducing new young gamers to the concepts of risk and failure in video games. I also chose to represent the players number of lives with different icons for each character; a hat for meg and a cat’s paw for Mog.

To present the final images I chose to show each item individually and then a mocked up screenshot with the HUD in place and the in the in-game assets present.

I am happy with the final results as they show a game HUD that has the relevant information without being too cluttered. The assets I have created are all of the same design style so that none of them clash with another and they are also clearly visable on such a colourful background. This is an important element when considering the age group this game is aimed at.

Harry Potter Project Review

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.

HUD and GUI Research Log

I have included here a list of links and screenshots that i used as reference and inspiration when i was implementing my designs.
I found that the research helped me in creating both of my HUD's as the positive and negative elements crossed both genres between the childrens audience of Meg and Mog and the young adult themes of Harry Potter.

http://www.classicsys.com/css06/cfm/article.cfm?articleid=20

http://cgswot.com/tutorials/vfx-tutorials/162-32-designing-a-compositing-a-hud.html

http://www.gamasutra.com/features/19991108/dalmau_01.htm

http://www.gamasutra.com/features/19991108/dalmau_02.htm

http://www.gamasutra.com/features/19991108/dalmau_03.htm

http://www.gamasutra.com/features/19991108/dalmau_04.htm

http://www.gamasutra.com/features/19991108/dalmau_05.htm

http://www.gamasutra.com/features/20060203/wilson_pfv.htm

http://www.gamasutra.com/resource_guide/20020520/andersen_pfv.htm

Meg and Mog Asset sketches

Here are the initial sketches i did for what would become my HUD and in-game asset graphics
I first jotted down what i would need and then did some rough sketches based upon the meg and mog art work.