Designing the UI for the ability selection

To allow the player to easily select between each of the three abilities as they unlock them, the team has agreed to include an on-screen UI that would be displayed at all times and would allow the player to see which ability is active, as well as to visualise the navigation function between each ability that the player can do using the middle scroll of the mouse.

After much discussion with the team on Discord (Discord, 2021), we agreed on an ability wheel, similar to that seen in Grand Theft Auto V (Grand Theft Auto V, 2013), where the player could switch between weapons.

The weapon wheel in GTA5

However, unlike in Grand Theft Auto V, the wheel would be on display at all times and sit in the corner of the screen. After discussing this with the team, we decided on a slightly transparent wheel which would be divided into three compartments, each with an icon to represent each of the abilities that the player can have. Only when an ability is unlocked does the icon display or will the ability be selectable.

One of our programmers Luke Quinn would be implementing this UI. I liased with him during our last stand-up meeting (Quinn, L., Tsaklev, G. and Waters, J., 2021.) to discuss the design of the wheel and how he would want me to send the assets to him. We both agreed on a greyish white design with a slight transparency. He also wanted each part of the wheel sent to him in PNG format, both with or without the icons.

I asked him if he required me to create any ‘highlighting’ effects which would be used to indicate which ability is selected but he let me know he could do this easily within Unity.

Here is the design I came up with in Photoshop (Adobe Photoshop, 2021).

No prizes for guessing which ability is which

I also made sure to keep each ability icon and part of the wheel in separate layers to make it easy to export to PNGs.

Organising those layers

I then passed these assets over to Luke and he then built the weapon selection UI, as demonstrated in this video below.

Video credit: Luke Quinn

References

Adobe. 2021. Adobe Photoshop 2021 (2021). [Software]

2021. Discord. Discord, Inc. [Software]

2013. Grand Theft Auto V. Rockstar North.

Quinn, L., Tsaklev, G. and Waters, J., 2021. Stand-up meeting – Sunday 1st August.

Leave a Reply

Your email address will not be published. Required fields are marked *