Unity 2023 Tutorial: Create a Scrollable/Draggable Upgrade List UI with Scroll Rect | UI Design

Unlock your game development potential with Considera: Your hub for Coding, Gaming, and Unity Tutorials!
In today's Unity3D tutorial, we dive into creating a Scrollable and Draggable Upgrade List or User Interface (UI) for your Unity game projects. This step-by-step guide will walk you through the process of designing a Scroll Rect UI, a versatile tool that can be customized to fit your specific needs!
The Scroll Rect is ideal for crafting scrollable UI elements such as lists, maps, and panes:
Experiment with elasticity settings for custom rebound when scrolling past the list's end.
Use the Clamped mode to limit the scroll rect from exceeding its boundaries.
Explore the Infinite mode for endless scrolling adventures.
Tweak the mouse wheel scroll sensitivity as needed.
Manage the scroll rect deceleration speed to your preference.
And even integrate scroll bars for an enhanced user experience!
By the end of this video, you'll have mastered Scroll Rect, allowing you to design any form of scrollable UI or list.
Enjoyed the video? Please like, comment, and subscribe for daily game development tutorials and gaming content. Don't forget to turn on notifications to stay updated!
~~ SUPPORT ME~~
Discord: / discord
FREE: Like, Comment, Subscribe, Turn on notifications, and watch the entire video!
PATREON: / cryptogrounds
PAYPAL: www.paypal.me/...
Stay connected and receive updates about our latest videos by enabling notifications!
#Unity3D #UnityTutorial #GameDevelopment #ScrollRect #UI #UserInterface

[@plontulublalulu]

Tip: set the pivot of the panel to 0.5, 1 instead of 0.5, 0.5 to have it start at the top, not the middle

[@marcin.drozdz]

You deserve a decent beer. I had the same problem over a year ago and managed to forget how I dealt with it. You saved me dozens of minutes that I would have wasted looking for a solution.

[@xXYannuschXx]

Thanks man, saved my two braincells from dying.
Do you know why he didnt need to do that in the video?
He only set it the anchor to the top.

[@SGTIB]

he did have that problem, just for some reason he diddnt show how to fix it @@xXYannuschXx

[@Fuudo_123]

​@@xXYannuschXx I'd like to know too, the tip saved me, I rewatched the video multiple times just to see where I went wrong XD

[@cetta2020]

THANK YOU FOR THE TIPS!

[@eternalstud3nt]

You can also Disable the option "Show Mask Graphic" instead of changing alpha to 1. Great video dude, helped me a ton.

[@ConsideraCore]

Yep!

[@3DavyJones]

I've been programming in Unity for almost half a decade and it's the first time I realise I can do calculations inside the numerical fields like you did in 4:18 . Thank you :D

[@nxt_tim]

This works actually in many numerical fields, not just Unity! Such as Photoshop

[@bloopydlooper8198]

you just saved my career ♥

[@gregorychristopher7039]

I know I'm quite off topic but does anyone know of a good place to stream new tv shows online ?

[@mauricioalfonso8521]

@Gregory Christopher I dunno try Flixportal. you can find it thru google =) -mauricio

[@gregorychristopher7039]

@Mauricio Alfonso Thanks, I went there and it seems like they got a lot of movies there =) I really appreciate it!!

[@mauricioalfonso8521]

@Gregory Christopher No problem :D

[@kingbling7571]

This is amazing. Simple and useful, recommending to anyone who wants a simple scroll UI panel in minutes! Cool stuff

[@leotello864]

unity 2023 tutorial made more than 3 years ago xD nice title change! I rate it!!

[@ConsideraCore]

its a valid title change; still works today!

[@tobiaspeyton7911]

Changed my life with the Layout group

[@davidc1425]

For everyone who has the same issue like mine : my menu option are composed by 3 sprites. One of these three correctly "disappears" behind the mask, the other two don't. I figured out that the one that disappears has Material set to None while the other two have this Material value set with Sprites-Default. Set it to None and it will works.
I hope this helps.
Anyway, very nice tutorial :)

[@muinchishty2473]

This is the best scroll rect unity tutorial out there. I have seen plenty

[@hugobarahona5552]

I used this to make a scrollable inventory with draggable items. It worked perfectly! Thank you for this video!

[@phantomdenstudios]

Thanks bro this is gonna help me with my game jam.

[@GrayFoxware]

I need this every once in a while and since I dont use it enough to remember it I have ventured back to this video about 6 or 7 times already. Thanks!

[@crtglowgames]

Thanks for this information dense yet accessible vid! Helped me through some sticky UI bits. Unrelated to your video but now I've a world of nested prefab variant UI hell to figure out. Probably shouldn't be prototyping and trying to build reusable components at the same time - though I see in many places on the Unity forums people with my same issue..!

[@martin_taavet]

Thank you! You are the only person who told me about size fitter and saved my keyboard from being smashed...

[@chinoarc]

I just wanna say Thank you so much

[@halivudestevez2]

Like your style showing the things.

[@Deanin]

Very helpful video! Scroll Rects in Unity are one of those things I will always forget how to do haha.

[@rashidfarhan6223]

same man I always forget how the scroll rect works

[@gamingattns7819]

thanks this helped a lot i end up using horizonal layout group and with some tinkering with anchors i was able to make my sroll view responive :)
Cheers buddy

[@nils6227]

Use this video every time i need to set up a scrollable UI

[@loganmanor1626]

Thank you so much for this video! You saved me hours of searching!

[@evgeniykuzne5739]

Vertical layout component really helped me, thanks!

[@fastbois6141]

Great and clear tutorial, cutting exactly to the chase. Thank you so much sir, you helped me a lot with my project and earned yourself a subscription!

[@Cextra_the_artist]

Thank you, you've saved me hours of work!

[@dsaassda]

Thank you, best tutorial ❤️😍

[@negligiblefish]

at 3:55 instead of setting the alpha to 1 you can just go to the Mask component and turn off "Show Mask Graphic"

[@hypepill7415]

Thank you that was really useful. Keep up the good work mate!

[@namelessbrat7197]

Thank you! Your tutorial is the only one that helped me! You explained everything masterfully!

[@xingorro8605]

I'm trying to understand that, and each time i watch You video, i learn something new.

[@ConsideraCore]

Awesome glad to hear!

[@deekshithr862]

this is simple easy to follow and has everything you need😀

[@naumov-channel]

Thx, bro all works!

[@AdidasDoge]

You are literally gonna be the next Brackeys

[@ConsideraCore]

Hopefully :)

[@thompson2491]

Thank YOU a lot!!

[@GustavoAzevedoOficial]

This is the one thing I needed! Thank you so much, man!

[@neoblazealex]

Thanks for the help!
🤗

[@Sylph-Eater]

Wow this was exactly what I was looking for tysm!

[@ronikaraGame]

That's awesome!! I was struggling with usual sprites before I discovered how Canvas work...

[@legendaryswordsman2279]

Straight to the point, good vid, keep up the great work

[@cesarsfalcao]

Thanks, great video!!

[@ryangoward-1947]

Thanks Zach, really great stuff!!

[@vectokhanh3416]

Thanks!

[@Case-A-Lace]

Great tutorial hommie! This helped me out a lot!

[@conradoandrade7275]

Man, you know how to teach! Thanks!

[@DarkTemplar42]

Thanks a lot!

[@andressblabla]

Amazing, I'm so glad I found your channel!

[@imabean9710]

Thanks bro you help me two times

Thank youuu

[@iscalio1985sv]

That's working. Thank you :)

[@aksimilumaspvp7278]

saved me, thx

[@OfficialMiles2Go]

Fantastic Video!

[@sufianahmad55]

very well explained

[@gamedev_uno_dos_tres3574]

Thanks so SO much for this video!!

[@PedrovoriskAB]

Great video thank you my friend!!! I am doing that inside a UI not working for me

[@VitorHugo-rj6uf]

What a great tutorial! Thank you!

[@erfanjamshidi6228]

Thanks so helpful.!

[@mansoorahmadkhan3623]

This saved my time. Thanks!

[@Saskamon]

Thanks a lot, mate.

[@imabean9710]

Its Help me Alot

[@michelmilek2891]

Great tutorial, thank you very much!

[@fedrogamedev]

The best tutorial i can say. because your narration is at it's best.

[@ConsideraCore]

Thank you!

[@wenranlu619]

Thank you! this really works!

[@micmicmw]

Wonderful tutorial clear and to the point. Thank you so much.

[@IvanLopez-om6pw]

Very good video bro! Saved my life too!

[@calcipher5073]

Good video!

[@luiscarlosboteroagudelo9249]

Really nice and useful video!

Thank you!

[@MilkTheDuck]

very easy to follow , Thank you very much👍👍😀😀😘

[@robertnagy3942]

you play the bass guitar too, that's epic. What bands do you listen to?

[@bunnnycast1055]

amazing tutorial thanks !

[@HyperQuest]

Thanks for the video!

[@dedz]

Awesome tutorial! Really useful!

[@C6OI]

thx for the tutorial

[@belkmaster]

Do you have a video showing how you found or made the buttons and panels used in this video? I really like the look and would like to try something similar.

[@jeffietheturtle4111]

thanks, helped me a lot

[@darknside]

Bro nice guide, Don't know how to improve smoothness on your smartphone?

[@hellbladeplay7137]

Bro. You save me. You best. Do what you do, and gl.

[@temp-not.of.thatkind]

hmm nice

[@MineNrollDude]

Hey! Great tutorial! Have a question though. For my application the content is 3D card objects with multiple materials on them and the auto spacing only works if I child the cards to a plane, however the cards are still visable beyond the boundaries of the panel.
Is there a way to make 3D objects with many materials work in the same way as your example? Being hidden when outside the mask? Thanks!

[@arisaek7764]

Useful tutorial 👌

[@gurkansanli1978]

thanks bro.

[@thecompletionist605]

Great, thank you.

[@onedaycode]

The second I add the Vertical Layout Group all members disappear...

[@chaostellar]

I have returned to this video 8 times, still don't know how

[@mi_roz]

thanks'

[@irtezamasud1079]

cool

[@dawidziomalify]

5:06 if it doesn't work, change Y pivot to 1

[@yigitokkoo8936]

thanks a lot!

[@brandons2501]

Thank you!! really solved my issue and straight forward and helpful :)

[@the_stray_cat]

im having a problem and im not sure what i missed, for some reson my list keeps starting in the middle . nothing ive tried has fixed it also with my menu when i add another button they overlap and i need to reset the spacing

[@reg8622]

HI,I made a scrollable buttons, which redirects to different scenes, (nearly 20 buttons). is there anyway to save the position at which i left the scene.(ex: i clicked 15th button, so when i come back from that 15th scene , i have to scroll again from the top and select 16th button)

[@DARK_AMBIGUOUS]

You could make it so the when you tap a button, the game gets the position of the scroll menu, or like where it is at and sets it as a save variable, and then make it so when the scene that has the scroll menu starts, the game gets the variable and sets the position to what the variable is, something like that. Or make it so the scene stays loaded always in the background so it doesn’t restart when you go back to it

[@nwotyzarc]

THANK YOU!!!!!!!!!!!!!!!

[@freelancepakistangames7245]

Thanks man ❤

[@mrvastayan]

I will never use the bell, but I followed the other instuctions well and truly before you mentioned them, do I get a cookie?

[@ConsideraCore]

yes

[@CAESAR_IS_GOD_mohammadisaloser]

do you happen to know how to scroll with the right joystick on an xbox/ANY controller

[@NBDbingo5]

let's go algo #cgevolve

[@ksovv228]

I do exactly the same as in the video, but there is a problem, there is no limit on scrolling with "Elastic", and with "Clamped" it stops scrolling at all, I have already watched all the videos on UA-cam and walked through different forums, everyone is talking about "Vertical Layout Group" and "Content size Filter", but they don't help in any way. What to do?

[@mohamedalsaadany6547]

Thanks man, you're awesome

[@zerozoom1.023]

Muy buen video, it's perfec

[@yigit6470]

It doesn't scroll when my cursor is on the button. Buttons are prefab objects.

[@luisguilhermesilvarodrigue8242]

Without the transparent image in the backgroud, the scroll does not work if the draggin or the cursor starts in the space between elements

[@jansvec3855]

Hi. I have a little issue. In unity everything works great. But If i make a build and play on mobile my text content show over the rect. Any help?

[@LALESPETROS]

Great video indeed!!! :)