Scale UI for Different Devices

It is recommended that you have a general understanding of the UMG UI Designer before proceeding with this How-to.

When working on the UI for a project, you may already have a targeted device in mind that you intend to release your project on. In fact, it may be multiple devices or platforms that you intend to release your project on. This is where automatic resolution-independent UI scaling using the DPI Scaling rules comes in to play.

In short, this option allows you to define a DPI Scale Rule (which is used to decide what scale to apply) and a DPI Curve (which contains the different resolutions and the respective scale values that you can define) to automatically scale your UI elements based on those varying resolutions. This makes it quick and easy to translate your UI screens from devices like a phone to a tablet or a PC, with a range of other screen resolutions.

In this how-to, we will walk through setting up the DPI Scale Rules for a simple UI screen so that we may deploy to multiple devices.

Steps

For this how-to, we are using the First Person Template. However, you can use any project you wish.

  1. Create and open a Widget Blueprint .

  2. On the Designer tab, take note of your current DPI Scale in the lower-right corner of the Visual Designer window.

    WidgetBlueprint.png

    Typically it is best to work on your UI elements in a scale of 1.0 and use the DPI Scaling Rule to scale up or down your UI elements.

  3. Click the Gear icon to open up the User Interface Settings window.

    OpenUserInterfaceSettings.png

    You can also access the User Interface Settings from the Project Settings of your project.

  4. Under DPI Scaling, choose the DPI Scale Rule you prefer to use (we are using the Shortest Side of the viewport).

  5. On the DPI Curve find the key which reflects a scale value of 1.0.

    Scale.png

    Our project is set up such that 1080 is our 1 scale, but we are going to change this.

  6. Back in our Widget Blueprint on the Designer tab, click the Screen Size drop-down menu and select Apple iPhone 6 (Portrait).

    iPhone6Screensize.png

    We are going to say that the iPhone 6 is our target device for this guide. In your project, you can use whichever you wish.

    Once you select a Screen Size you will see the Visual Designer window update and reflect your working screen size.

    VisualDesignerUpdated.png

    With our DPI Scale Rule to use Shortest Side, since an iPhone 6 (Portrait)'s shortest side is 750, this will be our 1 scale.

  7. Back in the User Interface Settings for the DPI Curve, set your Resolution to 750 for your 1 scale.

    UpdatedResolution1.png

    You may notice that the value entered adjusts and you see something to the effect of 750.000061. This could ever so slightly shift some of our UI elements as we start to move between different resolutions, so we are going to provide a resolution range at which we will use 1 scale for our UI.

  8. Set the Resolution for 1 scale to 749.

  9. Hold Shift and Left-click to create another key in the graph, then set its Resolution to 760 and Scale to 1.0.

    SecondKeyAdded.png

    Above, we've zoomed in so you can see our range. You could increase or decrease this range as you see fit.

  10. Return to your Widget Blueprint and notice that the DPI Scale for iPhone 6 (Portrait) is now 1.0

    UpdatedScale.png

  11. Select the Screen Size drop-down and select a different aspect ratio (for example, Samsung Galaxy S4 (Portrait)).

    S4Screen.png

    The DPI Scale value will change. In order to correctly scale our UI to this aspect ratio, we can take our desired resolution's shortest side (1080) and divide that by our target device's shortest side (750) to give us the scale value of 1.44.

  12. Back in the User Interface Settings for the DPI Curve, hold Shift and Left-click and create two new keys.

  13. Set one key's Resolution to 1079 (Scale 1.44) and the other key's Resolution to 1090 (Scale 1.44).

  14. Repeat steps 11 through 13 for each of the devices you plan to support.

This will automatically scale your UI elements based on the rules you define in the DPI Scaling settings. You may still want to look at working with Anchors if you are placing widgets and they are shifting off-screen as you may need to anchor your widgets to locations in the viewport.