Creating the Main Menu - Design Methods

Creating a Main Menu

So for this assessment we have been tasked with developing a main menu for a game in a fantasy, sci-fi or sports genre. I am a big Sci-Fi fan so I am going to be picking a game in this category. I have played allot of Sci-Fi titles covering a wide range of game genres but by far my most favourite and most time spent would be the MMORPG game EVE Online. EVE Online is a game which has appealed to me mainly because of the freedom it allowed within its huge game world. Huge spacial environment with beautiful ambient music adding a gorgeous feel of adventure and urge to explore the seemingly infinite world. 

Lets have a look at some of the key points to look out for when creating a menu for a game. These points are based on a very good article which points out some important things to think about when designing a menu.

You can find the article at: http://kotaku.com/5955855/the-ten-commandments-of-video-game-menus

So first of all lets not jump straight to the main menu lets talk a bit about the splash screens that lead up to the main menu. Even though this is nothing to do with the main menu it still effects a players mood once they are at the main menu. So one of the more annoying things players face when turning on a game is non skippable splash screens advertising the companies involved with making the game. Now as interested as the player may be the first time they switch on the game you can more or less guarantee by the umpteenth time they switch on the game they will very annoyed at being made to watch each of the numerous splash screens fade in and out before reaching the menu. So quite simply it is in a designers interest to make these skippable. 

Another great point found when doing research was games that have anything other than continue as the first selectable option in the menu. This is for a simple reason we dont want players to either accidentally overwrite an existing game or start a new game and be forced to watch the very long non skippable cut scene  So what we want is if we have a player who is too eager to wait and bashes the "A" button constantly they will be put straight into the game where they left off and not forced to reset their console and start over again.

We also dont want to put any lengthy cut scene videos before the a player gets to the menu. Save it for when they begin a new game. Either a player will skip this and miss an important aesthetic you were trying to make the players feel or just prolong the load time until the menu appears.

I dont like menus that confuse a player to what is actually highlighted by the selector for example those games that always ask for a yes/no selection and one word is highlighted white and the other an off white and all the text in the game is off white so you think that the white highlighted word is the selection only to find that it was the off white word that was being selceted. So a nice simple bounding box or other visual selector to show a player what they currently have selected.

Automatically saved option settings are a must so that a player doesn't "back" out of the options menu only to find all their preferences are now back to default and didn't save.

Now as EVE Online is an MMORPG it always greets you with a menu to log in with which cannot be avoided with  any game that requires log in via a user account. So I will create a menu based on an offline version of EVE Online or maybe just a menu that would greet you after you log in and not just throwing the player straight into the game.

This is the current look of the EVE Online login screen:

Picture referenced from own copy of the game 

As you can see it is quite basic with large plain white text for the title and a small area at the bottom dedicated to logging in. There is also some information telling players how many people are currently logged into the game. One thing you cannot see in this image is that the 3D objects in the menu background are actually animated and are not still. The meteor at the top is slowly spinning and the structure to the right is rotating. There is a soft sounding ambient music track playing at the same time which all in all creates a nice peaceful aesthetic. 

When you click on the single button you get a futuristic computer confirmation sound before the game goes through the process of logging you in. 

I want to take a look at some other Sci Fi game menus and analyse them to see features I like and how well they work.

Freelancer

Picture reference: http://www.mobygames.com/images/shots/l/160771-freelancer-windows-screenshot-main-game-menu-is-shown-on-the.jpg

So above we see the main menu for the game freelancer. We can see again that the game uses an animated 3D landscape as the backdrop for the menu. I really like this as the main point that appeals to my love of the genre is the space setting. How massively huge, eerie and unknown it is. You can also see a small planet in the distance with a larger planet resembling earth in the foreground and a curious looking structure in the very near foreground. I like how they have a space craft flying near the structure which gives you an impression of how big everything is. 

So lets have a look at the menu layout. I really like the futuristic computer style button designs on this menu that react to mouse overs and clicks. The text is very clear and the layout is very simple. The text is all in capitals which helps it stand out. Also the buttons are very big which makes it easier not to accidently click on the wrong item. This wouldn't really matter in a console version of the game as a player simply moves a selector up and down the menu items. 

I think however it would of been better to swap the load game and new game menu options around so that a player doesn't accidentally start a new game when hurrying into their game. At worst a first timer playing the game may do is try to load a save game that doesn't exist and that would only happen once.  All in all I like this menu as it is simple and effective and I love the gentle 3D animation in the BG of the menu which looks nice as a screensaver should a player leave it sitting on the main menu.

X3 Albion Prelude

Picture from own copy of the game

So above we have a menu splash screen for the game X3 Albion Prelude. Once again we see a common theme in space Sci-Fi menus. We see the animated 3D background  setting the games aesthetics right at the menu. The buttons here seem a bit more simple than those of freelancer. Also you can see a small problem here with the menu button mouse over highlight is the same colour as the button text which obscures what the button says. One feature I do like in this is it gives you a button to watch the opening cutscene again wherever you like which is good if you want to refresh your memory on game story events. The new game button needs to be swapped with the continue game button again for good flow and continuity. Same sort of ambient theme backing music setting the scene for the game before you even get started. 

Dark star One

Picture from own copy of the game

This is Dark star one. It is another seemingly open world space game. Here is the start menu as you can see once again the game has an animated 3D background with a space station in the foreground. I like how the planet gently rotates and its moon orbits around while the space station floats quietly in front of them.  Here the designers have put the title of the game in the middle of the buttons but in the lower left of the screen not hiding away the amazing background landscape. The buttons are very clear and each highlight on mouse over. 

Again the designers seem to have put the New game button at the most prominent position where as there should be a continue button. If you think about it the new game function is used way less than the Load Game button. In fact only once will you need to use the New game button. Even though the buttons are of a similar colour to the background they are still easy to see.

Menu Concepts

Concept 1

So this is a very rough first menu concept. For the background I used a beautiful space scene from http://101goldpuppies.edublogs.org/files/2011/07/Misconstrue-Space-Art-681299-1oagfnk.jpeg

I then used the well known look of the word EVE from the game except I flipped the last E backwards for symmetry and used a radial gradient to create the "O" for online. I then game the title a thick white stroke border to create a nice contrast between the title and the background. For the buttons I stuck with the same colour pallet as I did for the title except I added an opacity of 50% so that the BG could still be seen through the buttons. I then put one of the EVE ships flying of into the distance. I wanted it so that on each start of the game a different ship from EVE was visible.

Concept 2

In this concept I went for a minimalist approach. I raised the ship to a higher layer so that it sat in front of the games title and had just the one button. Once you enter this button you are in game and you can then do everything you could normally do in multi button menus. 

Concept 3

In this concept I decided to try out a 3D effect on the menu which would be floating gently up and down. Here the player gets 3 basic options of start, options and exit.

Concept 4

Here I have simply added a colour change and the location of the title and so far I am way more happy with the colour pallet here. The blue subtly goes with the background.

I have also added in an eclipse and flare effect on the screen with the ship flying towards it. 

Concept 5

In this one I gave the title a dodge effect and made the button text sparkle. This gives an epic feel to the game. Also note that I have arranged the ship layer so that it is behind the menu text.

Concept 6 and final concept

This one is very similar to the last except I have added a hazy border and removed the ship from view. I like this one the most as it fits with the games epic feel and sets a very nice aesthetic. The backing track for the menu I have picked is called The Divide by Jean-Pierre Taieb and needs to be listened to while viewing the menu for EVE Online. You can hear the track here http://www.youtube.com/watch?v=7ohY9dI2uks. I feel the music adds that final touch and really brings the menu together. Its hard to explain it on paper So I hope you have it playing in the BG while viewing my final concept to see if you can feel what I was trying to put across while creating the menu for this game. 

Bibliography

Freelancer Menu 

http://www.mobygames.com/images/shots/l/160771-freelancer-windows-screenshot-main-game-menu-is-shown-on-the.jpg

EVE Online/ Dark Star One and X3 Albion Prelude Menu pictures

From own copy of the game.

Spcae BG

http://101goldpuppies.edublogs.org/files/2011/07/Misconstrue-Space-Art-681299-1oagfnk.jpeg

Blog Tasks - New Games Journalism

Blog Tasks - New Games Journalism

So what is new games journalism? well quite frankly its "new journalism" applied to games. Then what is "new journalism"? So "new journalism" is a form of writing that originates from the 1960s. 

So to define new journalism exactly it follows these definitions:

• Journalism is a form of literary expression (it is a creative and artistic form of writing)
• Fiction writing and journalism are not mutually exclusive(one can, an often does, display aspects of the other)
• "Truth" may be revealed by digging beneath the story or by telling a different one.
• True objectivity is unachievable.
• New journalism is open about the author's presence and experience as part of the story, unlike "Old Journalism" which strives to assert or imply objectivity.

Tom Wolfe

New journalism developed after Tom Wolfe who was a reporter for the New York Herald Tribune was having difficulty writing an article on hot rods and custom cars. So he simply sent his notes to the editor of Esquire in the form of a letter. The editor of Esquire simply removed the "Dear Byron" part and published it in the magazine with a new heading.

Hunter Thompson

Some well known films have been produced from new journalism articles like the well known film "Fear and Loathing in Las Vegas" witch was derived from a fictionalised account of Hunter Thompson's account of his trip when he was covering a desert motorcycle race for a sports magazine.

Capote

Created a well known factual account of the 1959 murder of the Kansas family told in the form of a novel.

New journalism influences can be found in a range of different types of writing:

• The lad Mag
• Music Journalism
• The Style magazine
• Profiles
• Sprts Writing
• Travel writing
• Non-fiction books
• True Crime

New Game journalism

see how new journalism works in reference to video games is the fact that people write as in their experiences within the game world as a story and their interactions with other players and not about the game as a product. It allows readers to feel empathy or what it was like during the writers experience as well.

3D Model assignment - APC

3D Model Assignment

Jason Fury

Note: Since handing this in I realised and found out about the attach tool in max that I was not aware of before handing this assignment in.

For my 3D assignment I decided I would try and sculpt an APC repair vehicle from one of my favourite gaming series Command & Conquer.

appendix one

This above is my reference picture of the 3D that I am going to create. It is only a reference and I have made modifications and alterations that suited what I was after.

 This is the finished model.

So to build this model I used the Autodesk 3DS 3D modelling software.

Software screen layout

As you can see above the layout consists of 4 main viewports. You have the top viewport, left viewport, front viewport and the multi-directional viewport. The multi-directional viewport is the one that will show filled in primitives.

To start off, I selected a standard box primitive from the primitives selection menu

Once you have selected the box primitive you simply click and drag within one of the viewports for the 2D cross section of your box (don’t worry about the exact size as it is very easy to adjust the size after) then release the mouse button and then you will be able to apply the 3rd dimension of the object by moving the mouse then a second click to finalise the decision.

Note: If you are working on a small monitor you may find that the viewport is too small to see what you are doing properly. You can easily switch it to full screen and back again with alt + W.

Once you have confirmed your primitive you have the option on the right to add segments which will add more vertices and polygons to your box. This allows for more advanced shapes. The downside however is that it also means the object will take a lot more time to render and a games designer would have to be aware of this as it affects game performance and may need more powerful machines in order to run.

There is also efficient use of polys as well because you can have polys where they are not needed.

Looking at the above box for example if that was the shape you wanted and you no longer needed to make any alterations then it is an inefficient use of polys. Each one of those polys would need to rendered where as an efficient use of polys would look like the box in the first picture.

Note: You may not be able to see the lines in your model so to display these to make modelling easier simply select “edged faces” in the selection here:

Once you have your completed box primitive you will then need to convert it to an editable poly. This allows you to change and alter the primitive however you like. To do this simply right click the primitive and go to the “convert to” near the bottom and then editable poly in extended menu.

Once you have done you will see the options below become available in the left hand toolbar. It can be a little daunting at first but its very straight forward for standard modelling. A lot of the options here are advanced and we will not need them for the purpose of this.

The main ones to take note of are the “selection” and the “edit vertices” section.

Note: The “edit vertices” section may alter depending on what selection tool you have selected and also its title. For example if you have the edge selection tool selected then the “edit vertices” menu will become “edit edges”.

As you can see here vertices are points in space within your object. Polygons are the flat areas between the vertices. So on one side of this object there are 6 polygons or faces.

To make this select the top face of the primitive with the face selection tool

Once you have the face selected you need to add a bevel effect

 

Now don’t click on the actual bevel button but rather the settings button just to the right of it. As you can see above. Now once you have clicked this you will see a default bevel effect applied to the selected face (note: it is only default the first time, be aware that when applying bevel to another part of your model later on it will use the last used settings so will need to be adjusted to suit your needs) You can now see some settings buttons within the viewport.

The top one is the group button this allows you to adjust if you have selected a group of faces to apply the bevel effect to the polygon group as a whole or to each polygon. this would look like:

The second option adjust the bevel height. It simply raises the selection up and down.

The third option affects the actual bevel.

Once you have applied the bevel you will want to select the vertices selection tool.

Now you want to select the back four vertices

Do this by dragging a box or hold down ctrl and left click on each of the verts. Now you will want to make sure you now have the move tool selected. You can do this by pressing “W” on the keyboard the move tool looks like this:

As you can see it has a Z, Y and X axis. Make sure when using it to use one of the arms not the middle. This allows movement along the axis whereas the middle uses a combination of the axis. For this purpose we will want to use the Y axis. Simply click and drag on the Y branch till you get the desired effect.

Now to get the wings on the side we need to make a poly that we can add a bevel effect to on the side. To do this we can connect some edges to give us access to the area we want to alter.

On this picture you can see highlighted in red the edges I have selected with the edge selection tool. To select both lines you simply control and click on the edges. Now that you have the edges selected we want to connect them. We do this quite simply with the connect tool.

You will get these settings options come up

Top setting is how many segments you want. The second setting is the pinch setting, this adjust how close or far apart the lines are and the slide setting allows you to position the line where needed. So adjust this till you have what you want and accept the changes.

Now you have the ability to select the new poly we have made with the connect tool. Now we can apply another bevel effect to get the shape of the wing.

As you can see now we nearly have what we need. What you want to do with the face above selected is move it around with the X and Z axis until you get what you want.

What we need to do now is apply symmetry to the object to save us having to do this all again. We do this by applying a modifier. In the modifier drop down list select symmetry.

In pic 1 you can see the drop down menu and once you have selected symmetry you should see it in the stack which is represented in the middle picture. Now in the viewport the image may look all wrong but its just because we need to alter the symmetry settings. You do this in three main areas:

Here you adjust the mirror axis. Now at the moment the object may look like :

Now it looks like the wings have gone but they haven’t they are simply hidden inside the object because of the way it is currently being mirrored. Now you can tell what axis you want it mirrored by by using the move tool as a reference and you can see that you will want the x axis. Now you can see in the mirror axis selection that the X axis is already selected what we need to do is flip it by selecting the flip tool.

Its still wrong so we are going to need to adjust the point in which the mirror is. To do this we use the option within the modifier located in the stack.

Now with the move selection tool (keyboard “W”) You can adjust at which point the mirror is.

Now you can start to see the shape of the APC.

Note: In some of the pictures you may notice a difference in colour. This is purely so that you can see what you are doing easier. See as the vertices are blue when using the vertex selection tool it can sometimes be hard to see them so you can change the colour of the primitives to make it easier to distinguish them from one another. To do this simply click on the coloured box near the stack in the toolbar:

I will now show some screenshots showing the progress of the model and I will stop and explain when using any new techniques.

Now I am adding a new primitive to the viewport for the front arches. A little trick to make placing the box easier is a little setting selection called “AutoGrid”. This allows you to make your new primitive on a primitive within the viewport. Its not permanent just makes placing it easier.

Once again I applied symmetry here and to shape the box like that simply select the top edge you want to lower and with the move tool click and drag down the corresponding arm (in this example the Z axis) till you get what you need.

To create this part I used the extrude tool. It works the same as the bevel tool just without the last bevel option. Once I extruded I simply moved the face around with the move tool to get it where I wanted. Then you just have to move the edges about till you get what you want.

Now with symmetry it does the other side as well. You can also see that the primitive has been resized and repositioned to where they needed to be. You only have to make the changes on one side.

So next I wanted to add the headlights

Now on this example you can see I tried to shape the headlights from the arch primitive I did this by using swift loops which is an option within the edit menu at the top under graphite modelling tools.

This did achieve the results but when only needing to create one poly on one side this was very inefficient as it produced a lot of unnecessary polys. Swift loop is still a very useful tool but not for what was needed here.

Another way of doing it is with the connect tool again and adjusting the segments, pinch and then slide but that was also inefficient as you were left with polys around the sides of the headlight. So after trying out these I found that the best way of achieving a low poly headlight was to simply add another primitive.

With this new primitive I simply used the connect tool to connect the two corner verts. I done this on both sides. Once I connected the verts I then selected the faces and simply deleted them.

Now this shape is left. The reason I deleted the base also was that it would not be seen and was to remove a poly that was not needed. To bridge the gap that was left was quite simple as there is a tool called exactly that, Bridge. You simply select the two edges you want to bridge the gap between and voila:

For the cockpit select a cylinder from the primitives menu and set the height segments to 3 and lower the sides down to as low as possible but to keep its appearance of roundness. Now to get the shaped effect here is quite simple. Select all the vertices around the second from top loop and the top loop. A quick way of doing this is to shift + click one of the vertices and that should select all in a loop and then shift click the top loop vertices as well. Now with the scale tool(Keyboard “R”) adjust the  scale of the vertices by dragging the scale tool from the center to do it uniformly.

Now for the turret I used three main tools, extrude, connect and inset. So from a basic box simply select the rear face then the extrude tool. Now you have a long rectangle split into two. Now add some connect line on both sections two on top and bottom of rear section and one at the back then one at the top of the second section. Now its simply a case of selecting these new edges with the edge selection tool and moving them to achieve the desired shape.

As for the sections on the side the inset tool can be used get the desired results. Simply select a face then the inset tool. What this does is put a border around the face. You can adjust the size of the border with the settings that are on screen when you select this tool. Once you have confirmed the edit you will be left with an inset face. Now on the rear section simply selecting the face and moving it along the x axis will raise it and give the effect seen. As for the front section an extrude is needed to extrude the face without affecting the border.

Now with a series of extrudes and insets the crane arm can be extended.

As you can see here the whole crane arm is made from one single primitive including the rope and hook. This can be achieved easily with a mix of extrudes, insets and bevels.

Thats the inside arch created with symmetry and connect tool

Eventually using the tools above the APC come into shape

In the top left of the screen you can see the poly count. To show this simply press number 7 on the keyboard.

Now that was the easy part finished. The next part is texturing the model to look more realistic. So to texture a unwrap UVW modifier needs to be places on each primitive. Keeping in mind that it needs to be placed after the symmetry modifier in the stacks.

Once you have added the modifier you will then need to go into the “open UV editor” located under the “edit UVs” section in the toolbar.

Once selected the map screen will pop up.

Now to unwrap a simple shape like the body simply zoom the view out within the map editor screen out and after selecting the face selection tool at the bottom of the window drag a selection box over it all to select it all.

As can be seen it is still not ready for texturing as it all overlaps. To spread out this map a simple tool to use is to use box mapping as its quite a simple shape. For more organic shapes the pelt tool will need to be used as well as adjusting the unwrap seams. For this shape though select the mapping menu at the top of the window and click normal mapping.

Then in the pop up menu select box mapping from the drop down menu.

What you will get is

Once it has been unwrapped you need to render a UVW template. This is located at the bottom of the tools menu and once selected you will get a pop up menu

The settings here can be left as there are though when doing anything very high detail you may want to increase the width and height. Once you click the button at the bottom “Render UV Template” then you will get a screen like this.

Now you need to save this as a targa. To do this click the save icon(the disc) in the top left and select Targa from the save as menu.

Now this needs to be opened up in photoshop. Once you have it open in PS you will need to change the layer settings to a screen.

What screen does is make all the black transparent so that you can still see the template while working on the texture.

I then created a new layer and put this below the screen in the layer list. This is the layer I will be working on.

Once happy with the texture save the textures but ensuring that you hide the screen layer by clicking the eye icon on the layer in the list.

Now go back into 3DS Max and open the materials editor. To open this window press M on the keyboard. Once in this window you need to click on a material sphere then click on the button located next to the diffuse button as shown below. This will then open up another window where you will then need to select bitmap

Locate the texture created before and open it. The texture will now be applied to the sphere. Once that is done simply click and drag from the sphere to the part of the model it is for. It may show up as grey but to show simply click the checkered pattern button.

Simply rinse and repeat for the remainder of the textures. To make the model stand out more before rendering adding some lights into the viewport can create a nice effect. To do this simply select lights from the toolbar then free light.

Once selected you will see all the tools for lights.

Select light type from the drop down menu highlighted above. For these purposes the 75W bulb would be good for the headlights. Simply place in the viewport as if you were creating an object.

The wireframes will not be visible when rendering but will look great. Now click the render button at the top of the screen.

As you can see the lights give a great effect when rendered. Also added some blue lights on the crane which shine well off the body.

appendix one - http://images.wikia.com/cnc/images/5/55/Repair_APC.jpg