UMG Thin lines are disappearing on low resolution

Hi.
In our UI we have elements that are 1px thin and the problem is that some of them are disappearing when screen resolution is low. It is caused by DPI Scaling and my question is if I can somehow solve this issue without changing DPI Scaling curve?

I’ve tried setting higher image size, but then it looks ugly as some lines are rendering with 1px height and some are rendering with 2px height on screen. Is there any chance to set these images to always have atleast 1px height or have them render all with the same size on screen? If not, is there any other solution?

Here are examples showing the problem:

high resolution:

1px with lower resolution:

2px with lower resolution:

Not sure whether you can fix this with DPI scaling but here’s an alternative you test quickly - override widget’s onPaint and draw lines in its context - see how this behaves in different resolutions.

This will also allow you to have actual control over the lines (if you need it).

It works but I can’t set it’s position relative to another element on UI if that element has offsets instead of position, but it’s nice temporary solution.

Hm, I did not think about that. So offset element’s position is reported back without taking its offset into account. That’s annoying. :expressionless:

Perhaps you could keep the offsets in variables - that would make things a bit fiddly but then you can use those offset and add them to the lines as well - this is far from perfect.

Again, this depends on the scale and the complexity of the UI.

I’ve just seen that in PUBG they have a lot of 1px lines that are independent of DPI Scaling and I don’t think that they could have made it with DrawLine as there are a lot of them, not only on static UI but also on button click etc. so it would be painful to do it that way. There must be another way to do that.

Side to side 1920x1080 and 1280x720 resolution in PUBG

Interesting observation. Not sure what technique they’re using.

I needed most of my lines dynamic so I must use the drawing method. Stopped noticing DPI scaling issues.

Generally speaking, extending a widget that has line drawing functionality might be a way to go. You set it up in another widget (an array of lines + some controls, anchors, offsets feeding off other elements) and add this user widget to whichever menu needs line drawing. This is useful for overall consistency and reusability but not that helpful if you have a lot of unique widgets that need selective approach or tinkering.

I use this approach with widgets that need animated line or a dynamic anchoring point, like in the example below:

Image from Gyazo

Whenever a new label is needed for something that is hooked up to a 3d world object with a line, it received an extra user widget that can draw lines and feed it data from the parent. It may need a tweak or two but it’s generally quite efficient. Again, your case might be just an order of magnitude more complicated in scope and complexity.

You can also draw lines in material. Probably not a good idea if one needs pixel perfect stuff - also fiddly to set up.


Not sure if DPI Scaling can solve your issue, perhaps someone more knowledgeable comes across this and chips in. For now, I’ve given the question a thumbs up for whatever it’s worth :expressionless:


One hack you could try that might work is to use an overlay as a parent and draw the line using a 1px tall border spanning across a widget. Not sure how this reacts to resolution change, though.

1 Like

So it solved most of the problems - maybe it’s not user friendy as I don’t have a preview of what it looks like and it doesn’t work with transform shear, but atleast lines doesn’t disappear. I still have a problem with larger ui elements which are looking bad under lower DPI scaling.

I’ll mark this as an answer, but maybe someone in future will give some better solution. Thanks for help.

Just tested it and it reacts the same as using images, so nothing has changed.

Judging by what you said, you settled for line drawing then?

Did you try the borders I mentioned last?

Ah, ok. Thank you for satisfying my curiosity and good luck with the rest!