CODEWITHSUNDEEP
unity-game-engineunity-ui
LWun
LWun

Reputation: 71

Unity: add different scroll speeds in UI Scroll Rect

In Unity, I created a UI Scroll Rect Object. This object has two children, a Button Handler with different Buttons, and a Background.

Using it, both the Buttons and the Background are scrolling at the same speed. I want the Buttons to scroll faster than the Background, thus creating an effect of depth to the scrolling.

I can not find any options in the Objects or the Scroll Rect for this. Any ideas?

Upvotes: 0

Views: 1604

Answers (1)

zambari
zambari

Reputation: 5035

This will require a tiny bit of scripting. The best way in my opinion would involve following steps:

a) for each button, add a component that remembers its start position.

b) grab a scrollrect instance in parent

c) using it to grab an instance of ScrollBar

d) scrollbars have onValueChanged(float) callbacks, you can bind to, to know when the scroll position changes (to avoid doing checks in Update)

e) every time a scrollbar has moved (This will work regardless of whether the user used the scrollbar, or used another mean of scrolling, as the scrollrect will move the scrollbar, which will fire the event anyways), you get a callback with current scrollbar position which will be equal to normalized scrollrect position (0.1)

f) use that value to offset your localposition (something value*parallaxVector2), this should give you a nice cheap depth effect

Here's an example implementation

public class ScrolleRectDepthButton : MonoBehaviour
{
    RectTransform content; // we'll grab it for size reference
    RectTransform myRect;
    public float parallaxAmount = 0.05f;
    public Vector2 startPosition;
    void Start()
    {
        myRect = GetComponent<RectTransform>();
        startPosition = myRect.anchoredPosition;
        ScrollRect scrollRect = GetComponentInParent<ScrollRect>();
        content = scrollRect.content;
        Scrollbar scrollbar = scrollRect.verticalScrollbar;
        scrollbar.onValueChanged.AddListener(OnScrollbarMoved);
    }
    void OnScrollbarMoved(float f)
    {
        myRect.anchoredPosition = startPosition - (1 - f) * parallaxAmount * content.rect.height * Vector2.up;
    }
}

Upvotes: 1

Related Questions