0

Lets say i have a canvas with a panel containing a plain white image. Hidden by mentioned panel, there is a panel with a coloured image on it. Now lets take a scrollrect, fill it with some smaller panels as content, add a mask to each of those, and put the scrollrect in a panel on top of the plain white panel.

How could i make these scrollable small panels mask out the white panel and show the coloured panel below while the white panel and coloured panel are static and don't move?

I am well aware of the fact, that the white panel and coloured panel would have to be children of the mask component, and that's the problem, because then they would scroll along.

I searched the web a bit, but could only find stuff related to scrollrect viewport masking but not putting masks in a scrollrect.

EDIT: One way would be to directly mask the coloured panel by using each of the small panels as masks and make the coloured panel scroll inside each small panel by *-1 to counter the parent scroll, but that seems like a bad solution

Thanks for any kind of advice <.<

vasmos
  • 2,472
  • 1
  • 10
  • 21
Leon Abels
  • 1
  • 2

1 Answers1

1

Use a mask or better yet a rect mask 2d. You add this component to a parent, and all of the children get masked based on its ‘rect transform’ which will show up in the top right of the editor on applicable UI elements. Also you can toggle the gizmo on and off to view a green outline.

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-RectMask2D.html

Combing rect mask 2d with scroll rect can give you some powerful results and definitely accomplish what you need.

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-ScrollRect.html

vasmos
  • 2,472
  • 1
  • 10
  • 21