Part 17 – Relaying Information to the Player

How do you relay information to the player clearly and at the correct time?

This week we are diving into UI with a look at the Status Icons for the game Boss 101. What are status icons you ask? Good question! Status icons are the visual indicators for effects on weapons and bosses. For instance a boss might have a flame weapon. Well, we would have a status icon for the flame weapon created so you would know in advance what you are facing.

The idea here is we want the “Make A Boss” room to be a dynamic thing. You roll a boss and see the effects he has and you pull up the equip panel to decide what’s best to battle him with. Maybe the boss is weak versus melee weapons? Well this is where you can choose what to take him down with.

The philosophy here is we want the player to really enjoy the idea of rolling random bosses and getting a moment to plan an attack. Kind of like thinking on your feet in the middle of the battle. We designed the game around the idea you get bonuses for clearing out bosses in sets as well as the idea you use certain boss parts to create or develop more tech for your weapons. That is where the “Make A Boss” equip screen makes its mark. Let’s dive in!

Figure 1: Here we have the regular Make a Boss screen with a couple of red squares representing the effect icons. Notice we are just laying things in for position and to get a sense of space.

article image 1

Figure 2: Here’s a layout with everything planned. You see a sample of icons and names in their proper positions. The point here is to create a UI with a focus on the important things. In this case we are giving the player a direct look at not only the Bosses abilities but allowing the player to compare this with his own weapons and armor (hats).

article image 2

Figure 3: Here’s a first pass on some various effects for bosses

article image 3

Figure 4: So the player will have resistances to the bosses effects (like poison for instance). This is a simple layout page with classic video game tropes using arrows to represent the good and bad effects for the player.

article image 4

Figure 5: A look at some effects laid on for display on the Make A Boss Screen. This is mostly to get a sense of the colors and the best way to display things.

article image 5

Those are the highlights for now but comments are questions are always welcome. We hope you liked this high level look at creating a game UI and the thinking that goes behind every part. We will be bring you more looks at UI philosophy and development in the coming weeks!

Remember to Live Your Dreams!

-Tim