Oirbo Devlog #49 - Making the in game UI


(Posted originally on our blog)

Hi guys

This week we finally got into the in-game UI \o/ and produced the first tab of what will be the entire control system of Oirbo in-game.

We think it looks super cool, but underneath there is a ridiculous amount of work (and some wasted time on almost pointless features) so let's drill it all out!

First off, as expected, the UI can be controlled with the mouse, keyboard or gamepad, this itself can be challenging to do especially when we also try to ensure a consistent user experience. So, for example, if you are playing keyboard only, but switch off to mouse, the UI will stop auto-selecting clickable objects.

Looking at the right side of the UI, you can see the unlocked skills, the selected one turns orange and highlights both the button and area that upgraded Oirbo, its a simple visual candy but it helps enforce that each new skill is actually an upgrade of oirbo. The uncollected skills are grayed out, for obvious reasons xD.

When you click on a skill, a simple popup will appear showing off how to use the skill and its associated controls (if any), right now we still don't have the clips, and they will also only be done at a very late stage of the project when we have all the art locked in.

Now the side panel works as a pseudo inventory system and as a general information point. This one won't change as you cycle through the tabs in the system so this information will always be present.

Starting from the top, there is an image representing each area you are right now, as well as the "exact" coordinates.

The orange bars are Oirbo audio input, so it will respond to the current area background music or any other sounds nearby, it's basically an equalizer of the ambient sound xD.

Finally, there is a tiny heartbeat monitor that shows Oirbo stress level, this is linked with its HP, so as the HP goes down the stress level goes up and it's reflected in the monitor.

The rest of the side panel works like a simple Inventory system, so as you collect stuff they will appear in it, the top right indicates how far you are from getting one more HP (you need to collect 3 energy batteries to gain 1 HP) and the list indicates, keys, collectibles, etc.

We spend almost the entire week working on it, but we only have one big piece of UI to do now - the map! So next week we will tackle it and hopefully finish it and never look back xD.

What do you guys think of the overall esthetic of Oirbo and these little details? Let us know!

Also don't forget to wishlist the game on Steam, join our Discord community and follow us on Twitter , Facebook!


Get Oirbo

Buy Now$14.99 USD or more

Leave a comment

Log in with itch.io to leave a comment.