Versus Wolves Part II: Genre & Setting

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.

This second chapter of the Versus Wolves project will be focused on creating a framework that we can use to define a visual identity for the UI. In order to get this project’s UI feeling realistic, we need to approach the project as if it were a real brief for a working User Interface. We need to establish what kind of game we are making before we can do this, and the task of creating a UI will be much easier if we build the game from the ground up. So, in this blog piece, let’s flesh out this game by selecting the genre and defining a setting.

Selecting a Genre

In the previous chapters, we had a quick look at the genre for Versus Wolves and we did some research on the strategy genre. After examining this field we’ve decided that it would be a suitable route to take with the project, we will design and develop a UI identity for a “Military Strategy” title. Why? Well, this is quite an established genre so it will be a familiar environment for people to relax into and that might make them more receptive to experimental UI approaches. The military strategy genre also has most of the mechanics we will need to build all the interesting bits of UI we want to experiment with: Map Screens, Upgrade Screens, HUD and so on.

Defining the Setting

Now that the genre is set, let’s move onto another important deciding factor over a games look: the setting. Is it a Sci-Fi game? Or a Dungeon and Dragons style game? For instance, if we knew the game was set in the wild west, then we have a base to generate an idea of what the UI style should be.

Red Dead Redemption Abstract UI Style
Spaghetti Western Posters

Above, you can see the clear links between the UI style of Red Dead Redemption and the spaghetti western poster imagery. In this case, the developers have created a situation where they can rely on the users’ preconceived ideas (if they have been exposed to the 70s style western movie motif) of what they can expect the game to feel like. The developers also have a guide for creating visual consistency in all UI elements; From what fonts they could use, to how they would create the look for icons.

One thing to take note of here is that not all games need a deep visual UI identity linked to their setting. eSport titles like Rocket League, and League of Legends are good examples of this. Their reliance on player immersion is built on the mechanics of the multiplayer competitive aspect and not on the setting. These UIs tend to be quite barebones and deliberate. They need to display information very efficiently and keep the focus on the main aspect of any eSports title: stats.

Rocket League: Very minimal UI. Stylistically you could almost Cut and paste this UI into a completely different game.
Here is the above Rocket League UI comped with a Halo 5 screen shot.

The above comparison shows how easily an eSports-focussed UI can be quickly adapted to other genres of game with a minimum of effort. This is not a bad thing. As previously stated, if your going for the stat-heavy eSport approach to your project. However, if you want to build a game where characters and setting are crucial (for instance: a title based on an established franchise), it’s important to let that visual identity feed into as many aspects of the experience as possible. Whether that’s famous characters explaining the games rules in a tutorial screen, or the font used for the game matching the existing branded productions. You want the game to be as consistent as possible. Not only will it help usability, but it will go a long way to creating a fresh unique feeling throughout the game.

Why bother with a setting?

Whether the project is a Role Playing Game, First-Person Shooter or an open-world Adventure game; By using the setting as a visual cue point, we can generate a UI identity from the setting that could suffice for every one of these game types. If we approach developing the UI from purely the genre of our game, we would have a harder task generating visual and logical consistency. If not the setting, where else could we start looking to create the UI? Ultimately, we would have to fall back on other games within the genre. If we do not consider the setting as a design factor we could end up taking ideas solely from those other games, and those ideas might not gel as well with our project. Any game we use as inspiration will have very different UI elements which might be visually/mechanically entrenched UI widgets defined within that setting.

While is is true that you can create a perfectly acceptable UI system that works well and looks visually nice without linking it to your setting, it’s arguable that you are missing out on solutions that could solve a lot of visual problems and also a guide for building visual consistency.

Going Further

In the Fallout series the “Pip Boy” widget is a good example of very thematically-specific UI mechanics. Within the world of the nuclear apocalyptic Fallout series, there are dangerous radiation zones where your character needs to have a radiation monitor on him at all times to stop him from dying. The game designers of Fallout use the radiation monitor (the pip boy) not only to display radiation levels, but the majority of the games’ UI. Everything from upgrade mechanics to the world map can be found in this widget.

In-game Pip Boy

However, some aspects of the UI in Fallout are displayed outside of the Pip Boy such as the option screen. This is less important to the theme of the game and doesn't need that sense of immersion as every game has an option screen so its not unique to this games experience. This is a good thing, it helps increase immersion, keeping the dynamic game-specific UI to the game’s environment and separate to the universal UI element the options screen.

Fallout 3's Option Screen

By allowing the theme of the game to bleed over into more than just the games world visuals, they have created a greater sense of cohesion between all visual traits of the game. Also, the game’s theme is driving the display of information to the player, enforcing a greater sense of immersion. The creators of Fallout even made a real Pip Boy to bundle with collector’s edition of the game! The Pip Boy is one of very few pieces of UI to be so ingrained within the identity of a game that it breaks the 4th wall and physically exist. One of the only others UI elements like this exists in Metal gear Solid Series : https://medium.com/the-space-ape-games-experience/-423c6bcf9336#.t8wimrjbk

Real Pip Boy : Don’t know if your charisma points will increase with the real thing, though.

Whats our setting?

So for Versus Wolves, we have made the decision to create a military strategy title and now we need to define a setting. Lets go near future for this setting, as it’s a popular style and somewhere we can have the artistic freedom to come up with some outlandish UI design. (Also I quite like that setting ;) )

As we established within the previous chapters research, the game will be set within a fictional location. This might seem arbitrary, but it will help establish a neutral backdrop for our setting and avoid the issues that can arise from using actual real world places or people.

Now we have a few of these decisions locked down, we can actually start picturing how this game UI will look and feel. Knowing we have the near future aspect of the setting, can we deduce a certain amount realistic military styling might be part of the art direction? Or, are we going to go down the cartoon style route?

Near Future: Ubisoft’s realistic military strategy/shooter, The Division
Near Future: Advance Wars Days of Ruin, cartoon military strategy

We’ll explore the answers to these questions, and the reasoning behind them in the next chapter. We’ll gather research, and start producing some designs to fit this world we have started to create!