Versus Wolves Part III : UI Styles

Versus Wolves is a R&D project that will blog from start to finish on how to research, develop and produce a games user interface that will be developed within the Unity Games engine.

Welcome to part three of Versus Wolves! If you have read the previous installments you are should now be up to date on the fact we have made a few major decisions regarding the direction we are going with on this projects direction. You can find part I here and part II here . In part I we decided the genre and in part II we established a setting. Now in part III, we almost have enough information to start developing visuals. The next step is to find that initial building block that we are going use in order to put together a style guide. In order to really get to grips with why this is crucial, I am going to have a look at a selection of different games and see how they find the genesis of their UI style .

Case Study : Madden 2016

The American football title Madden 2016 does what it can to feel as much like as an interactive TV broadcast as possible. By having UI elements that fit the style of the broadcast graphics it creates a familiar setting that eases the player into the experience of the game. Presumably they are already fans of the sport and watch the TV broadcasts and that’s why they are playing the game. The visual authenticity of the act of television spectator is the visual goal with the madden style. What is quite strange however is the way both the game design and the TV broadcasts have influenced each others graphic styles over time. At some point in the early 2000’s as computer graphics technologies evolved both formats started to adapt each others presentation style.

Actual TV footage of an NFL game
Madden 2016 images

The lines between the TV broadcast and Madden’s football Video games experience have blurred, you can see definitive graphic style cross over between the two formats. Quite often influencing each other too, as we can see in certain areas such as introductory graphic sequences on the TV networks with big bold 3D rendered team logos and exciting visual effects. Or the statistics heavy screen furniture used during the commentator game analysis segments that look like HUD elements from a game. It does make you wonder how much closer the two formats can get. The ESPN NFL app for Xbox One completes this connection providing a host of features such as custom tickers, in-depth player statistics and even the function to play a game while live football scores can displayed on screen. The more viewing football becomes more interactive the less it becomes a passive activity, and starts becoming more like a video game.

NFL Xbox One app
Madden 25th Anniversary Edition Menu screens

Because Madden is a game about a real sport and has another Visual Entertainment format that its so intrinsically visually connected with (TV Broadcasts) its not really something we can use as a guide to build Versus Wolves UI. That being because its not a Sports entertainment setting so it doesn't have any real cross over style we can apply to a near future military strategy title. But this was a very unique example of how UI style in the game Madden was influenced by the subject it was based on and vice versa. And the fact that’s its so unique makes this approach not really applicable for Versus Wolves UI, so lets have a look at another title!

Case Study : Grand Theft Auto

Some games stick very closely to the foundations of previous instalments of the series in order create UI style. Grand theft Auto V is a good example of this, using familiar fonts, icons and sound effects they establish a nice comfort zone for any player familiar with the series straight off the bat. By GTA III they had set the tone for the following titles in the series with their cartoonish iconography, bold stylized font right through to the colour of the icons. The UI for GTA is made up off a mix of diegetic and non diegetic elements that the player interacts with. For instance there is always some sort of mobile phone or pager system that your character uses in game where mission details are displayed. All that happens from title to title is that the sophistication of the devices increase as the hardware of the system the game is running does.

GTA Hud Diegetic elements through the series
Diegetic UI Phone Action in GTA V

If we look at the UI style of GTA from Vice City we can see the simple cartoon weapon icons, and a big brash bold font with the heavy drop shadow very apparent in the UI. It plays all the way through the style design from the box cover to the in game loading messages they use the same font and the same stylized cartoon concept art.

Various Grand theft auto Hud designs across the various generations

You can see very similar styling through each of these HUDs too. Games series such as GTA have the basic same UI visual design since day one. Very minimal UI style complimented with a host of In depth diegetic UI elements. So the GTA team build upon UI foundations that have already defined updating and perhaps tweaking where necessary as UI technology has advanced.

We don’t have previous installments of a game to look to for visual guidance, we have a unique first time experience to serve to the user. We cant go down this route either :P but its interesting to see how a title can keep to its UI brand for such a length of time and keep it fresh by still using the same initial style.

Case Study : Metro 2033

This title features a fully diegetic UI to convey information to the player. This means that UI elements will more often than not be represented in the defined world as opposed to traditional on screen HUD elements. So for instance in Metro 2033 when you bring up the Mission objective menu the list is displayed on what appears to be a hand written notebook.

Metro 2033 Mission objective display, you can see that it even has pencils and a Small compass built in.

In order to define the look and feel of Metros 2033’s UI the designers depend nearly entirely on the style guide for the 3D asset art direction. How they model and texture guns, buildings and characters. All of these things directs the look for the diegetic UI elements, as they need to fit exactly into the Metro 2033 game world. This does work well when you are in FPS game like metro 2033 because you view the games from that first person perspective. So viewing and interacting with objects like maps, guns and doors from a first person perspective diegetic UI works really well.

Various Strategy titles demonstrating the traditional elevated camera angle. TL: Final Fantasy Tactics- TM: Command and conquer -TR: Front Mission- BL: X Com 2-BR: StarCraft 2

For Versus Wolves where we will be more than likely managing multiple characters a first person perspective isn't really the most suitable viewpoint for our game. When you are dealing with strategy having an over all viewpoint over the battlefield is quite essential. So Versus wolves would probably be adopting a more traditional approach to this aspect of the genre. And that means building a purely diegetic UI might not be the most suitable route to go down.

Case Study : Okami

Okami Capcom 2006

The game Okami (Clover studios 2006) has an interesting development story regarding UI style. From the main player character of Amaterasu to the smallest menu button, the art direction is based on the traditional Japanese calligraphic art style “sumi-e”. But why did they choose this style? If we read into an interview with the director Hideki Kamiya about the games early development we can see what might be the spark of inspiration.

“The art in Ōkami is highly inspired by Japanese watercolour and wood carving art of the Ukiyo-e style, such as the work of Hokusai. Ōkami was originally planned to be rendered in a more photo-realistic 3D style. However, Clover Studio determined that the more colourful sumi-e style allowed them to better convey Amaterasu’s association with nature and the task of restoring it.”

-Hideki Kamiya

The game is about a world ruined by an ancient demon named Orochi and its the players goal as the wolf goddess Amaterasu is to restore it by using a special artefact known as the Celestial brush.

Celestial Brush In Action

During the game players can pause and call up a canvas, where the player can draw onto the screen. Amaterasu uses the Celestial Brush to rejuvenate the wildlife and world around her destroyed by the Orochi. This is essentially the main game mechanic that drives the plot of Okami.

Okami Gameplay with Sumi-e brush art direction

You can see that the art direction for Okami world and characters primarily comes from the core theme of the story. The plot of the game inspires the sumi-e brush art direction and in turn that directly feeds into the UI style. This works remarkably well in Okami as every button, every menu seems so intrinsically tied to the aesthetics of the world of Okami it really creates a consistent and visually unique user experience that is still fresh today. How does it seem unique still to this day?

They set themselves a clear visual touchstone that every asset the entire game is influenced by and stuck with it. Every button, 3D object to the logo design has been developed in mind around the central idea of a world entirely existing in sumi-e brush art.

Okami Menus you can see the brush style font and icon illustrations, complete with Paper scrolls set up as backgrounds for widgets

This is a solid plan to create a visually consistent and dynamic UI. It fits in perfectly with the game world by constantly referring to the central theme of sumi-e art. From the big visual problems such as “what does a level environment look like?” to using brush art to solve smaller issues like “what kind of font do we use” or “how a buttons border looks“ these can all be solved by sticking with the theme.

Is this a suitable approach to styling Versus Wolves? I am inclined to say so, its a proven way to inherently build visual consistency and if you can find that interesting spark of inspiration you will have a unique UI style. So we finally have a direction to start creating artwork for Versus Wolves. We now know we’re making a military strategy game set in the near future and we’re going to source inspiration from the plot to create a visual identity for our UI. By following the plot driven motif art direction method from Okami I think we can come up with some sort of interesting visual style. Now all we need is some kind of story in order to do this, so let’s put together a short story line and then see what we can find in there for inspiration.

Plotting our visual strategy

Were not going to write a full script for the game but lets write up a little plot summary so we have a resource to explore!

“A year after the deadly coal seam mine disaster in the Zadran peaks, the fire has reawakened raining a storm of deadly fire bombs and an endless tide of toxic gas that threatens the borders of the safe zone. A military science team has been sent back into Zadran to investigate and this time extinguish the fire last and for all”.

What’s the genesis of this story? I once read about an underground fire that had been burning or 6000 years, I found this quite fascinating and thought it would be an interesting situation to set for a game.

Two influential sources for the plot of versus wolves.
Coal Fire Mood Board

Combining this setting with some influence from John Carpenter movies and one film in particular Sorcerer by William Friedkin. Sorcerer is a film about transporting a delivery of highly explosive material to a mining company across treacherous terrain. If we blend all this source material together we can generate an rough outline of the way some of this game could be visualized.

Wheres the art?

You might wonder why there is so much effort being put into just setting up this design project as we are now on part three and we still have no visuals. In order to get create the best situation for this UI to stand up to scrutiny we need to make the setting as real as possible. That is why we need to go to the lengths of defining the genre, deciding the direction of the style etc. So let’s crack on in the next blog piece and we will finally start creating some visuals. In part IV we will flesh out this story a bit more too and explore how we will source a motif from it and build the visual identity for Versus Wolves!