Following the initial main menu concept, I created a crude concept of what the settings menu would look like. It was going to be a hollow graphic rectangle that would contain buttons to cycle through each settings menu.

Immediately after sketching for our main menu, I jumped to our settings menu. The constellation idea resonated with me, but after sketching out the first idea for our settings menu, I knew I wanted to expand on how to present constellations.

Subsequent sketches were born from what I had made in-engine this time. I used basic circles to test out different layouts and sketched out the ones that people liked. Eventually, layout three won over those who tested. Once established, I moved to sketch out my expanded idea of constellations; icons. Using constellations to represent each of the settings icons was a novel direction.

Sketches were drawn, testing layouts went by, and now it was time to fill in the details. For my first iteration, I used lines to trace circular stars to form our icons. I was originally going to have nebulas present on these buttons, but after moving over the star clusters, I found the simplified design a better fit here.

Our submenus being primarily comprised of stars was fitting, as it felt as if we were zooming in on our main menu buttons to see the stars up close.

I still wanted the nebula, specifically the one that represented the settings button, to be present. So, I placed a large one as the backdrop. However, this did not test well, as visual clarity was weak. With that, I scrapped it in favor of an alternative for the final iteration.

After playtests revealed that the button layout was intuitive and the visuals were clear and aesthetically pleasing, I landed on this iteration.

I used a sparse cluster of stars as the backdrop. This allowed for further visual clarity while still being pleasing to the eye. However, I still wanted the highlight nebula from the settings button to present to further the connection between the button and the menu. So, I used it to highlight each setting group name.

Once the layout was finalized, I made adjustments to the visuals.

I designed new art for star clusters used to form the buttons and backdrop for the settings. This move followed my desire to utilize UI images for visuals instead of particle systems. With this, I had more flexibility to make the transitions scene in the clip.

The credits menu follows a similar visual and programmatic structure as settings to keep menus consistent between submenus for the player and me.

Our level select menu went through the most radical change of any of our menus. One of our gameplay designers had an idea that our creative lead loved, which was to have our levels be represented through orbs of light that would be physically grabbed and brought towards your chest to select. It was a complicated concept, perhaps more than ideal for simply navigating a menu. It had the player doing something not replicated elsewhere in the game. Despite my concerns, the team liked it, so I designed a prototype to share with them.

It was quickly apparent that this was not going to work out, as my concerns I brought up came to fruition upon testing. We would have to tutorialize using a menu, which is not ideal. From here, I worked on a middle ground approach.

With this design, instead of having the player grab the orb of light, they would use the controller cursor to hover over it (akin to the standard button in Auragami) to press it. Then, the orb would glide towards the player’s chest, and they’d transition to the level proper. 

Testing was much smoother with this setup. That being said, it still felt disconnected from the other menus. Once I was ready to start concepting ways to connect it to the larger aesthetic, our lead programmer showed me something…

…and that was a sketch. It was stars simply moving along a straight line. He desired a modular level select menu where designers could easily add levels without making new assets themselves. I agreed with him and took the skeleton of his idea and began fleshing it out through sketching. 

I already liked the layout, but I wanted to emphasize the level selected in the center. So I turned it from a straight line to a W shape where the selected level would sit at the top point. It would also expand, as the stars sitting beside it would be smaller. When you cycle through levels, it is very apparent which one is selected. 

With the idea solidified, I presented it to our producer and creative lead for approval, and it was approved. It was time to get to work, as this was going to be far more complicated than my other scripts.

I spent time researching and experimenting with a carousel-style setup to have the levels cycle. This was achieved by having each level move between select positions. That was the hard part; now it was time to make it smooth to navigate and implement the ideas I sketched out. 

Just like my other scripts, you can download and view the level select-related scripts.

Once it was done, I was left with something I’m proud of, and testers reacted very positively. Needless to say, the level select became unrecognizable…in a good way!

When clicking on a sub-menu button, the constellation will trace along the stars to form the button icon using sliders.

I created a simple script to attach to every sub-menu button and drop the necessary game objects into said script. The same principle applies to how I tackled menu navigation and the main menu buttons.

Utilizing buttons to interact with sliders instead of the player directly interacting with sliders was fundamental to improving comfort, as sliders can be finicky in VR.

Settings options involving unique mechanics led me to provide tool-tips for players with questions.

All of the menu navigation and button behaviors were scripted by me, as I have mentioned before. I started with crude programming methods that involved long lists of code. Despite getting the job done, I knew there were better ways of handling my code.

I came to understand better methods of handling certain scripts, which led to more efficient code.

As seen above, this script went through a drastic transformation. Instead of showing or hiding the different settings through activation, I created a method that would allow me to cycle through each setting depending on the button pressed.

I scripted all the UI functionality. This ranged from menu/scene transitions, button functionality, and various accessibility settings. I began by carrying over my scripting methods from my last project, Balatro Monopoly, which were admittedly crude. I hard-coded everything, which worked, but it was not very flexible. Despite getting the job done, I knew there were better ways of handling my code.

I came to understand better methods of handling certain scripts, which led to more efficient code.

Seen above is a script that went through a drastic transformation. Instead of showing or hiding the different settings through activation, I created a method that would allow me to cycle through each setting depending on the button pressed. The menu index number I assign to a button corresponds to the numbered placement of the settings menu within the settings menu list. If we want more buttons, scripting-wise, it’s as easy as adding a menu to the list and assigning the corresponding number to the new button.

To efficiently achieve certain effects with the UI, I created simple scripts tailored for mass production. The UITransitionBehavior script above was how I achieved the UI transition effect, where it settles into place. Attaching the script to an object and dragging an object that held the desired position into the inspector was all I needed to do. Of course, I needed to make sure everything was in its right place, but I did not have to do any additional scripting for this effect.

I created multiple scripts similar to this one to achieve the constellation connector fill effect (seen above), fade-in/out effects, etc.

There are too many scripts to go through here, so I assembled my work with comments walking people through how certain aspects work. You can download the zip file HERE and take a look yourself!

A few of the scripts you can expect to see are shown above.

While on a level, the only prominent UI HUD element is what we call an AP Bar. This bar will fill with each aura point the player characters gather from hitting targets.

Each level is comprised of three stages that the player must pass sequentially. To pass a stage, one segment of the bar seen above must be filled. One segment for stage one, two for stage two, etc.

Since each of the two avatars the player controls can earn points by hitting targets, we had difficulty deciding on one or two segmented bars.

For this initial concept, I chose to utilize a single segmented bar.

Once I had designed and scripted the initial concept, I moved ahead and created a more visually appealing version of the segmented AP Bar. From here, I had garnered opinions and tested whether one or two bars were better for clarity.

It was quickly clear that one bar was the superior choice, but another problem that was brought up was the segments within the bar. Players wanted to fill up the entire bar during the first stage, which was unnecessary.

This led to my latest iteration.

No more segments; instead, it would be one seamless bar. I chose to keep it simple visually and have it curve downwards to hug the player’s upper vision to mitigate distraction away from the targets.

Testing proved this was a comfortable and easy-to-read design and position.

Our pause menu was to be akin to our main menu. We wanted to bring the player back to its calming atmosphere and vibes. In a way, we wanted to bring them back to the main menu. 

Since I already had a layout for the pause menu buttons to adopt, I needed to sketch out a backdrop for it. Instead of drawing it out, I went into Photoshop and whipped up a test background to drop in-game. This initial pass was well received, but there was room for improvement. It wasn’t until later that a diamond shape I made for the game inspired the direction for our pause menu.

I had a constellation trace into a diamond that then projected the pause menu with a video of our main menu environment serving as the backdrop. The shape and overall style were far more consistent with the rest of our game and UI, making this a worthy iteration. 

Overall, the process for this menu was shorter due to my experience with the rest of the game. I took the design and applied it to another menu.

Initially, I used the first iteration of our pause menu as a stand-in for a level progress menu. Once the final iteration was finished, I worked on this menu. A similar shape with some returning buttons, but we wanted to visually present the player's progress. Cuphead was thrown around as an idea, and I found it to be a perfect fit. In that game, if you die, a linear map is drawn of how far you were from killing the boss.

Once Cuphead’s approach was brought up, I immediately knew how it was going to look. Using stars to trace between felt very appropriate, so I got to work on the design and scripting its functionality. 

The setting is completely dark, but is punctuated by the bright light of the splash images. It’s a bit eerie, but the images slowly fade in and out, putting the player’s mind at ease. This is how I wanted to set the game's tone. Mysterious, yet calming; a place to meditate.

I was the designer behind our tutorial, but on the UI side, I wanted the slow fade-ins/outs to continue. Once in the tutorial, text would subtly enter the scene and exit to explain the various mechanics to the player. All this was an initial concept that made it into our final iteration.