UMG - Pixel perfect borders

Development Programming & Scripting UI
, , , , ,
1

Is there anyway to do pixel perfect borders that are less than 3 pixels tall? I want to reproduce something like this in UMG.

89746-ui.png
89746-ui.png453×515 87.6 KB

I have tried using the Border widget but it seems to render things at inconsistent heights for some reason.

89747-borders.png

Here is my UMG hierarchy

89748-border_umg.png
89748-border_umg.png1670×727 92.1 KB

2

As alternative you can try a plain Image widget:

  1. for a plain line try white texture with ie 1px height
  2. for a pixel perfect border try the box rendering mode & a border texture (literally a texture with 1px white border on the edges and transparency inside)
3

Can this be done with the Border widget by now?

4

did you get anywhere with this? same issue…

5

No, I didn’t, sorry.

6

Have you found it out? Same Issue. So anoying.

7

Guys you need to properly setup DPI rendering rules ( DPI Scaling | Unreal Engine Documentation )

That affects how pixel perfect are elements rendered. Depends a lot if you wanna scale them or keep them same in different resolutions, but generally this is the way how to tackle this problem.

1 Like
8

This is simply incorrect. UMG will happily render things at half pixel offsets and mess up thin elements regardless of DPI scaling and pixel snapping. I’ve struggled to find a solution to this for years, and at this point I’m convinced it’s impossible without dropping to the level of C++ or doing custom rendering in OnDraw.

1 Like