SLATE UI - How to make it so DPI scaling is applied

Development Programming & Scripting C++
1

Hi,

I work with slate for our Main menu and it was quite easy to make it adaptive to the screen resolution.

Now I’m working on the “In Game HUD” and I’m a bit lost on how to proceed.

Exemple:
Let’s say you have a Timer Panel at the top your UI. This panel is made of a background 120*80 with a TextBlock in it to draw the remaining time. This was design for a 1080p resolution.

How will you do that in order to make it scalable and adaptive to the resolution?

At the first try, I put a Overlay (align top & center) with the background image and another overlay slot with the text; but if you do that, nothing will scale with the resolution as as long as you have enough place to draw the image, it will draw it.
Next try, I played with VerticalBox with FillHeight properties to manage the vertical size of those components but I ended with a Streched Background and the Text was not scaled.
Last try, I used a ScaleBox around those things within the VerticalBox and everything was perfect but is this the right way to do things? Is there a way to define a “reference panel” with a size like 1980*1080, place all your widget in it and then scale just once?

Should I play with SCanvas? SConstraintCanvas? with a scalebox around it?

I’m looking for advices/ best pratices and how you solve this.

Thanks,

2

If you design it in 1080p and run it in 1440p it will be scaled appropriately. The anchors allow you to control how it adjusts to various aspect ratios, but if its the same aspect ratio, it just scales.

3

I think you are talking about UMG and not slate.

As UMG is based on Slate, there should be something to do… unless it’s specific to UMG. For the anchors, I thought there were here to allow the positionning of the widget in all resolution, how it interacts with the scaling?

for me UMG is not enough mature as of today to use (mainly due to styling) and the fact that most of the things needs BP hooks and I more efficient with C++.