- Home /
How to do One Pixel Lines in the Canvas UI
I have a one pixel line between many elements in a scrollview. I use a sprite with a height of 1 and a stretched width.
I was using ScaleWithScreenSize using the iPhone6 as my Reference Resolution and that seemed to work fine. Then when I went to look on the iphone, many of the lines seemed to flicker when scrolling. I guess it has trouble knowing whether to draw the line or not?
How do I maintain the single pixel? I want it to always render this dividing line.
I then thought that I should change my Canvas to be ConstantPixelSize. I figured I would just manually scale things which required scaling, and that way preserve unscaled, single pixel elements. But then I realized that the font did not properly scale, and the font size cannot be a decimal. This means that even if I multiply the rect size to the correct size, the font size will remain large. If I scale the font size, i will always have an integer size.
As an example, I have a ipad pro and an iphone. I want the font to be the same size relative to the screen on both (say 5% of the screen height). I would like my dividing lines to be 1 pixel on both. How can I achieve this? Is it possible?
Another possibility would be to scale the fonts differently. Even having them as floats would be nice. Then I could just scale everything proportionately. Ins$$anonymous$$d of setting the Header to be 48 and scaling the canvas, I could set it to anchor at like 5%. The only insurmountable problem with a constant pixel size is the font
I'm having this same issue. $$anonymous$$y very simple solution was to make them 3px. At 2px there was still a noticeable flicker,but at 3px your guaranteed 2px of line at any given time.
I too would like to know the best solution for this. mLevelRay's solution sounds good but could result in mismatched line widths (2 or 3 pixels depending on position), so if there is an even better way I would love to know.