x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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: high resolution

1px with lower resolution: 1px with lower resolution

2px with lower resolution: 2px with lower resolution

Product Version: UE 4.19
Tags:
more ▼

asked Aug 13 '18 at 05:20 PM in Rendering

avatar image

King Zero
25 1 4

(comments are locked)
10|2000 characters needed characters left

1 answer: sort voted first

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

more ▼

answered Aug 13 '18 at 06:33 PM

avatar image

Everynone
12.6k 72 24 52

avatar image King Zero Aug 13 '18 at 07:51 PM

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.

avatar image Everynone Aug 13 '18 at 08:05 PM

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

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.

avatar image King Zero Aug 15 '18 at 06:19 PM

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

alt text

avatar image Everynone Aug 15 '18 at 07:37 PM

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


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.

avatar image King Zero Aug 21 '18 at 07:18 AM

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.

alt text

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

avatar image Everynone Aug 21 '18 at 07:22 AM

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

Did you try the borders I mentioned last?

avatar image King Zero Aug 21 '18 at 07:36 AM

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

avatar image Everynone Aug 21 '18 at 08:02 AM

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

(comments are locked)
10|2000 characters needed characters left
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question