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.
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.