0.0.10 Menus and game-wide user interface additions

On the theme of trying to be clever, this time was allotted to creating a UI framework in Unity, from scratch. This took 2 and a half months, and was honestly awful. Trying to understand in-depth the way Unity's UI works was in itself a challenge. I wanted to create a one-size fits all UI framework I could slot into any game I create in the future, seamlessly with a simple package install

Package Manager

First I had to understand how to use Unity's Package Manager. It's awesome. It took a while to get a handle on it, but when I understood how it all worked and how to link things up, it's super convenient. I recommend installing packages via the store or git URL's. Don't install them manually via a local install else I found things can get messy, especially if you work off multiple computers on your project.

I started by creating a small micro package called Bubble.Debug, which is basically a wrapper for Debug.Log. It allows me to effectively debug and stack trace with additional tools. I can hide all debug logs of various error levels and highlight certain messages I am trying to find. It also links in the Editor which GameObject (if applicable) that the error originated from. Nothing extravagant or fancy, just something to make Unity's Debug.Log even more useful. I then added this to all of my projects and performed some updates to see how it would act. Setting up the package.json file was a challenge but made sense the more I did it. 

Bubble.UI

I then started work on the UI framework itself. I opted to have a ThemeManager that captured the colours for various semantics, and allowed them to be assigned to a UI_Visuals component. For example I had a GameObject with a component called a UI_Button - the ThemeManager would have an ElementDesign called a 'MenuButton' which I would assign on the UI_Button. The ElementDesign would have all of the graphics that every UI_Button of type 'MenuButton' would show, and the assigned ColourTheme would assign a semantic; 'Positive', 'Negative' etc. This made for making quick repetitive UI menus and designs easy. But repetitive menu designs are boring. The more I used the framework (bare in mind this took a massive amount of time to create) the more I realised that having designs for common elements was a bit silly, as I wanted in most cases to create unique and interesting designs to keep the menus feeling fresh. In the cases I wanted common designs, Unity's prefab system was enough, and far easier to implement.

That said I have made some great, tactile UX decisions when creating some of the more complex elements in the menu design such as selects, toggles amongst other things. All of it feeds into a localisation system, tooltip managers, state based menus and more. This was a massive piece of (frustrating) work, but I've learned a lot about how Unity interacts with it's UI. As an experiment it was a massive success, but I will definitely need to do a v2.0 at some point to streamline the entire process.

Verdict

Pros

• Easily link up localised labels to elements
• Select, Buttons, Toggles and other custom made elements are easy to read and have good UX
• Colour themes are a good idea, but poorly executed
• Menu navigation is super straight forward and can be done without code, even to new scenes
• Loading transistions are super slick
• Tooltips are built in to the UI_Text component
• Menu and sub menu hierarchies can be linked, shoulder buttons can navigate through tabs and the back button will take you where you expect
• PopUps and notifications are easy to use and configure
• Text and sequential animations are quick and easy to set up, they also look cool!
• Fully working, basic Settings menu to cater for all use cases

Cons

• ElementDesign pattern is super clunky and overkill for most use cases
• A Theme with many ElementDesigns can be very slow
• Localisation, while cool, can be difficult to trigger at the correct time
• Getting text and element animations to happen in a particular sequence can be difficult

Am I pleased with the result? Kinda? Some of the designs have been great, it does make creating complex and accessible UI quick, but some sticking points can be frustrating. I have some ideas with how I want to expand the concept further, perhaps leaning into Unity's prefab system more, and allowing UI_Visuals to have a list of different coloured elements to make the system a bit more flexible. I am actively maintaining and improving it so overtime the system should improve. The Settings menu that is bundled in is fully featured, and will save days/weeks developing time for every future game that I create.

Scenarios/Arcade

Back after the biggest segway ever creating an entire UI framework; after integrating it with PS:E the ball was rolling again. I created a PS:E styled theme and started adding some basic menus to help start the gameplay cycle. One of which is a Scenario (now called Arcade) menu, where preset scenarios can be easily be played and repeated. This of course was built for debugging in mind, to play certain scenarios for testing - but also makes sense for an Arcade style, quick jump mode. Really pleased with how the menu turned out, and allows for expansion the more scenarios get created. The intention is to have this mode as 1 of the 3 singleplayer modes - on completion of a scenario the player gets a reward. This could be a special livery or booster for example.