Settings Redesign

Because I had created my own Combo Box, I decided to redesign the settings screens with it, as the only elements I need to create now are Sliders, Spin Boxes, and Input Key Selectors, none of which are used outside the settings screens.

The first to be finished is the Replays screen, as it has the least information, which means I can get used to how the layout works before changing the complex screens. The key design concepts here are:

• Title

• Separation bar

• Setting name with value on the right

Each setting is a strip, very similar to CS:GO and Valorant, and many other games actually. It's quite a common layout. For some odd reason, I had most things in Grid Panels, which meant I had to completely redo the layout panels with Vertical and Horizontal Boxes, and some Size Boxes to keep the scaling consistent.

Next was the Audio screen, where I wanted to have a Slider and a Spin Box for the same value, so that the user can either drag the Slider, or input a certain value to be more precise. This means they need to be mutually exclusive so they both retain the same value.

Luckily, both the Slider and the Spin Box have events for On Value Changed, which I used to set their values to themselves.

This makes them more or less mutually exclusive to each other. The Round Decimals function is one I created as an easy, reusable way to round floats using the Truncate function. I rounded the Slider's value because without it, the Spin Box would show a value to six decimal places instead of two.

The function itself is very simple:

It's just a convenient, reusable rounding function which is in a Function Library, so it can be used project-wide without the need for casting and what-not.

After this I did the Controls screen, which didn't change much as it relies mostly on the user of the Input Key Selector instead of the Combo Box, but I did redesign the Mouse settings portion as that was using a Grid Panel and I wanted to keep it consistent so I changed it for a Vertical Box:

The Video settings was the longest to redesign, purely because of the amount of options there, and the already large amount of functionality it has. This screen was the main reason I made the custom functions and events that my Combo Box has in the first place. In terms of functionality, it's the same, but in terms of layout and visual style, it's very different:

I made the "keep it simple" idea more prominent, as the Advanced settings are no longer at the bottom in a Grid Layout, they're in a different Widget Switcher Index altogether. It means I can now make it use a Vertical Box instead of a Grid Layout, and can also present the information in a much easier to digest fashion thanks to the screen space:

Overall I think it's a big improvement, and so does everyone else I've asked. However there is still one big obstacle to tackle. The Multiplayer settings. This is by far the hardest and most convoluted layout, which means in my redesign, I'm having to constantly be thinking about the best way to lay it out and the best layout methods to use. Before I used a Grid Panel, but now I'm wondering if that was a good idea. I decided to go with the Expandable Area approach, seeing as it will also contain a lot of settings, being able to expand and collapse sections makes it easier for the user to choose what they see. I also decided to rename the tab to "Game", as not all the settings here are just for the multiplayer aspect, like the HUD and Crosshair, which persist in the Campaign also, so calling it multiplayer seems a bit misleading.

I remade the crosshair settings to be more like CS:GO's, as that has more options, as well as a far better layout than CS:S. It's also in a similar vein to Valorant, as there are saves for different crosshairs to it's easy to switch between them.