UI Polish

 Author: Yashwant Patel

The main thing that our game was missing in the last week was polish on certain things. One of the largest thing that we were missing was replacing the placeholder with final UI assets. This would make the game feel more complete and the player would appreciate the game with a finished UI.

Since I was working on UI I had an advantage, because I didn't have to go around searching for UI packs since finding assets that you exactly want can be hard. Instead I mostly made everything from scratch with the exception of some elements that I got from freepik.com and modified them to what we needed. The main challenge I faced with the UI was getting everything how I liked. I didn't really use Unreal's tools for UI before in terms of properly structuring the hierarchy for UI elements and properly wrapping everything to have it behave how you want it to, so this took a day to get used to. Another thing that needed to be done was reprogram the UI since the old UI was programmed quickly to get it up and running, so a lot of new functionality needed to be added. For example we didn't have base button or slider widgets, so they needed to be implemented. Another thing is we didn't have escape take the user back one menu, so that functionality needed to be added in. I also wanted to add some dynamic elements to the UI background such as cutscenes, so I had to create some new cutscenes for the player menu and the win screen as well. For the design of the UI I decided to take inspiration from the new God of  War games and integrate a sleek and simple yet elegant UI. Our tutorial system already had UI that took inspiration from God of War, so I decided to continue making assets that would fit that aesthetic.

I mainly used this picture for the main source of inspiration when designing the UI.

For the main menu I wanted something similar so I took a gradient and made custom button widgets that would show an image when hovered, hide it when unhovered, change when clicked & pressed. The hitbox for the button was only the text and not the whole image, so I needed to make a custom button for this. Another thing is I wanted the player in the background similar to Kratos, so I created a level sequencer and used two green screen this time in order to integrate the game name into the environment behind the player. In photoshop I made the text and edited the videos with the green screens. Another thing I wanted to do is layer some noise on the main menu using the different channels we have, so the player knows what the it will sound like when the sliders in the settings are changed. I added an ambient sound for the birds chirping and the player saying voice lines is in the sound effects channel. The player will say a random voice line every x seconds during the cutscene. The video itself also has some audio, like the player reloading, hat spinning, and the easter eggs of the water boss orb and storm boss lightning. 

Before

After (mp4 was too big)

(Might need to turn up volume if sounds are too low)

For the settings menu I added some more sliders for the different channels and hooked them up. 

Before

After

For the controls menu I recolored the keybind buttons to match the other yellow highlights we had for other UI elements. 

For the game over screen it seemed kind of awkward trying to place a quit and main menu button properly since most of the screen was going to be empty, since we didn't have a system to display any kind of stats or anything. Due to this I decided to remove the quit button and place the back button bar at the bottom of the screen, since the player can either force close the application or quit from the main menu anyways. For the message I decided to put "The end has come..." in a bokeh text effect in order to match the core explode particle. 

Before

After

(Might need to turn up volume if sounds are too low)

For the player win screen I wanted to do a similar thing to the main menu, but I also wanted to add Kugo along with the player. I used the same green screening technique as the boss and main menu cutscenes. Just like the main menu I layered three different noise channels. The cutscene itself, the character voice lines and some ambience. I wanted to having rolling credits to show, so after making the credits menu I integrated it into the player won screen.

Before

After 

(Might need to turn up volume if sounds are too low)

Similar to the main menu I wanted to blur the background and in Unreal it's way easier than Unity since it's a simple widget that you can add. Another thing is I used the 4waychoas node to have a panning cloud effect on the pause menu, so there was a little more flare to it.

Before

After

Lastly I touched up some other UI like the confirmation box for quitting the game and deleting a save. Also the player upgrades tool tip had a background added and the shape of the images were changed to circles.