One pixel horizontal divider lines flicker with Unity ScrollRect?

Question

I have some GameObjects inside of a ScrollRect (really inside of a content object which the ScrollRect translates).

When the localPosition of the content object is moved, the child objects move as expected but the horizontal divider present at the bottom of each child object doesn't appear in a constant way. Sometimes the lines appear thicker or thinner and "shimmer" while scrolling.

I'd like the horizontal lines not to visibly change. Any ideas on how to do it?

Probably because they're being moved an amount that results in them being at non-whole-pixel coordinates. — Draco18s no longer trusts SE, Sep 28 '17 at 18:53
Any option you know of to restrict the ScrollRect's translation to whole pixels? — OnesAndZeroes, Sep 28 '17 at 21:22
Not that I know of, aside from fiddling with its position manually in code — Draco18s no longer trusts SE, Sep 29 '17 at 01:05
Wound up using the DrawLine function found at the link below and drawing a line at the bottom of the GameObject. Works well while scrolling. http://wiki.unity3d.com/index.php?title=DrawLine — OnesAndZeroes, Sep 29 '17 at 09:17
No, that is an OnGui function, OnGui is the old-style GUI and Canvas is the new GUI. — Draco18s no longer trusts SE, Sep 29 '17 at 15:51
I am aware it's the old system, but it works well. I couldn't get a one-pixel horizontal Panel to work correctly even when aligning the coordinates to the screen pixels. Possibly Line Renderer would work in the newer Canvas system, but tried only for a little while with it. — OnesAndZeroes, Sep 29 '17 at 20:33

score 0 · Answer 1 · answered Sep 29 '17 at 19:40

0

I believe you can you use the Canvas.pixelPerfect property to force UI elements to adhere to pixelperfect standards.

answered Sep 29 '17 at 19:40

Michael Curtiss

186
6

Tried it, but it doesn't seem to help – OnesAndZeroes Sep 29 '17 at 20:29

score 0 · Answer 2 · answered Oct 07 '20 at 00:46

I ran into this question while trying to solve a similar issue myself, so I figured I'd share my solution.

Assuming you want to restrict a ScrollRect to whole pixels, you can do something like this:

public class PixelPerfectScrollRect : ScrollRect
{
    protected override void LateUpdate ()
    {
        base.LateUpdate();
        ensurePixelPerfectScroll();
    }

    void ensurePixelPerfectScroll ()
    {
        float diff = content.rect.height - viewport.rect.height;
        float normalizedPixel = 1 / diff;
        verticalNormalizedPosition = Mathf.Ceil(verticalNormalizedPosition / normalizedPixel) * normalizedPixel;
        // can also do the same for horizontalNormalizedPosition, using rect.width instead of rect.height
    }
}

Attach this to a GameObject and use it the same way you'd use a ScrollRect. This also assumes that every UI unit is one pixel; you'll have to scale normalizedPixel if that isn't the case for your game.

This works because ScrollRects can move their content RectTransforms up to diff pixels away from their local-space origin. If ScrollRects used pixel values we could just round those to ints, but since ScrollRects deal in normalized positions, we need to normalize our desired pixel values. If, in "pixel space," you move from 0 to diff in increments of 1, in "normalized space" you need to move from 0 to 1 in increments of 1/diff. (You're dividing the entire space by diff.) Therefore we need to make sure our normalized value is rounded to the nearest multiple of 1/diff.

Dimcore · Answer 3 · 2022-06-07T09:12:50.657

I faced the same issue. So I tried to normalize content position relative to the screen. I convert world position to the screen position, round it to snap to pixels positions and convert it back to world position. It updates content position every frame

public class PixelPerfectScrollRect : ScrollRect
{
    public Camera Camera; // or use Camera.main


    protected override void LateUpdate()
    {
        base.LateUpdate();
        EnsurePixelPerfectScroll();
    }

    void EnsurePixelPerfectScroll ()
    {
        if (!Camera || !content)
        {
            return;
        }

        var pos = content.position;
        var screenPoint = Camera.WorldToScreenPoint(pos);

        screenPoint.y = Mathf.Round(screenPoint.y);
        screenPoint.x = Mathf.Round(screenPoint.x);
        pos = Camera.ScreenToWorldPoint(screenPoint);
        content.position = pos;
    }
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 07 '22 at 06:42

One pixel horizontal divider lines flicker with Unity ScrollRect?

3 Answers3