How can I combine a Mask with a Scroll Rect to limit the visible content?

[DragonautX]

In the Scroll Rect docs, it said that, “Usually a Scroll Rect is combined with a Mask in order to create a scroll view, where only the scrollable content inside the Scroll Rect is visible.” I created a Scroll View GameObject and an Image GameObject with my own sprite as a source image. I made the Scroll View Content the Rect transform from the Image GameObject.

I don’t know how to add the mask now. I see Scroll View has a Viewport child GameObject with a Mask component, but the only option available is the checkbox “Show Mask Graphic”. Whether it’s checked or not, the entire Image is still there when I test Play and scroll. How do I add a mask so that only the part of the image that’s visible in the Viewport child GameObject is shown? (using Unity 5.4.1)

[Dennis59]

@DragonautX, here is an example of how to use a mask and a scrollrect.

[DragonautX]

I found in the same docs that I had to put the Image GameObject as a child of the Content child GameObject of Viewport. It said, “All the scrolling content must be children of a single content GameObject that is a child to the viewport. The content Rect Transform needs to be referenced in the Content property of the Scroll Rect.”

I found I could make an Image component in the Content GameObject itself, but it doesn’t display right. Setting the Image GameObject’s coordinates to 0 (and sometimes fiddling around with the anchor) fixed some display oddities. Setting the Content GameObject’s Left and Right Transform properties to 0 helped too.