Unity Canvas Scaler and 1 pixel images

Unity Engine
,
1

I have a Canvas with a CanvasScaler set to “Scale with ScreenSize” and the match mode set to “Match Width or Height” with 0.5 Match

In a panel, i have a separator line, for which i used a one-pixle image and set the size to
width:300
height:1

i want the game to run on all possible screen resolutions, but when i resize the game window the separator line starts to vanish and reappear, depending on what aspect ratio the game window uses.

And its not some editor bug i think, because when i build and run the game, the line shows at a resolution of 1920x1080 but not at some lower resolutions, e.g. 720x576 and lower

Is there a way to fix this?
Or is there maybe a way to improve my separator line, getting rid of the 1px height image?

I added some screenshots + what the end result should look like with those separator lines

Thanks a lot in advance
Flokicker

3200442--244654--720x576.jpg
3200442--244654--720x576.jpg1920×1080 264 KB

3200442--244655--1920x1080.jpg
3200442--244655--1920x1080.jpg1920×1080 446 KB

3200442--244656--editor.jpg
3200442--244656--editor.jpg1920×1080 374 KB

3200442--244657--end_result.png
3200442--244657--end_result.png720×833 35.9 KB

2

The problem is that if the line is smaller than one pixel, rendering might not hit the line. I made a small script that has a reference to all hairlines and sets their height to one for the scaled resolution:

var onePixelHeightInCanvas = scaler.ReferenceResolution.y/ Screen.height;
for (int i = 0; i < hairlines.Length; i++)
{
    var hairline = hairlines[i];
    var size = hairline.sizeDelta;
    size.y = onePixelHeightInCanvas;
    hairline.sizeDelta = size;
}

scaler is a reference to the Canvas scaler and hairlines is an array of RectTransforms.

6 Likes