My notes on improving your typical "Video Settings" screen UI/UX

[exogen]

Hello devs! I thought I’d post about my process and learnings while creating a good Video Settings screen for my project. I watched a bunch of YouTube tutorials on this, and they mostly put in bare-minimum effort to get something working, didn’t have great UX, and the results were pretty unpolished. Which is perfectly fine for tutorial content, but I thought I’d give people some advice on making theirs better! The level of polish in your menu system definitely reflects on the quality of your game.

Here’s the menu, I am only really concerned with the Screen section here:

Here’s various bits of advice for implementing good UX here. In no particular order:

• When using Get Supported Fullscreen Resolutions, you should first compute the aspect ratio of the user’s screen using Get Desktop Resolution, then filter the list to only resolutions with a matching aspect ratio. UE is perfectly happy to render the game at aspect ratios that will be stretched/distorted on the user’s screen, and you probably don’t want users to accidentally pick one and make your game look bad. (Not only is it a waste of their time to then pick a different one, but some people might not even notice if it’s slightly off, and just wonder why the game looks ugly.)
• When using Windowed mode, I recommend ignoring Get Convenient Windowed Resolutions entirely, as the resulting list is vey small and excludes a lot of perfectly fine windowed resolutions the user might want to select. Instead, use the same output as Get Supported Fullscreen Resolutions, but exclude the highest resolution (that matches the user’s screen… because the whole point of windowed mode is that it’s smaller than the screen).
• When in windowed mode, you don’t want to do the aspect ratio filtering I mentioned above, because if the game is windowed, there’s no need to match the screen’s aspect ratio. However, the list will likely include a lot of random, whack-a-doodle aspect ratios. A lot of the options in my list, for example, were nearly identical to other resolutions with just a dozen or so pixel difference. The way I handled this was to have a whitelist of known/common aspect ratios, and for windowed mode I only show resolutions that match one of those. See screenshot below:

• In the selectable resolution list, show the aspect ratio (see above)! Users might want a particular one and shouldn’t have to guess-and-check.
• You’ll notice one of the options on the menu is Window Scale. This controls r.ScreenPercentage, or as Blueprint calls it, “Resolution Scale,” but is the inverse. This lets the game’s render resolution still be something low like 720p or 1080p, but not have the window be super tiny on a large screen. So, it works just like the Scale and layout setting in the Windows control panel. This will make much more sense to users than Screen Percentage, because they’re thinking “I know my video card can handle rendering this game at 720p, but I want to scale the window up by 175%”, NOT “I want the window to be 2240x1260 and scale the render resolution down to 57%.” It’s worth it to do the extra work and make this setting intuitive and not confusing.
• So, what you’ll have to do when doing Set Screen Resolution in Blueprint is multiply the selected resolution by your Window Scale, and then set Screen Percentage to the inverse of your window scale. That way the “screen resolution” is the actual window size at a 1:1 pixel ratio, but the game’s “render resolution” is scaled down to the screen percentage.
• In Fullscreen and Windowed Fullscreen (Borderless) modes, the Window Scale option should be disabled. In Fullscreen it will always be 100%, and in Windowed Fullscreen mode it is determined automatically (to exactly cover the entire screen).
• Whenever a different resolution is selected, the largest selectable Window Scale might change (because scaling it up too much could result in a window larger than the user’s screen). So, make sure to update its maximum value and adjust the currently selected value to be within that new range.
• Using Set Screen Resolution when using Windowed Fullscreen (what I call Borderless mode in the UI) is somewhat broken in UE. It seems to completely ignore your requested resolution and just sets it to the screen’s native resolution instead. This isn’t technically wrong since the window is indeed that size, but what it should do is automatically adjust the Screen Percentage for you so that the window is fullscreen but matches your requested render resolution. So, you should just let it take care of the resolution, and set the Screen Percentage manually yourself instead.
• When switching between window modes, it’s possible that the currently selected resolution isn’t a selectable option anymore. So what I do is calculate the resolution difference (just the sum of the width and height differences) and automatically select the one with the smallest difference (which could be 0 if the same resolution is available in both modes). That way, the newly selected resolution is as close as possible to the previous one (and importantly isn’t null which would show nothing selected).
• For the Field of View setting, I used a Camera Manager and Camera Modifier to ensure this value was used by default on all cameras. That way, I don’t have to find every single pawn with a camera in my game and update the individual camera FOVs to match, and default/existing pawns like the Spectator class just automatically get the custom FOV, without me having to go in and fiddle with it.

Hope this helps someone!