UI graphics

UI graphics

For the UI graphics I always knew I wanted to go with simplified low-poly icons. I decided to do black & white for UI buttons and actions, and color versions for items you pickup and store on your inventory. This way I am pretty sure I can reuse items from in-game world as the inventory item icons.

3D icon in modeling software
The new UI in action

The main idea is that when you hover on top of something usable, you are presented with a selection of actions you can perform on that something. If there is only one action to perform, the cursor changes into that action and single click will perform that action. In it’s normal state, the cursor is just a simple upturned-pyramid.

Action icons in-game

I also had to write quite a bit of code for positioning all the elements on the screen. It was mainly just duplicating functionality that already existed in Adventure creator, but the pre-made UI code had a bunch of issues that made it unusable.

Main menu

The In-game menus I figured I would put at the top center. For now I have made buttons for Inventory and Main Menu. I will add additional buttons for journal (objectives. hints) and map to the same button bar.

Opening the inventory hides the buttons and they become available again once the player closes the inventory. Inventory closes on mouse drag out and ESC key.

Hovering on things in the inventory presents you with the same functionality as hotspot in-game. I want all the interactable items function in 100% the same way everywhere in the UI and in the game view.

I am thinking of ultimately making the Inventory UI different that this dark strip along the window. I would like to show the items a lot larger and maybe some other more elaborate UI would work better there.

I also created a little world space animation for the walk action: a simple rolling animation of 3 arrows pointing to the walk target.

Now after looking at these Still Icons compared to the movement marker I do want to animate every single interaction & menu item! I feel like the still icons are not enough. They are too easy of a solution. Why not go all in?

Question time!

Do you prefer still or animated Ui icons?

View Results

Loading ... Loading ...

Tags :

Leave a Reply