Creating Resolution-independent UIs in Unreal Engine 4

Design at lowest resolution, scale with DPI Scaling and Custom Application Scaling

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 at the lowest-supported resolution.
  2. (Optional) Set DPI scaling rules to scale in the preferred way.
  3. (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).

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.

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.

Set UUserInterfaceSettings::ApplicationScale to the user's chosen custom UI scale as shown below, and the UI should immediately update to reflect that scale.

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.

Setting UI scale

Setting the UI to always be scaled by 50%.

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

UISettings->ApplicationScale = 0.5f;