User Interface — A Different Kind of Bartender

Low and behold that on day 41 of my journey from Bartender to Software Engineer — I became a bartender again.

But not in its, traditional sense. I’m talking about this kind of bars:

Gotta tend to THESE bars.

Yep, today I decided to try and tackle the world of User Interface, more commonly refereed to as UI or GUI. While this task is no small one and requires multiple types, I first decided to try and create a Main Menu screen for the super secret code-named project, Nova Star.

As you can imagine, it Nova Star-ted out… like the aforementioned pun, a little bit of a disaster. While it may seem pretty simple and straight forward, there’s a lot of planning that goes into graphic design and aesthetics. I, personally really enjoy this part of planning and execution, so I kept going over so many logistical questions and researching a lot of assets and possible layouts that I wanted! The possibilities were endless!

Naturally, I sort of overwhelmed myself. I took the advice of one of our leaders and went back to a plan for a MVP — Minimal Viable Product FIRST, before going into the bells and whistles, and as it turned out, as I searched the files that we were provided with… there was already a basic Main Menu scene I could start with!

The Options Menu — Default Main Menu Scene

This was actually perfect! I need to pull myself back and get into a better headspace on this issue anyways, as this was just one of 4+ possible UI menu’s the team and I would have to eventually design and execute. I wanted to of course put my own spin on it. First though, I had to figure out how to make these sound level and brightness gauges into intractable and functional UI elements — something I’ve never done before.

Googling, how to UI for Unity and UI elements for C# yielded a ton of varied results, ultimately, I decided to make my own slider bars from scratch for a very clean minimalist look. I took some inspiration from the color scheme presented and landed on this look, so far:

Clean, minimalist — and intractable!

The slider bars are all animated and intractable through mouse input and to keep with the minimalist look, I opted to keep invisible handles on the sliders themselves. Using code, I then hooked up the volume slider to the volume mixer, to which I’ll be funneling the game audio though, something I’ll need to look into more, when I need to keep the audio at a constant level though the game, though I’ll probably put a slider in the pause menu as well to adjust volume, as I do love it when games include that.

All that’s left to do now for the main menu is to clean up a few more things, change the aesthetics to match throughout, and perhaps add an extra functionality for some bonus content that we decided to include as a team. After that I’ll be moving on to the next UI screen, each one holding its own content and challenges. All in all, though I feel like I could have accomplished more, I’m glad I didn’t try to rush it, and got through making exactly what I wanted for this aspect of the game. I took some time to make a lot of these features modular, so they can and probably will be easily edited as things evolve and change. The dynamics of this industry is just that — dynamic. Patches, features, new content is always coming out, so ensuring that my code, and assets are all easily editable was very important to me while setting this all up. Even my custom made bars can be resized and keep aspects and values, though they are three separate parts per bar.

Interactive Menu Demo — Earlier iteration.

I’m really looking forward to what this project will become, as some of the features I’ve seen my teammates doing, have been phenomenal to say the least. I’m truly lucky to be a part of this talented team, and excited to see what tomorrow will bring from these creative minds.

Until then,

Gotta go!

— Ryan

Love for Baby Yoda is Manda-torian

Ambitious Software Engineer at GameDevHQ.