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:

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.

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

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.

• Author your images to look good at 4K.
• Create a custom texture group and enable mipmaps so that when the textures are displayed scaled down at your minimum resolution, they are not all jaggedy.

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* UISettings
	= GetMutableDefault<UUserInterfaceSettings>(
		UUserInterfaceSettings::StaticClass() );

UISettings->ApplicationScale = 0.5f;

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