Best Practices: UI Scaling/Resolution and Creating UI Icons

Development Programming & Scripting UI
, , ,
1

I am new to UMG in Unreal Engine and Using UE 5.3 and was looking forfeedback on best practices and optimization for creating scalable UI’s and UI Icons/Graphics.

I found these resources in another post:

These are great resources, but was Wondering if there is anything else to consider?

I am creating a UI for something more akin to an application than a game, and my main UI uses small icon buttons for UI Interface as well as text buttons for some menu’s.

I came across a video somewhere (most likely YouTube) where a dev explained how they used a custom Font Glyphs for there UI, which was interesting, but for the life of me I cannot find that video again.

Was wondering, what would be the advantages and drawbacks of using Custom Font Glyphs for UI Icons? Vector fonts vs Pixel Fonts? Using Custom Font Glyphs vs Texture Icons?

I have my Icon Textures set to UserInterface2d, and was originally not using MipMaps, but now looking into changing to MipMaps and UI Texture Group after reading some resources.

There are a lot of MipMap Settings, but I only have 1 Laptop to test on, and not sure how to test to see what results different mipmap settings have on my UI Icons.

As for scaling, I had my UI Widgets all wrapped in scale boxes so User could specify a UI Custom UI Scale and I was going to then set the Scale Boxes accordingly on the widget Pre-Construct. I have no idea if this is best, worst or dosent matter? Like, User could set a custom scale for Player Info Card Widgets, and a separate scale for the Main Menu Bar.

I am not certain how to properly setup UI so that if I have a Icon Button, and the Image Texture is 64x64 to accommodate 4k monitors, but I want the button texture to be 26x26 when the display resolution is say 2560x1600, and also want user to be able to scale UI custom scale, do I set the image size to 64x64 in the Brush settings for the image, and then scale it down using the scale box? Or should the scale box scale be set to 1, and I set the image size to a smaller size? Or chage the Scale in the Render Transform settings for the Widget Image?

image
image519×616 31.4 KB

Should I be doing this a different way?

2

I don’t have an answer to your specific questions, but I would say unless you hear otherwise, just test it under the various scenarios you described, and see how it looks and if it works. If you need to scale up because you are not getting good resolution, then just be sure to scale up in powers of two, so I would say 32 x 32, 64 x 64, etc… I don’t think it will cause any performance issues, so if it works and looks ok, I think you should be fine. Just my thoughts.