Choosing a minimum resolution
The Steam Hardware & Software Survey is a great source of data when deciding what to minimum resolution to support.
If we reformat the data for Primary Display Resolution into a table showing cumulative numbers, sorted by Y resolution we get this:
Steam Stats Primary Display Resolution
Data as of 2020-06-07
|Resolution||Percentage||Percentage of users
with this resolution or higher
|1280 x 720||0.39%||97.92%|
|1024 x 768||0.39%||97.53%|
|1360 x 768||1.60%||97.14%|
|1366 x 768||10.91%||95.54%|
|1280 x 800||0.72%||84.63%|
|1440 x 900||3.40%||83.91%|
|1600 x 900||2.65%||80.51%|
|1280 x 1024||1.27%||77.86%|
|1680 x 1050||2.07%||76.59%|
|1920 x 1080||63.51%||74.52%|
|2560 x 1080||1.13%||11.01%|
|1920 x 1200||0.83%||9.88%|
|2560 x 1440||6.06%||9.05%|
|3440 x 1440||0.82%||2.99%|
|3840 x 2160||2.17%||2.17%|
For example if we make the UI work at 1440 x 900, it will also work at all larger resolutions simply by scaling it up. Reading the table above, if we support 1440 x 900, roughly 84% of Steam users will be able to play the game without visual issues in the UI.
In comparison, if the UI is designed to only work at 2560x1080 or greater, only 11% of Steam users will be able to play the game without visual issues in the UI.
While it’s possible to scale a UI down to support lower resolutions, it starts to look pretty ugly and there’s no guarantee that text will be readable. For an example of this, Frostpunk allows the player to set their resolution to 640x480, but the text is completely illegible.
Compare this to Civ IV, which is readable at its lowest-supported resolution of 1024x768.
Going back to the table, if we design the UI to work at 1280 x 720, it will support roughly 98% of Steam users, so I personally recommend supporting this.
The process in Unreal is pretty straightforward. We will go into greater detail on each of these below:
- Design the UI at the lowest-supported resolution.
- (Optional) Set DPI scaling rules to scale in the preferred way.
- (Optional) Allow players to set custom UI scaling.
Design the UI at the lowest-supported resolution
The workflow for actually creating the UI in Unreal should be the same as normal, composing the UI with widgets and custom UserWidgets. However the key change is to design the UI at the lowest-supported resolution.
Based on the percentages of users at each resolution, if 1280 x 720 is the chosen minimum resolution for the game, the first thing to do is set up the UMG widget designer interface to that resolution.
Choose Custom in the top-right hand corner of the designer view, and then type in the desired resolution, in this case 1280 and 720 (see screenshot).
For individual widgets that are composed into others, this isn’t necessary, but for anything that will be displayed full-screen, make sure to set up the custom resolution to ensure everything fits at the minimum resolution.
Setting up a DPI Curve
By default, Unreal will scale the UI in a fairly sensible way as the resolution increases. It is not required to set up a custom DPI curve but playing with the settings will help you understand how the UI will be shown to players at different resolutions.
The settings for the DPI curve are under:
Project Settings > User Interface > DPI Scaling > DPI Curve
Pay attention to the DPI Scaling Rule setting. This is what is used in the Y-axis of the DPI curve. It defaults to “Shortest” which in portrait monitors would be the vertical resolution.
Setting a custom DPI curve allows more control in how the UI will appear at different resolutions. One option is to force the UI to be scaled by specific stepped amounts, for example 1.0, 1.5, 2.0 (see below).
Testing the UI at different resolutions
I’ve found the easiest way to see how the UI scales across different resolutions is to start the game in New Editor Window and simply resize by dragging the window.
To make the Editor window start at a specific resolution, change the settings under:
Editor Preferences > Play > Game Viewport Settings
Allow players to set custom UI scale
Depending on their monitor, game resolution and eyesight, players may prefer to scale the UI up or down. Luckily Unreal makes this super easy, and it works in tandem with the previously-set custom DPI curve.
UUserInterfaceSettings::ApplicationScale to the user’s chosen custom UI
scale as shown below, and the UI should immediately update to reflect that
Note I’ve seen this behave slightly oddly in the editor, but playing in builds works as expected.
Make sure to to save the player’s chosen UI scale in custom User Settings.