Menus, Menus, and More Menus

The next task to complete was getting the menus in order. We had a couple of tasks to complete:

• Add a settings menu to the Main Menu
• Add a settings menu to the Pause Menu
• Add music to the Main Menu
• Make the Main Menu the starting scene
• Fix some scaling issues on a couple menus
• Removing the "Quit" functionality

Adding a Settings Menu

The settings menu was the biggest task that needed to be done, so I started on that. I needed to make a slider for each of the different volume controls and I wanted it to match the current UI style that Andrew had put in.

Here is the sprite for the menu panels. It is very angular with 90 degree corners.

I attempted several different interpretations of the above style and they didn't quite work out. One of the deceptive things about the established style is that it is "pixel perfect" and looks really good if you are only going vertical or horizontal (or stair-stepping diagonally). As soon as you want to rotate the design any, the aliasing goes bonkers and it loses its "crisp-ness".

I liked the thick solid lines in the original design but if I wanted to make it look the same when diagonal the resolution would need to be much higher than I really wanted this sprite to be. I ended up sticking to making sure that all of the lines were vertical or horizontal. This was difficult because a slider doesn't have a lot of vertical real estate for designs, as they are typically long and skinny. I landed on using the hollow square and dot motif from the original design. The sprite for the slider background below looks a little wonky because it is set up as a 9-sliced sprite so it will dynamically adjust as the slider is resized.

Here is what it looks like in engine with the background, a "fill" bar, and the thumb.

And here it is with the full settings screen.

Learning About the Audio Mixer and PlayerPrefs

A big part of making the settings screen work is for the sliders to actually change something in the game! It was pretty straight forward to get the sliders changing the value on the Audio Mixer. I have not really used the Audio Mixer before, so I followed this tutorial by Kap Koder to figure out how to work with it programmatically. It was very easy to follow and I was able to get my levels changing in real time!

The problems started when I wanted to save their settings so if they came back to play (one can hope!) it will be where they left it. I have never used PlayerPrefs but I heard they were generally to be avoided. However, looking into them more, it sounded exactly what I needed. These values are literally player preferences and not tied to any state/game data. It was also readily supported on WebGL out of the box...bonus!

I wanted to keep access to the PlayerPrefs encapsulated, so I made a data access manager with discrete methods on it for getting or saving the volume levels. This also allowed me to keep a easier-to-use interface to use, since I could take in the VolumeType enum that contains all of the volume types we support (e.g. Master, Music, Sfx, UI, and Voice). It made it much nicer to use elsewhere and it also allowed a consistent naming scheme for the PlayerPrefs keys. That would be useful if we ever expanded what settings we offered to avoid key conflicts.

public float GetVolume(VolumeType volumeType, float defaultVolume)
{
    var prefKey = GetVolumePrefKey(volumeType);
    return PlayerPrefs.GetFloat(prefKey, defaultVolume);
}

public void SaveVolume(VolumeType volumeType, float volume)
{
    var prefKey = GetVolumePrefKey(volumeType);
    PlayerPrefs.SetFloat(prefKey, volume);
}

private static string GetVolumePrefKey(VolumeType volumeType)
{
    return $"Volume-{volumeType}";
}

While it was working when you changed the slider values, it still had an issue where the sliders would initialize to the right value but the actual mixer would still be at the default level. Changing a slider after it was initialized adjusted the mixer as expected though, so it was extra weird. For instance, if I changed the Music slider to 50% both the slider and the mixer channel would change to be 50% volume. If I then quit the game and came back in, the slider would initialize to 50% but the mixer would remain at the default 100%.

It was stumping me but I had to head out to D&D so it will be tomorrow's problem.

Other Menu Changes

While working through the settings menu stuff I also refactored some of the code to remove the quit buttons from the various menus. When I was testing the web build the other day, I realized that the quit buttons didn't do anything except confuse the player. You can't really "quit" a web game. I removed the quit button from the Main Menu and End Game scenes and converted the quit button on the Pause Menu to direct the player back to the Main Menu. The End Game scene already had a button to go back to the Main Menu, so I left that in.

I didn't get to the following tasks either, so those will also be tomorrow's problem!

• Add music to the Main Menu
• Make the Main Menu the starting scene
• Fix some scaling issues on a couple menus