Wednesday, 22 February 2017

UI can do it! A new interface design for AI Vendetta

Hello and welcome back!

Today we have a new blog for you, all about the importance of a good UI in video games and how our UI evolved over the development of AI Vendetta. So first of, what is an UI? It is the collective interface which you present to users of your application or game, it often plays a very big role in the way users interact with the application/game and how they perceive, process and input the exchange of information. Often when we talk about games, we also talk about the HUD. The difference between these two is that the HUD, or Heads-Up Display, is typically only the information you see on screen while playing the game. Think about your health bar, score, progression, ammo, power-ups, all different kinds of stats and maybe even a minimap. While the HUD is important, it might only be a small part of the UI that you find in some games.

What makes the UI so important?

As we discussed before, the UI plays a big part in how people exchange information with the game. Especially if you consider games which rely heavily on their interface, think about the majority of (classic) role playing games. In modern games, MMORPGs typically have a very expansive interface for you to customize your character, moveset, quests, etc.

There are specialized people who design these user interfaces, but besides that they also care a lot about the User Experience (UX), because a well designed UI is both efficient in conveying information and immerses with the game's visual appearance and thematics. Some games even incorporate their UI in the game world itself, think about having your ammo counter on the weapon/tool you use in game, a health bar that is integrated into the characters armour (Deadspace) or the appearance of the UI is as if it were inside the helmet of the playable character (Metroid, Republic Commando).

So how did we design and integrate the UI for AI Vendetta?

At first we really didn't start out with an elaborate UI. We just had the main information that we needed on screen and I think a lot of indie developers probably go about it the same way. There wasn't really an overlaying menu structure either that led into the game. When you start out building a game, especially as an indie developer, you want to get a good feel for the content and gameplay value of the game so you start out with the bare basics for your UI. Over time it gets polished and touched up to make it more pleasing. But there comes a point where you really need to think about "how can we make this UI look good, make it fit with the game's art style and most importantly make everything readable while not distracting". We also needed to think about how the menu structure would work, the player must be able to do all the necessary steps, but as efficient as possible, after all, it's about playing the game, not about looking at menu screens*.

*Please note that there are games which rely more on the usage of elaborate UIs which convey a lot of information. For example strategy games and RPGs in general. AI Vendetta, as an action/puzzle platformer, doesn't really offer that much information through UI, more through environmental story telling.

So then... you end up with an UI design and/or Game Flow, it may look something like this:

After several iterations we ended up with an interface that we like, it has the right visual feeling to it and draws just the right amount of attention to it. As we are working with Unity, we also decided to upgrade from Unity's legacy UI structure, which is completely code driven, to Unity's most recent UI solution "Canvas". Canvas has been out there for a while now (since Unity 4) and has been receiving improvements ever since. The advantage of Canvas is that it really exposes the way a UI can be built to artists and designers, which are typically the people who will design the UI in the first place. Instead of having a coder rebuild their designs or creating tools that can port their designs, they can now build it directly in Unity. This makes the whole process a lot smoother and really enables artists to tweak and edit at their hearts content. There is still some coding involved, but due to the actual draw calls being abstracted away by Unity, you are really only left with the actual functional code for controlling the UI, which makes the code a lot cleaner.
So overall, Canvas does not just add some improvements over legacy, it really gives power to the right people.

So this is how our UI looks now:



This a comparison shot to see how our previous HUD looked and what it looks like now in Canvas:

That is all for now! I hope you enjoyed this post, if you want further information on our UI or general help with your Unity Canvas experience, please feel free to get in touch. Send us a message or leave a comment below if you like! We have more articles on AI Vendetta here on our website, as well as the recently released soundtrack and an alpha stage demo of the game (with the old UI unfortunately). If you have any feedback or questions for us, please let us know and we'd love to get into contact!

We also have some more exciting news coming up early next week, so please stay tuned!
Thanks for reading and hopefully till next time!

~Thom, Catbyte Games

No comments:

Post a Comment