UI Art

The Ceros Project

This week I worked on improving the UI. First I made a concept for what I wanted the HUD to look like (taking inspiration from the HUDs of games like FTL). I then worked on making some basic UI boxes. To do this I needed to make a custom 9-slicer material as I needed the outlines to stretch independently of the backgrounds while the background remained within the bounds of the border. The material I made ended up lost due to Unreal crashing and me not saving frequently enough. I decided not to remake it since it was a huge node graph and was flawed in that it could only stretch properly in one direction at a time. Instead, I decided to make it by manually cutting the image into the 8 edge segments and then using a material to fill the background using screenspace UVs and then doing the 9-slicing via grid layouts in the widget. This ended up being far more flexible anyway since it allowed for different corner types to be swapped out easily and be used to create a variety of borders without having to open Photoshop.

I then spent some time replacing all of the old HUD with the new art. It was mostly a matter of changing the layout though I also made some minor improvements and refactoring to some of the backing code.