• Register
Post news RSS 2015.05.24 Boss 101 How We Create UI Icons

A look behind the scenes at the process and philosophy behind status effect icons in Boss 101! Joins us won't you?

Posted by on

Welcome back to the weekly Boss 101 update!

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. Kinda 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.


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).


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


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.

And you get this...


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.


OK – that is 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!

Boss 101 Gameplay testing

Welp, when the night winds down what better to do than play a little Boss 101 and shake down the latest. Here we are threading the needle during crazy boss attacks! If you don’t have the right hat you better be pretty good at flying! HAAAAAAAAAAAAAAAAAAA

Remember to Live Your Dreams!

-Tim

Comments
Sph!nx
Sph!nx

Nice article. That fight looks frantic as hell!

Reply Good karma Bad karma+2 votes
DonleyTimeFoundation Author
DonleyTimeFoundation

Thank you!!! Appreciate the kind words!

-Tim

Reply Good karma+1 vote
LurkersLair
LurkersLair

These icons and UI looks really nice, like its minimalistic yet complex style.

Reply Good karma Bad karma+3 votes
DonleyTimeFoundation Author
DonleyTimeFoundation

Thanks so much! Watching your game too! Looks fantastic.

-Tim

Reply Good karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.