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%
Other 2.07%  

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.

Frostpunk 640x480

Players can choose 640x480 from resolutions settings, but the text in-game is illegible.

Compare this to Civ IV, which is readable at its lowest-supported resolution of 1024x768.

Civ IV 1024x768

Even at the relatively low resolution of 1024x768, text is crisp, legible, and all elements are visible on-screen in Civ IV.

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.

In Unreal

The process in Unreal is pretty straightforward. We will go into greater detail on each of these below:

  1. Design the UI to work at the lowest-supported resolution.
  2. Make the source textures at the highest-supported resolution.
  3. (Optional) Set DPI scaling rules to scale in the preferred way.
  4. (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.

By that, I mean as you are composing your UI, you should be doing so at your lowest supported resolution. It is far easier to design at minimum resolution and add elements in at larger sizes, than the opposite. Your game should be functional at the minimum resolution:

  • All text should be legible.
  • No UI elements should be overlapping.
  • No text should be breaking out of its containers.
  • Text should be tested with at least +30% longer than the base English, to test localization.

Going back to the results of the Steam Stats Survey, you will need to decide what is the minimum resolution you wish to support. For Industries of Titan we chose 1280 x 720 as it had the broadest coverage without being impossible.

With the minimum resolution chosen, 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).

Creating the main UI at 1280x720

Setting the display resolution to Custom and 1280x720 displays the widget at that resolution.

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.

Make source textures at the highest-supported resolution

It's important to understand that while you will be designing your UI to be functional at a small resolution, a lot of players will be playing at much higher resolutions. In 2023, 4K is usually the highest you can expect to support.

In Unreal it's possible to set UI elements to scale up based on a DPI curve (covered in the next section), UI textures are scaled up along with any text. If you author your UI images at your minimum resolution, they will be blurry and ugly at your maximum 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

Project Settings > User Interface > DPI Scaling > DPI Curve

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).

Example stepped DPI curve

Creating a curve like this would make the UI be scaled by 1.0, 1.5, 2.0.

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.

Testing the UI in a window

Choosing Play In New Editor Window and dragging to resize the window shows how it is scaled across different resolutions.

Scaling with custom stepped DPI curve

Using the custom stepped DPI curve shown above, the UI is scaled by 1.0, 1.5 and 2.0 as Y height increases.

To make the Editor window start at a specific resolution, change the settings under:

Editor Preferences > Play > Game Viewport Settings

Setting default PIE Window resolution

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.

Setting UI scale

Setting the UI to always be scaled by 50%.

UUserInterfaceSettings* UISettings
	= GetMutableDefault<UUserInterfaceSettings>(
		UUserInterfaceSettings::StaticClass() );

UISettings->ApplicationScale = 0.5f;

For a full tutorial check out Changing UI Scale in Unreal Engine.