Prototype - UI System

Intro

This UI System was made as a small project as part of the "Programming Systems and Architecture" mission on Unity Learn. I'm publishing this to show my approach, thought processes, and decision making during development. I try to keep these short and concise, if you have any further questions or feedback, I'd love to hear from you! Reach me on Twitter at @PhilipDrobar.

Requirements for this:

• Start Menu (this may load into an empty scene!)
• Options Menu
• Adjustable Font size/color
• Audio volume (you may have background music, or this can be tied to the volume of audio clips attached to UI components such as buttons)
• Light mode/dark mode (Changes the color of the UI)
• Exit application button (note that this won't work on the Webplayer)

My own goals:

• Make it responsive
• Controllable with keyboard/controller.
• Make elements include/excludable from DarkMode/Theme switching.
• Flexible and scalable, as in easy to add buttons, menus, and submenus.

Total time: about 6 hours from scratch.

My approach on...

Dark Mode / Theme switching: This was a bit tricky, as I've never done a theme-able UI before. I knew I wanted to be able to exclude elements from theme-ing, so I needed to be able to grab the different UI elements dynamically, while also not having to manage a lot of references.

In the end, I created a small "WindowThemer" script, which attached to CanvasGroups. All child objects within it that are tagged "Themed" will get influenced by the theme setting. The change itself is controlled by an event.

This way, the UI elements are all cached in Lists separated by Menus, meaning the theme switching shouldn't be to resource costly. This also allows me to make sure different UI components are treated differently in the script.

Navigation:  I made sure that the menus and submenus can be navigated with the keyboard/controller by setting all button navigation explicitly. I also created a small NavigationButton script that makes sure the right button is selected when menus open and close.

What I would do next to improve this prototype:

• Separate MainMenu functionality and UI Managing into two separate scripts, in the interest of speed I kept them in one.
• Create a proper GameManager to do a proper transition to the Play scene and Instantiate/Destroy the MainMenu.