Research notes/ resources

UI scaling

For scaling UI/ widget elements in unreal for mobile devices you must create a dpi scale factor/ graph, which tells unreal the scale of the interface based off of the resolution for the shortest side of the device being used and how much to scale it by based off of points on the graph which each relate to a specific device being used

For scaling UI in Unreal you will need both the project settings open and a widget blueprint to set the DPI scaling to the correct custom values.

1. to start with you first start in the widget blueprint and in the top right select the screen size drop down and select a device you want to use.

2. next note the scale of the smallest side for that screen in the bottom left, in Unreal's example this is 496 x 1024 so use the 496 value,

3. under the user interface tab in the project settings go to the DPI section and set the DPI scale rule to shortest side.

4. Then on the graph find the point with a scale of 1 and set the resolution to the resolution of the chosen device. next using one of the other points do the same but reverse the values meaning resolution is set to 1 and scale to that of the chosen device.

5. For adding more devices select a new device in the widget's screen scale drop down (some devices share the same/ similar resolution meaning you don't have to do all of them) take note of its smallest side.

6. repeat step four by adding a new point, or using an unused point, to the graph setting the resolution to that of the new devices smallest side.

7. for the scale however you take the resolution value of the starting device and divide it by that of the new device and the value will be the scale for this new device. Unreal's example is 828 divided by 496 to get a scale of 1.66

For a more in depth look into how to set this up the links below go to Unreal's documentation which demonstrate how this is done.

UI scaling

Scaling UI

https://docs.unrealengine.com/en-US/Engine/UMG/HowTo/ScalingUI/index.html

DPI scaling

https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/DPIScaling/index.html

Interface design practices

when making UI elements for an unreal project that will scale properly certain standards are recommended to get the best result these consist of.

Making all elements with the same resolution in mind so they all scale consistently

making them for the scale factor 1.0 in DPI scaling

These are the basic rules but the process of creating elements and implementing them properly is better detailed in the Unreal documents down below.

Interface design practices

UMG practices

https://docs.unrealengine.com/en-US/Engine/UMG/UserGuide/BestPractices/index.html

URL creation