UI Scaling strategies for multi-platform support

Hi,

I’m looking for the recommended workflow to handle dynamic UI scaling across diverse hardware profiles (console, PC, handheld). My goal is to support various viewing distances and aspect ratios (including Ultrawide) starting from a 1080p reference.

Instead of hard-coding per platform, what is the best way to manage these global scaling overrides? Specifically:

  • Should I rely on multiple CommonUI Style Sets to swap font sizes and padding based on the device?
  • Is it better to use custom DPI Scaling Curves for different device classes, or should I leverage CommonUI’s Safe Zone and slot-based scaling?

I’m looking for a scalable architecture that avoids duplicating widgets for every platform. Any guidance on the “Epic way” of doing this would be appreciated.

[Attachment Removed]

Hi,

I’d recommend trying to get as far as possible with just proper anchor usage in your root-level canvas panel alongside the DPI curve settings. The scaling curve should help support most PC/console configurations, and your anchor settings will let you decide how each widget should be handled in an ultrawide configuration. If you need more control, you can set a custom scaling rule and do your own calculations for the DPI curve; that would be the best place to handle weirder edge cases as needed, but I’d use that as a last resort since it makes the final DPI calculation more complicated in the end.

From there, we have a few CVars you can adjust for some of the edge cases:

  • Mobile.EnableUITextScaling 1 will enable an additional scaling factor for Android/iOS, though note that this only applies to CommonUI text blocks and not vanilla UMG text. You’ll need to set that multiplier on the CommonTextBlock itself
  • In 5.8, we added CommonUI.SmallTextScaling and CommonUI.SmallTextScalingThresholdMax for platform-agnostic scaling. We needed this to properly support handhelds, so you could use those to specify a minimum acceptable size and scale things up when needed. You can grab that change inCL# 48482715 and CL# 48792443 if you want to try it prior to the 5.8 release.

Generally we try to avoid platform-based overrides as much as possible, especially as newer devices come out and break our assumptions, so I’d try adjusting the SmallTextScaling CVars as a starting point and see if you’re happy with the results. Occasionally it will make sense to design two independent layouts (e.g. shuffling around some widgets for portrait vs. landscape); in that case, you’ll need to set up some basic logic to switch root widgets based on aspect ratio. In cases where that makes sense, aim to make use of the same building block UserWidgets, so you’re just swapping out a top-level canvas that specifies where those widgets go instead of doing a deep copy of your whole hierarchy.

Hopefully that’s helpful as a starting point, but let us know if you have any follow-up questions!

[Attachment Removed]