Designing Game Menus
Posted on:August 12 2009
One of my hobbies is - you might have noticed it already - creating complete computer games for fun, including programming the whole thing, composing the music and even creating the graphics (Not to be confused with the fact that I am working on real computer games as freelancer from time to time). Recently, I found it interesting to develop flash games using Adobe Flex, and maybe you've even played my last game Darkness Springs already.
One problem I always have when creating such games is the main menu and the user interface in general. The problem is that in games, you usually don't have standard UI components, and you are completely free to design the game dialogs. But all this freedom is actually making it more difficult: In a lot of games, this is resulting in ridiculous complicated UIs, UIs where you have no idea where you have to click at to get the result you want.
The image above shows the map selection screen in a new game I am currently working on when I have time for it. It's not a screenshot of the actual game, but a image composed using Paint.NET, which helps me to think about how the menu will look like when it is implemented. Painting game menus before implementing them really helps and avoids a lot of work.
This is now the 3rd iteration of the screen, and I think I can implement it now as it looks like. Maybe I'll finish this game up very soon afterwards, it has been idling around on my hard disk for too long already.
One problem I always have when creating such games is the main menu and the user interface in general. The problem is that in games, you usually don't have standard UI components, and you are completely free to design the game dialogs. But all this freedom is actually making it more difficult: In a lot of games, this is resulting in ridiculous complicated UIs, UIs where you have no idea where you have to click at to get the result you want.
The image above shows the map selection screen in a new game I am currently working on when I have time for it. It's not a screenshot of the actual game, but a image composed using Paint.NET, which helps me to think about how the menu will look like when it is implemented. Painting game menus before implementing them really helps and avoids a lot of work.
This is now the 3rd iteration of the screen, and I think I can implement it now as it looks like. Maybe I'll finish this game up very soon afterwards, it has been idling around on my hard disk for too long already.
Comments:
Andrew
Quote2009-08-12 20:53:00
Any special reason for using a raster editor like Paint.NET? I find a vector graphics editor like inkscape is soo much easier to mockup layouts.
Imbro
Quote2009-08-12 22:46:00
If talikng of standards I found UI of UT2004 map selection screen very good, easy and efficient, though you donot need video selection menu for Darkness Springs but Keyborad settings and Video options menu is very good in Crysis UI(It uses Scaleform GFX, so it should be doable in Flash). The main point of UI is to give maximum possible important options in same screen divided in groups, one part being selection menu for group and other being group items. The menu made seems sufficiently good, but vertical ordering like UT2004 will be superior considering you will add lots of more maps if not map types.
kinjalkishor
Quote2009-08-13 10:48:00
I kind of remember a time when we gave graphics artists more or less complete freedom in designing GUI elements (not only visually, but also behavioral), and this was kind of a bad idea (you had to move levers with the mouse and stuff like that, instead of just having two buttons)...
For some time we tried using HTML pages for some UI prototypes, less for the final look (this is quite easily done in Photoshop or anything supporting layers, especially because you can then just dump the layers to disk individually and have all the graphics you need), but more for getting a feeling for the menu flow. Flash also kind of works for that (although it sometimes can be kind of annoying), and allowed us to interact with what otherwise would've been a (more or less confusing) diagram.
It would be nice, though, to have a tool that lets you toy around like that and finally produces some output that you can include directly in your game...
For some time we tried using HTML pages for some UI prototypes, less for the final look (this is quite easily done in Photoshop or anything supporting layers, especially because you can then just dump the layers to disk individually and have all the graphics you need), but more for getting a feeling for the menu flow. Flash also kind of works for that (although it sometimes can be kind of annoying), and allowed us to interact with what otherwise would've been a (more or less confusing) diagram.
It would be nice, though, to have a tool that lets you toy around like that and finally produces some output that you can include directly in your game...
xaos
Quote2009-08-13 10:58:00
@imboro: no, i actually also used inkscape for some time, but I felt paint.net's user interface was simpler, and i don't care if I use raster or vector graphics.
@xaos: I remember those times, hehe :)
@xaos: I remember those times, hehe :)
niko
Quote2009-08-13 12:04:00
Get rid of the play button. If they choose a campaign just start it or go to the next window. then you could use a back button instead of cancel and orient it like a website which most users are familiar with.
ecsos
Quote2009-08-27 17:53:00
Add comment:
|
|
Possible Codes
| Feature | Code |
| Link | [url] www.example.com [/url] |
| Bold | [b]bold text[/b] |
| Quote | [quote]quoted text[/quote] |
| Code | [code]source code[/code] |
Emoticons
 |  |  |  |  |  |  |  |
 |  |  |  |  |
But I'm glad to see, that you'll release a new game