How to: Dynamic Scroll View in Unity

Подписаться 79 тыс.

Просмотров 34 тыс.

50% 1

Learn how to make a dynamically sized scroll view UI in Unity Canvas easily.
ᐅGet the full Source Code Bundle to my Unity Tutorials 🤓
sam-yam.itch.io/samyam-full-s...
📥 Get the FULL Source Code 📥
/ 69275327
Wishlist my new game BUMBI on Steam!
store.steampowered.com/app/28...
🤝 Support Me 🤝
Patreon: / samyg
Donate: ko-fi.com/samyam
First we need to add a scroll view to our scene, then under the Content gameobject you can add your item prefabs that will be in your scrollview. To make it dynamically resize the content of the Rect Transform based on the number of items, you either add a Horizontal Layout Group or a Vertical Layout Group to the Content Gameobject along with a Content Fitter component set to Preferred setting. Then to dynamically load objects in through code you can get a reference to your prefab, the list of items or images you want to spawn, loop over them and spawn them under the Content transform, and do other processing.
►🔗 Relevant Video Links 🔗
►Kenney UI Pack: Space Expansion
www.kenney.nl/assets/ui-pack-...
►Kenney Pixel Shmup
www.kenney.nl/assets/pixel-shmup
►⏱️ Timestamps ⏱️
0:00 Intro
0:05 Set up ScrollView
1:42 Horizontal Layout Group
3:53 Content Fitter
5:48 Dynamically Add Items Through Code
10:31 IPointerClickHandler
11:19 Outro
💖💖THANK YOU TO ALL MY PATRONS 💖💖
❯❯❯ My Links ❮❮❮
💗 Patreon 💗
/ samyg
💬 Discord Server 💬
/ discord
🐦 Twitter 🐦
/ samyam_utube
📚 Facebook 📚
/ samyam.youtube
👍 Like and Subscribe! 👍
🖥️ Computer Setup 🖥️
*As an Amazon Associate I earn from qualifying purchases.
www.amazon.com/shop/samyam
#unity3d #unitytutorial #gamedevelopment

Наука

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 49

@samyam 2 года назад

Scrolling is great, but don't scroll past the subscribe button and forget to press it ❤️ Wishlist my new game BUMBI on Steam! store.steampowered.com/app/2862470/BUMBI/

@GabrielGcbs Год назад

nice video! +1 sub

@seanloughran6714 2 года назад

Super clean and straight to the point. I'll be referencing this video a LOT in the future!

@peterferencz Год назад

Very clean, understandable and straight to the point. Love it, keep it up.

@GabrielGcbs Год назад

For anyone having the same issue as me: padding, spacing and all dinamic settings weren't working no my prefab. I realized that the problem is that my prefab was an empty gameObject with another gameObjects as childs, and the image source for them was on spriteRenderer, but in order to work on scrollView, the objects must be Canvas Images, so go to UI->Image to create your image prefabs.

@Quinthelas Год назад

Thank you so much for this comment, I was having issues with the layout groups not working and thanks to your comment I realised to switch my sprite renderers into the image ones.

@gllmusic Год назад

This is an amazing tutorial. I didn't even know Unity had these features. It's so very easy.

@TheMeeelting Год назад

Ive been working with unity for 8+ years now and I keep forgetting how to do this (as I maybe do it once every 3 years...) so I have to keep looking it up. This was short and to the point. Great video. Subscribed. Thank you.

@AllOfTheAbove777 2 года назад

Thank you Samyam, I was actually thinking about doing something with scrolling recently.

@obsleet 2 года назад

Wow. This video covered a lot of gaps in my knowledge. Subbed for sure.

@ShinichiKudoQatnip Год назад

Finally Samyam to the rescue, I cannot believe how small things like pivots fall out of my mind.

@nikunjsaraf5150 2 года назад

Just what I needed for my internship project!!! Thankss

@mariokartgameplay6622 2 года назад

Nice. That's exactly what I was looking for🥳

@ThiccyDev Год назад

This is exactly what i need thank you 👍

@HausCoding Год назад

Thank you! this is what i'm looking for 😁

@pixelshenanigans1511 2 года назад

Another great video, Sam! I keep forgetting about those IPointerXxx interfaces, thanks for the reminder!

@QHuy11 2 года назад

This is really helpful. Thanks a lot!!!

@CHTux Год назад

thank you, the Layout Groups solved my issue I was trying to solve!

@Moondog943 Год назад

Thanks for the great tutorial, with this and your other video about creating a leaderboard it helped me understand how to create a dynamically loading leaderboard! These have been super helpful and I know I can use your content as resources in the future

@samyam Год назад

Glad to hear! 😄

@santoshnalla2283 2 года назад

Can you show us how to add scroll view when we have large number of objects? Like dynamically display only few on screen

@Omphaloskopie Год назад

this is eerily close to what i was looking for. good tempo, too!

@samyam Год назад

Thank you so much for the donation! ❤️

@biswajeetchaudhuri832 2 года назад

Thanks a lot for this tutorial. ❤️👍👏

@ligofleyens9131 2 года назад

That was so cool.

@shaunmax8165 Год назад

Is it possible to divide the horizontal scroll into 4 pages & then make the scroll to snap to each page?

@ligofleyens9131 2 года назад

It's a bit more complicated, but could you please teach how to make a book interface with page turning animation? Something like some games do (Skyrim I remember does)

@MattRaffel Год назад

I tried making this with a vertical layout group instead, but all of the child items were just centered in the middle.

@Hazzel31337 Год назад

good one !

@gamogis 2 года назад

actually you could serialize and instantiante items not as gameObject but as ScrolViewItem, in this case you don't need to tryGetcomponent method and acces to properties and methods directly.

@looopy1 Год назад

you're a great teacher

@samyam Год назад

Thank you!

@amikay93 2 года назад

Buen vídeo como siempre 😃

@samyam 2 года назад

Gracias!

@ShinichiKudoQatnip 2 года назад

Such incredible timing, can you read my mind? 😍

@samyam 2 года назад

Yes

@ShinichiKudoQatnip 2 года назад

@@samyam 😱

@asadickens9353 2 года назад

I have always done the content size calculations in code u.u ContentSizeFitter would have saved me soooo much math @.@ I also always put a button in the prefab for click events! I think the interface is generally better. Despite building many dynamic scroll views I still have more to learn /o/ thanks for the tid bits! Now one thing I couldn't solve was an infinite scrolling scroll view.... where the items loop back around. Conceptually I understand it, but mathematically it wasn't working right. I'm still alive so I will figure it out XD

@seanloughran6714 Год назад

I'm having a weird bug. When I copy and paste or drag my prefab into the Content panel, everything works fine. But when I instantiate through code exactly how you did, all of the items get squished and get negative sizes. Anyone have any ideas? I've had the worst luck with the [Horizontal/Vertical]Layout groups cause of things like this. EDIT: In code, I force the .sizeDelta to what I know it should be and it looks great. So weird!

@Sylfa Год назад

Are you using the Start event/method? As far as I know the layout groups don't react to having items added to them so you have to trigger them to do a layout if you have already passed the layout phase.

@shubhampatel8193 2 года назад

Can you Make a Short Video on How to adjust Cinemachine Cam Sensitivity through Slider pls...

@biswajeetchaudhuri832 2 года назад

Please make a tutorial for tab menu system. Like in shop menu of many casual games.

@vishwa2602 2 года назад

Hi💜Can you make a tutorial for opening portal from one scene to another scene.

@PICHONLINX 10 месяцев назад

Praise you, oh, wise keeper of unity secrets and all things unknown! A lamb shall be offered in your name.

@watercat1248 2 года назад

This definitely scrolling but what do you mean by dinamic? The only reason don't use scrolling very offended in unity is because the is don't work correctly wean you use arrow keys and dpad what I mean by that is let say that I have i list with items in the dinamic scrolling wail that player able to select with keyboard or controller the right item wean the go to the go out off the view area for some reason the don't move the don't scrolling the scroll bar

@samyam 2 года назад

Adding in an infinite amount of items through code, and having the UI automatically fit any number of items.

@watercat1248 2 года назад

@@samyam do you know how to make the scrolling area to move wean the wean someone use keys and move in the object on scroll that is out of view area? If you don't know don't wory I will ask in the discord company

@jasonwilliams8730 2 года назад

👍

@jolene6911 Год назад

Thanks! I wasn’t aware of TryGetComponent() previously, it’s a great fail safe method. I added an else in there to Debug.LogError() when the component wasn’t found.