The challenging art of UI design

Note: As a result of being hacked we’ve lost some of our images. We are deeply sorry that you are unable to view most of the images in this post

One of the things I really love about making games is the little things. The little thing that no one notices but it makes their life better. The things that had hours spent on them, for no praise or reward. Recently I’ve been doing just that. More specifically UI design. I like UI design because it allows me to add those little touches here and there that make the game feel polished and smooth.

My first battle was the alerts system. A unified and clear way to alert the player to important events, and in some cases subtly tell the player about things he might want to know. It needed to be clear, slick, and be capable of telling the player many things at once, without breaking down and without confusing the player. After many iterations this was created:

Alerts

As you can see, whenever you kill someone (or any other event in the game), a message pops up subtly drawing your attention with some animation. If more messages pop up they stack, so you wont ever miss something. When their time is up they shrink and fade away for more messages to come again.

It seems like not such a big deal. But it was. It went through a couple different variations and technical prototypes until we got it exactly how we wanted. And the beauty of the system is we can use it any time we want, to tell the player about anything.

The second awesome thing we worked on was a way to show scores on the HUD. We don’t have space to show everyone’s scores. So we need to show only what’s relevant to the player and his own score. The problem is, with so many different kinds of game modes in Boxman Begins we had to design something that would suit all game modes, and still give the player relevant information. What’s worse is that “relevant information” isn’t always the same. How do we show that? We could just show the player his own score and nothing else. But then he can’t place himself in the game. He doesn’t know if he’s winning or loosing, nor by how much. It breaks the tension in a tight game.

Score2 Score1 Score0

This display is our solution. It simply displays the player’s score. And then states whether they are winning or losing, and then the difference. The idea is the difference will make the player tense. Imagine looking at this display and seeing “loosing by 1 point”. It would make the player feel the tension in the game, make them more excited and involved. We think it’s great.

I think that’s enough of me talking about UI though. Tyler has something awesome to show off!

– David

For the last few weeks, I have been getting more and more comfortable with the new UE4 editor, and now we finally have something to show from it. The first map of Boxman UE4 is nearly complete, and we thought it would be pretty cool to include some screenshots to show how it looks. The map features a very compact combat area, made for short brutal fire fights. The map has multiple paths, and multiple levels leaving multiple approaches to getting the drop on your opponent.

There will be more maps on the way soon! The maps and gameplay will really be able to shine in the new engine, and we are excited for the game we create.

As always, thanks for taking the time to stay up to date with development,

-Tyler