Maaan, u saved my graduate work. I make an educational game and could not figure out how to create a table to display data from a database. ChatGPT gave me half working code without explaining how does it work. But your video showed me step by step how to do it on simple example.
Thanks! This tutorial was great, got me right back into the components I forgot how to use. One thing to add the Content size fitter shouldn't be on the same object as the layout group according to Unity. I fixed it by adding it to the parent (Object with Scroll Rect component)
Nice tutorial! You missed one thing. You know how your scroll view always show at the center of the viewport? You can change that by moving the pivot point all the way on left. Then your view port starts on the left side.
@@proximacentauri9509 if you are using windows keep the alt key while you select left side on RectTransform panel. If you are using a Mac keep the Cmd key pressed instead
If you can't scroll anything even tho you have an event system, make sure that your contents doesn't have an EventTrigger component. Because for some unknown reason it will catch the pointer events and prevent the parent which has ScrollRect (Who needs pointer events) from catching the events. As a workaround, implement the IPointer interfaces directly instead of through an EventTrigger
Hey! In the part where you were talking about masking, when you add the Mask component, there is an option to untick "Show Mask Graphic" in order to remove the white part, which is the better method to use. Hope this helps!
I wanted to make a questing system, and since I'm having a lot of quests eventually I would need a vertical one, thought I would have to code it out then I noticed scrollview and that brought me here haha, very easy to follow
Be my first subscriber ... Are you saying at the end this was your first video? Its just over 14 months later and you've got over 28K subscribers now. Good job !! I personally love the short n sweet videos so I'm going thru all of yours now. Thanks !!
every time I see this channel I say in my head: "En Taro Adun" and think the icon isn't right ha ha ha, but not everybody is an StarCraft fan... anyway, Good video, thanks!
@@Tarodev Yes... I made it the same quality as your videos 😃 I have one request, if you will, Do you know how to build a Popup which closes on outside click. I'm struggling with it! I tried using OnDeselect, OnPointerEnter, OnPointerExit. And inside OnEnable() { EventSystem.current.SetSelectedGameObject(gameObject); } But, that solution doesn't work for nested Panels. (eg Button on Panel --> (opens another) ---> Button on Panel Can you please recommend a solution/resources for that? Also, my understanding of IPointerClickHandler IPointerDownHandler IPointerEnterHandler IPointerExitHandler IPointerUpHandler is very meagre. If possible please recommend some resources. Looking for your kind help...
Does anyone know how to clamp scroll to each object within the "scroll view"? So in your case, It would stop at each character and in order to go to the next character, you would have to scroll again. Sort of like swiping through images on your phone?
i would recommend using the "simple scroll snap" asset (free). i'm currently trying to use it and i am running into issues (mostly to do with my own usage) but it overall seems really helpful
if you cant move your list, dont forget to add the Event System... I forgot about that and I was banging my head for ages trying to figure out the problem
I'm lost right at the start as the item "Content" I have no idea what that is...a empty gameobject? a panel? You refer to it as a container, but I don't know what that is.
hi, great video!! How would you get the list to start over at the end? After the sword, the smiley face is there again without having to scroll in the opposite way
Perfect, thank you! Typical Unity thing that's unintuitive. Anyway, I put the Mask on a direct parent of the "Scroll" object which also worked out fine, so there was no need for the "View" object for my purposes.
Excellent tutorial! I only have one issue. When I add the "Content Size Fitter" component onto Contents, I lose the ability to scroll. It's like the size Content becomes 0 and I can't scroll past the centre of the the screen.
I ran into this same issue and noticed that he had a horizontal layout component added to the content container. I added it and that resolved my issue. Hope it helps :)
If the content size fitter just makes the content holder width turn to 0, Is it because you have use an empty gameobject as the content, just fix them by making the size of the empty gameobject bigger
I have a problem, my scroll rect onty scrolls if I touch outside my buttons, and if I try to scroll putting my finger on a button it selects it, how can I fix it?
Hey great tutorial as usual. Could you help out with one thing though I followed along your 3D objects in UI tutorial and then wished to create a scrollable view with those but doing this does not seem to mask the 3D objects
Indeed, it won't work with 3d as scroll view is a canvas specific utility. You'd need to either use a camera with bounds limited to the scroll area, or a Shader which cuts it off
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.
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
Im surprised by how nobody asked about how you copy+pasted the images and they stuck one after other? 4:49 Doesn't work for me. Okay I found it. By Layout Group. Thanks
Can i figure out somehow is object in scroll viewport (visible) or not? I found a Unity component "ScrollView" that has a "visible" property but I can't figure out how to access "ScrollView", only I can find is a "ScrollRect"
Hello, I'm from Brazil and I'm using Google translate to communicate, can you clear up my doubts? I would like to do it using the horizontal scroll bar, but I don't know how to make it active, because every time I play the scene the horizontal bar turns off, I've tried several options but it keeps turning off by itself when I play, do you know what it could be?
The "mask" effect of this does not happen for me when I follow this to the letter. When Unity's default ScrollView is added using the GameObject menu, that maps most of the arrangement discussed in the tutorial, and yet, when settings are adjusted to match what this tutorial says to the letter, the "mask" effect still does not happen. Another thing that never happens no matter how much content is added is the scroll **stopping where the user lets go of it** after the user releases the mouse button. Instead, the scroll view's content bounces right back to wherever it started.
Look into the content size fitter. What's happening is the content is bigger than the actual content rect, so it flings back to where it actually fits into the scroll, even if the content is overflowing
Hello ! :) I joined your Patreon :) and I become Tarobro! but it doesn't have image that this tutorial show~ , any way that I can get it to follow your tutorial?
Is there a way to scroll a step-by-step? like .. I created something by putting arrows to the left and right, and scrolling my panel by Image width on click, this way it jumps one picture/image on a time. Is there an easy/simple way to do it with the default scrollbar the way you've shown us? Great video BTW :)
Scrollview actually took my 2 days and i still haven't figured out the solution. Elastic component automatically returns to original position after dragging. Such a nasty component...
Losing my fucking mind whenever i try to move my scrollable container itj ust snaps back into place im sure ill figure it out once i've had some sleep but christ on earth
Basically it's due to how my UI components were structured, make them and set them up to be centred right before making them a child of another UI component.
Great! No intros, no begging for likes, just straight to the point. Exactly what I was looking for. Thank you.
I've watched a half dozen videos and your is, by far, the best explained (and up-to-date, compared to Brackey's!) Thank you!
For the ones who are new in Unity, if you want to group these 9 objects under "component", select all objects then press ctrl+shift+G
Great tutorial as always :D 04:29 was highly needed more my solo project :) thanks!
Maaan, u saved my graduate work. I make an educational game and could not figure out how to create a table to display data from a database. ChatGPT gave me half working code without explaining how does it work. But your video showed me step by step how to do it on simple example.
Thanks! This tutorial was great, got me right back into the components I forgot how to use. One thing to add the Content size fitter shouldn't be on the same object as the layout group according to Unity. I fixed it by adding it to the parent (Object with Scroll Rect component)
this makes my shop look much better thank you
I always end up finding the solution to almost anything on this channel, bravo taro 👍
disable show mask graphics in the mask component, it will hide the mask image so you will never need to reduce the alpha to 1.
Oh wow... Thank you
Nice tutorial! You missed one thing. You know how your scroll view always show at the center of the viewport? You can change that by moving the pivot point all the way on left. Then your view port starts on the left side.
Mate i tried your method but it doesn't work to show the images in the center of the view port, do you have a tutorial for that please ?
@@proximacentauri9509 if you are using windows keep the alt key while you select left side on RectTransform panel. If you are using a Mac keep the Cmd key pressed instead
@@klajdimyftari4691 Thank's mate!
Holy shit you are a god thank you
Thanks alot
I had been struggling with this for quite a bit, and your tutorial helped me immensely. Thanks a bunch! :D
super cool stuff to learn on the weekend lol, will watch the entire playlist.
Great video, clear explanation directly to the point thanks
The best tutorial on ScrollRects ive seen
This was my VERY first tutorial 😊
Great tutorial, directly to the point. Thank you very much!
Very concise, clear and helpful. Thank you so much
This some top notch tutorial, nice and short, thank you!
I just started to watch your tutorials.
It's pretty helpful. Thanks. 괜찮은 튜토리얼 같아요~~ 땡큐~ ㅎㅎㅎㅎㅎ
Great tutorial, thank you, Tarodev!
:D
I always come back here when I set up a scroll rect :D
Sometimes the brain just cannot retain certain information 😂
you just had the right answer all the time, thank you S2
Thanks, super helpful! Came here to brush up on this component before implementing a new quest journal UI. I'm ready now.
Instant sub, this is great! Thank you! 👏👏👏
If you can't scroll anything even tho you have an event system, make sure that your contents doesn't have an EventTrigger component. Because for some unknown reason it will catch the pointer events and prevent the parent which has ScrollRect (Who needs pointer events) from catching the events. As a workaround, implement the IPointer interfaces directly instead of through an EventTrigger
Great. This is best tutorial for scroll in untiy.
Show mask graphic on the Mask component avoids having to change the alpha
Thank you!
You saved my life for the second time ! Great job
Hey! In the part where you were talking about masking, when you add the Mask component, there is an option to untick "Show Mask Graphic" in order to remove the white part, which is the better method to use. Hope this helps!
I wanted to make a questing system, and since I'm having a lot of quests eventually I would need a vertical one, thought I would have to code it out then I noticed scrollview and that brought me here haha, very easy to follow
Be my first subscriber ... Are you saying at the end this was your first video? Its just over 14 months later and you've got over 28K subscribers now. Good job !! I personally love the short n sweet videos so I'm going thru all of yours now. Thanks !!
Yessss, I had zero subs at this stage and was excitedly waiting for my first 😊
Thanks for enjoying my content!
Great tutorial ! You have a new sub
every time I see this channel I say in my head: "En Taro Adun" and think the icon isn't right ha ha ha, but not everybody is an StarCraft fan... anyway, Good video, thanks!
Thank you for the tutorial I just needed that!! :)
Excellent tutorial, thanks a lot!
Ty for the tutorial, you explain my problem with the content size and give a direct answer (ContentSizeFitter) and why, ty
Thank you for this tutorial!
Would you be able to create a carousel effect for the UI so it's constantly looping when you scroll?
at 2:27 the easyest way to make the viewport transparent is to just untick "Show Mask Graphic" in the "Mask" window
Perfect video as always. One thing I would love to see is how to scroll using gamepad/keyboard etc?
Thanks Tarodev, very cool
Hey, Take This!⭐
Great Tutorial!
Ohhh, a gold star 😊
@@Tarodev Yes... I made it the same quality as your videos 😃
I have one request, if you will, Do you know how to build a Popup which closes on outside click.
I'm struggling with it!
I tried using OnDeselect, OnPointerEnter, OnPointerExit.
And inside OnEnable()
{
EventSystem.current.SetSelectedGameObject(gameObject);
}
But, that solution doesn't work for nested Panels. (eg Button on Panel --> (opens another) ---> Button on Panel
Can you please recommend a solution/resources for that?
Also, my understanding of IPointerClickHandler IPointerDownHandler IPointerEnterHandler IPointerExitHandler IPointerUpHandler is very meagre. If possible please recommend some resources.
Looking for your kind help...
Does anyone know how to clamp scroll to each object within the "scroll view"? So in your case, It would stop at each character and in order to go to the next character, you would have to scroll again. Sort of like swiping through images on your phone?
i would recommend using the "simple scroll snap" asset (free). i'm currently trying to use it and i am running into issues (mostly to do with my own usage) but it overall seems really helpful
if you cant move your list, dont forget to add the Event System... I forgot about that and I was banging my head for ages trying to figure out the problem
OMG!! Thank YOU!!! I was having the exact problem!!
Great Video! Thank you
I'm lost right at the start as the item "Content" I have no idea what that is...a empty gameobject? a panel? You refer to it as a container, but I don't know what that is.
Content is a gameobject with rect transform, Horizontal layout group, content size filter
thanks for the great tutorial!
You are great. Thank you for tutorial !
hi, great video!! How would you get the list to start over at the end? After the sword, the smiley face is there again without having to scroll in the opposite way
Thanks for the help!
Absolutely come in clutch thanx😂
This was a really helpful tutorial!
thanks a lot for sharing, you are amazing!
Thank you so much ! No code is always cool 😊
Thanks very helpful
Perfect, thank you!
Typical Unity thing that's unintuitive. Anyway, I put the Mask on a direct parent of the "Scroll" object which also worked out fine, so there was no need for the "View" object for my purposes.
Thank You...
Excellent tutorial!
I only have one issue. When I add the "Content Size Fitter" component onto Contents, I lose the ability to scroll. It's like the size Content becomes 0 and I can't scroll past the centre of the the screen.
I ran into this same issue and noticed that he had a horizontal layout component added to the content container. I added it and that resolved my issue. Hope it helps :)
@@IcieJuicy Im having this same issue, Which object has the "horizontal layout component"? The Panel, the View or the Contents?
@@Duros360 the Content
@@IcieJuicy thank you so much for this comment, you just saved me, lol
Thanky you!
If the content size fitter just makes the content holder width turn to 0, Is it because you have use an empty gameobject as the content, just fix them by making the size of the empty gameobject bigger
Thanks for this tutorial
Perrrrfect tutorial. Thanks!
Thank you so much. You sooooo good!!!
thank you
I have a problem, my scroll rect onty scrolls if I touch outside my buttons, and if I try to scroll putting my finger on a button it selects it, how can I fix it?
when i do this all of the objects snap back to position after i move them
Particles are not visible inside the scroll view, even the visible inside mask is enabled in renderer
Thank you!
I came looking for copper and I found gold. Thank you so much!!! Also is that possible to use mouse scroll for scrolling but not mouse drag?
Lets say i only have one item, how can i make it stick to the left or right, instead of the center(Building a dynamic inventory system)
You could create a wrapper object around your item. The wrapper can be full width and the item can be left aligned within
Hey great tutorial as usual. Could you help out with one thing though I followed along your 3D objects in UI tutorial and then wished to create a scrollable view with those but doing this does not seem to mask the 3D objects
Indeed, it won't work with 3d as scroll view is a canvas specific utility. You'd need to either use a camera with bounds limited to the scroll area, or a Shader which cuts it off
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.
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
@@adhocdropoffs You could also check out "content size fitter" to dynamically resize it to fit the content.
how is your unity editor start fast when you press Play ??!
Enjoy: ua-cam.com/video/P7cYVg5fAvY/v-deo.html
@@Tarodev You are life saver thanks !
How can i achive this result, without UI items
thanks a lot !
This wont work for me for some reason, I have followed multiple tutorials and even used the built in object but nothing will scroll
Im surprised by how nobody asked about how you copy+pasted the images and they stuck one after other? 4:49 Doesn't work for me.
Okay I found it. By Layout Group. Thanks
Can i figure out somehow is object in scroll viewport (visible) or not?
I found a Unity component "ScrollView" that has a "visible" property but I can't figure out how to access "ScrollView", only I can find is a "ScrollRect"
Hello, I'm from Brazil and I'm using Google translate to communicate, can you clear up my doubts? I would like to do it using the horizontal scroll bar, but I don't know how to make it active, because every time I play the scene the horizontal bar turns off, I've tried several options but it keeps turning off by itself when I play, do you know what it could be?
Thenks bro ❤
Thanks!!!!!
The "mask" effect of this does not happen for me when I follow this to the letter. When Unity's default ScrollView is added using the GameObject menu, that maps most of the arrangement discussed in the tutorial, and yet, when settings are adjusted to match what this tutorial says to the letter, the "mask" effect still does not happen. Another thing that never happens no matter how much content is added is the scroll **stopping where the user lets go of it** after the user releases the mouse button. Instead, the scroll view's content bounces right back to wherever it started.
Look into the content size fitter. What's happening is the content is bigger than the actual content rect, so it flings back to where it actually fits into the scroll, even if the content is overflowing
Thanks a lot !
Hello ! :) I joined your Patreon :) and I become Tarobro!
but it doesn't have image that this tutorial show~ , any way that I can get it to follow your tutorial?
This video was looooong before my patreon, but message me on patreon and we can work something out!
@@Tarodev Ok I just sent you message on Patreon :)
Is there a way to scroll a step-by-step? like .. I created something by putting arrows to the left and right, and scrolling my panel by Image width on click, this way it jumps one picture/image on a time.
Is there an easy/simple way to do it with the default scrollbar the way you've shown us?
Great video BTW :)
amazign tut
Thanks
thank you good
Scrollview actually took my 2 days and i still haven't figured out the solution.
Elastic component automatically returns to original position after dragging.
Such a nasty component...
Brilliant
thanks love u
Life Saver
nice
ty
Very first subscriber..... Hmm.
Bastante util
hmmm, it's not working g:(
🎉🎉🎉
Losing my fucking mind whenever i try to move my scrollable container itj ust snaps back into place im sure ill figure it out once i've had some sleep but christ on earth
Basically it's due to how my UI components were structured, make them and set them up to be centred right before making them a child of another UI component.
AND ITS NOT A FUCKING PANEL ITS A FUCKING IMAGE ARGHHHHHHHHHHHHHHHHHHHHH
goood
Thanks!
Thank you!