Monday, May 21, 2012

Human Interface Components - UI Design - Planning

Welcome to another Blogpost, and this one is all about my planning for the current work on our 3D game, the User Interface. This in an exciting moment for me, not primarily because I get to code, but down to the basis that it allows me to make the game work the way I please. This blog is going to detail my planning and concepts, and then the actual art I developed in Photoshop that will be used in the final product piece, primarily as place holders for the code base. I will be using, Flex AS3 to program the UI with the IDE FlashDevelop, rather than the Flash IDE as its not suitable, for the kind of dynamic UI development that comes with a package like FlashDevelop.

So lets, start. We have three weeks to complete this project, and today marks week two, and end of the intial planning stage, and moving into the more production stage, so what better time than to discuss what has kept me busy.

First off, I decided to sketch out my idea and take inspiration from a couple of UI uses. I noted two games, especially that I rather liked the look of, however, my design changed dramatically from theres, but the concept remained the same.



I really liked the look of the Diablo 2 user interface, and was even allowed to explore it's properties during class, whcih made for an exciting turn of events.. I do believe that more shouting to heal and stop ninja looting was focus of attention rather the UI, but still, it was nice to be able to explore its working. Diablo 2 has a health record, the left red ball and a mana record, the right most ball. One thing that stands out most about this UI, is how detailed the main interface is.. but also, how clumped.

I wanted to take a detailed approach to mine, rather like this, but also try to maximise the use of space and provide more screen for the user, rather than have it blocked out by user interfaces. The best thing about the UI for this, is everything is easy to get to, just one button or hotkey and its open, I decided that the use of hotkeys to manage a menu, as opposed to clicking the sections, was much better to allow for quick open and close.


This menu is only prompted when the user presses start, something I think is great, we all know large games like Skyrim are likely to require a large field of information, as can be seen in this screenshot. It gave me an intial idea of my own, why not have my own subsystems popup when the users presses a key or a image, rather than clutter the screen with maps, and quests and all sorts of nonsense.

Another key feature is how clean the UI is. Unlike Diablo 2 which has various detail and has everything in one place this seems to be more spread out. I dislike the location of the health bar mostly, its never seen in game, and knowing how close you are to death is a difficult task at best, something I think i'll incorporate in mine, is too always have the bars viewable at all times.

I decided that for added speed, response and direct control, I will use C++ to program this, I have decided on use the SDL library, as opposed to raw DirectX or OpenGL, simply because it provides a simply and direct interface to graphics and input management, that will save me time and stress in the long run, due to the complex nature of DX9 or OpenGL, which would increase development time, tenfold. Furthermore, SDL is a cross-platform library, meaning, the end product should work on other machines, such as a Mac and Linux, if compiled with a compiler targetted towards those platforms, i.e. MinGW.

I decided that it would be best to begin drawing out various ideas for the platform, because the original idea, was to release our product on PC and XBOX 360, I decided to plan for those two interfaces, due to the nature of how the interfaces may play out, I may have to differ the theme a little to correspond with the platform specifics. For example, a directional wheel that that allows the user to select from various different options, to allow us to use the ergonmic design of the XBOX controller, on the pc however, hotkeys, will suffice, such as I for "Inventory", J for "Journal", M for "Map". This quick approach is also familar, as it is used alot of various games, usually those of an RPG nature.

Below is a view of my photoshop mockup, which should closely resemble the actual finished product.


From this mockup, you can clearly see that I have chosen a very stylised look, going for graphics, similar to the approach taken by RPG games, for example, Diablo II above. The choice of grapics also allowed me to experiemtn with my creative side, and create a very unique and clever  looking UI that fit in more with the design we had planned for the game.


One of the closer UI schemes that I could find that related very much to the Witcher 2 which had a very similar scheme to the one I wanted to employ, minimal it its on right but allows for a very complex system for navigating most of the system UI.

I expect to face several chanllenges, that mostly fall into the programming zone, because of the intial
requirement to blit an array of pixel into a select zone, requires a lot of general work, transferring the data to a surface buffer in memory, and then transferring to the front buffer.

Otherwise, the intial build should be pretty simple. I aim to work at a Windows platform, and use the Visual C++ compiler in order to develop for that specific platform.

No comments:

Post a Comment