Monster shadow

VIDEO

Scroll View in Unity - 2021 Tutorial

Description:
If you've ever needed a scrollable container of items in your Unity game menus, keep watching! Confine any number of items to the limits of a container and mask the overflow. Learn about the different settings of the scroll view/rect as well as how to use the 'Content Size Fitter' to dynamically resize your content.
ADD A COMMENT

Alper Doğru
You are great. Thank you for tutorial !
Luigi Nicastro
Would you be able to create a carousel effect for the UI so it's constantly looping when you scroll?
hendersyo
I know it's been almost a year but if you're still around: When I follow these steps, I can't see the items on the far left unless I pull them into view with elasticity and then they bounce back out of view. So my steps are to make a new scroll view with the default scrollbars etc. Increase the height of the scroll view > Make the content a vertical layout group > Make 7 child objects with layout element components (I also added a child image to each of these so I can see them) > Set their Rect transform height to 100 > Play. Items at the top of the list dont stay visible.
Tarodev
@hendersyo You could also check out "content size fitter" to dynamically resize it to fit the content.
hendersyo
Figured this out but for anyone hitting the same issue: I had to make sure that my Content's height was much bigger, and went outside the viewport and then the vertical layout group on my Content had padding on the top and bottom (200, -200) that kept things in the right place
Majeed
Applying a Rect Mask on the Scroll GameObject is a faster alternative
Go Games Series
super cool stuff to learn on the weekend lol, will watch the entire playlist.
Hdgg Fhjb
Great. This is best tutorial for scroll in untiy.
The ASMR Vault
Great tutorial ! You have a new sub
Sacred Games
Ty for the tutorial, you explain my problem with the content size and give a direct answer (ContentSizeFitter) and why, ty
İlyas Köse
Very explanatory video about scroll rect. Thank you.
Tarodev
No problem! Glad I could teach you something :)
SEE ALL COMMENTS


Transcript:

all right let's learn about the unity scroll rect as fast as possible
so i've got this container here and i've got these
characters that i recently drew and what i would like to do is put them inside
the panel and allow the user to scroll left and
right with their finger or their mouse depending on the device and i would also
like to hide any overflow and only show them in
the confines of this panel so let's get started
so click on your panel and what i'll actually do is i'll name this scroll for
simplicity oops on your panel or your scroll
add a scroll rect make your content a child of the scroll
and i'll just center it all out here now with your scroll
highlighted drag your content into the content field of your scroll rect
now i'll go over the settings here in a bit but for now
all i all you have to know is as this is a horizontal scroll
i will turn off vertical movement and i'll actually show you why
with vertical selected you can go all angles and it kind of looks
a little bit disgusting it's not exactly what we want so if we turn off vertical
you'll see it's just a nice nice horizontal scroll okay
so secondly we wanted to mask the characters outside of this panel so that
they only show within the confines so what we're going
to need for that is a middle component in between our scroll
and our content so let's add an image and let's call
this a view and we'll
expand it holding alt and alt and shift on windows i'm not
actually sure what it is on mac so guys to expand it to reach the full confines
we'll take our content and we'll make it a child of the view
so now we've got scroll the view and the content
with the scroll collec clicked grab your view and put it into the
viewport there now nothing seems to have changed
but the magic happens when you go to view and you add a mask
now what that will do is it will mask all the child image components
to your view image right here now this has obviously blocked the panel
below it there's a few ways to fix this the first
way is to change your opacity of your view image
down to one that's usually what i do because it's the quickest and it's the
easiest alternatively you can pick the
ui mask which is given to you by unity by default and that's obviously
too transparent to show so maybe i have to raise it a little bit
basically when you when you when you remove all the opacity
there's there's nothing to mask anything so you have to have it a little bit
um a little bit up what i usually do is just
just the one opacity on on on no no sprite
in the image renderer okay so now as you can see
it it uh masks on the outside but it's not perfect
because it's kind of going over our panel so
an easy fix is to just hold alt and kind of like
pull the view in okay not the actual scroll
just the view and now you can see it scrolls
nicely that's a little bit clippy style just like that there you go
all right so that's how you mask a scroll view
alright so the scroll area is dictated by the size of your content
so as you can see i've got large content area which is able to show
all the characters but what if i was to reduce the content size now
there's no way for me to get across to all the other characters
now this can be a problem especially if your
content is dynamic and you have no idea how many items you're going to actually
have in this area and you're adding them a runtime so what you
can do in this scenario is you go to your content and you add a
content size fitter okay and as
this is a horizontal content we'll use horizontal fit and i'll choose preferred
size so that will always completely
encapsulate the bounds of the children elements so as you can see
there and it's and it's perfectly stopping on
both sides now this will still work if i add more items
to the scroll rect so that's a good way to
to use a scroll rect if you have dynamic content
you can also play with how the scroll feels
so right now by default it's just elastic
which you can see here you can make it more elastic
which starts to make it a little bit slower to react
can be quite fun and feel quite nice but if you take it to ridiculous levels
um it starts to yeah if you're not very practical um
so keep those kind of low forgot what the default was but yeah that feels nice
um secondly is unrestricted now this allows you to just scroll and scroll and
scroll regardless of the content size could be good for some situations and
clamped is similar to elastic it's just it it is very rigid on the
edges more of like a professional feel as
opposed to elastic whereas the kind of feels like a modern iphone
or an android okay now
there is actually a far easier way to create a scroll rect and that
is by going ui scroll view okay so
let's just move our old one up here now this one by default comes with
horizontal and vertical scroll bars i personally don't like them i think you
can do it much more gracefully by just adding
like a little bit of shadow here if they've got content coming to the right
to the left same goes for the right but for more
businessy style apps a scroll bar is always always good so in
the same way as you can see that's got the scroll
they've got the view port and then they've got the content
so what we can do is just duplicate our content here
replace the content here align it all up and then in the same way
that we did it with ours we can just set the content
here and there we go we've got a horizontal scroll bar said it works
exactly the same if you want to do a vertical scroll bar i could just turn
off vertical here obviously the vertical scroll bar will
show up once you've actually got vertical content to scroll
so there you have it it's just about everything that i can think of with the
scroll view alright guys if you enjoyed this
tutorial on the scroll racks leave a like maybe even be my very first
subscriber if you're quick and i plan to be doing
lots of quick tutorials like this in the future so
stick around