In UMG (or for Play-in-Editor settings), the screen sizes chosen are now linked with Device Profiles which also takes into account the Mobile Content Scale Factor, meaning that the final resolution and DPI scale will change based on the selected device.
To test the screen resolution of a device, use the UMG Designer viewport to select the Screen Size dropdown and select from the listed devices.
If the device supports screen orientation, like a phone or tablet, use the Portrait/Landscape button to swap between the two view modes. This option will be grayed out when the device selected doesn’t support orientation shifting.
Here is an example of the two view modes:
Left: Landscape, Right: Portrait
When a device is selected, relevant information and marked “unsafe” zones will be displayed in the Designer graph.
- Marked “Unsafe” Zones
- Device Details for Mobile Content Scale Factor, Device Name or Uniform Safe Zone, and Screen Size
- DPI Scale
For non-uniform safe zones, you can use the Flip button to simulate device rotation for Landscape mode.
This option is only available on some devices and only for Landscape view mode.
When previewing TVs and Monitors from the list, if you’ve set a debug title safe zone that is less than 1, the Uniform Safe Zone will display that size. The debug safe zone area is represented by the red area around the canvas widgets.
The Debug Safe Zone mode is on by default in UMG which enables the red “unsafe” zone area to be represented.
For some devices, there are now custom “unsafe” zones represented within the Designer graph. These are used to represent hardware or software specific areas of the device that take up screen real estate, such as the iPhoneX where these zones represent the notch and home bar sections of the screen.
In this example of the iPhoneX, the Safe Zone widget is parented to the section of the widget hierarchy where the menu and buttons are contained. When areas are “unsafe,” the encapsulated widgets scale to avoid these areas (see example above).