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

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

Рет қаралды 162,136

3 жыл бұрын

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/cryptogrounds
Stay connected and receive updates about our latest videos by enabling notifications!
#Unity3D #UnityTutorial #GameDevelopment #ScrollRect #UI #UserInterface

Пікірлер: 216

@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 10 ай бұрын

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

@Fuudo_123 9 ай бұрын

@@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 3 ай бұрын

THANK YOU FOR THE TIPS!

@kingbling7571 3 жыл бұрын

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

@stvs9722 2 жыл бұрын

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

@ConsideraCore 2 жыл бұрын

Yep!

@fastbois6141 2 жыл бұрын

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!

@Sylph-Eater 3 жыл бұрын

Wow this was exactly what I was looking for tysm!

@hugobarahona5552 Жыл бұрын

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

@bloopydlooper8198 3 жыл бұрын

you just saved my career ♥

@gregorychristopher7039 3 жыл бұрын

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

@mauricioalfonso8521 3 жыл бұрын

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

@gregorychristopher7039 3 жыл бұрын

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

@mauricioalfonso8521 3 жыл бұрын

@Gregory Christopher No problem :D

@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!

@martin_taavet 2 жыл бұрын

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

@3DavyJones 2 жыл бұрын

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

@HyperQuest 3 жыл бұрын

Thanks for the video!

@neoblazealex Ай бұрын

Thanks for the help! 🤗

@gamingattns7819 2 жыл бұрын

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

@hypepill7415 9 ай бұрын

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

@chinoarc 2 жыл бұрын

I just wanna say Thank you so much

@VitorHugo-rj6uf 2 жыл бұрын

What a great tutorial! Thank you!

@naumov-channel 2 ай бұрын

Thx, bro all works!

@namelessbrat7197 2 жыл бұрын

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

@dedz 2 жыл бұрын

Awesome tutorial! Really useful!

@ronikaraGame 2 жыл бұрын

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

@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..!

@thompson2491 6 күн бұрын

Thank YOU a lot!!

@dsaassda 3 жыл бұрын

Thank you, best tutorial ❤️😍

@conradoandrade7275 2 жыл бұрын

Man, you know how to teach! Thanks!

@GustavoAzevedoOficial Жыл бұрын

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

@muinchishty2473 10 ай бұрын

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

@andressblabla 3 жыл бұрын

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

@cesarsfalcao Жыл бұрын

Thanks, great video!!

@loganmanor1626 6 ай бұрын

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

@phantomdenstudios 6 ай бұрын

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

@Cextra_the_artist 11 ай бұрын

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

@deekshithr862 Жыл бұрын

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

@legendaryswordsman2279 2 жыл бұрын

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

@Case-A-Lace 2 жыл бұрын

Great tutorial hommie! This helped me out a lot!

@michelmilek2891 2 жыл бұрын

Great tutorial, thank you very much!

@moonzhild 2 жыл бұрын

VERY HELPFUL! THANKS!

@davidc1425 2 жыл бұрын

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 :)

@leotello864 5 ай бұрын

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

@ConsideraCore 5 ай бұрын

its a valid title change; still works today!

@MilkTheDuck 3 жыл бұрын

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

@gamedev_uno_dos_tres3574 Жыл бұрын

Thanks so SO much for this video!!

@tobiaspeyton7911 3 жыл бұрын

Changed my life with the Layout group

@evgeniykuzne5739 Жыл бұрын

Vertical layout component really helped me, thanks!

@mansoorahmadkhan3623 2 жыл бұрын

This saved my time. Thanks!

@sufianahmad55 3 жыл бұрын

very well explained

@wenranlu619 Жыл бұрын

Thank you! this really works!

@ryangoward-1947 Жыл бұрын

Thanks Zach, really great stuff!!

@Deanin 3 жыл бұрын

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

@rashidfarhan6223 3 жыл бұрын

same man I always forget how the scroll rect works

@luiscarlosboteroagudelo9249 2 жыл бұрын

Really nice and useful video!

@IvanLopez-om6pw 3 жыл бұрын

Very good video bro! Saved my life too!

@halivudestevez2 3 ай бұрын

Like your style showing the things.

@Saskamon Жыл бұрын

Thanks a lot, mate.

@vectokhanh3416 24 күн бұрын

Thanks!

@jeffietheturtle4111 2 жыл бұрын

thanks, helped me a lot

@HelPfeffer 2 жыл бұрын

Great video, thank you

@iscalio1985sv Жыл бұрын

That's working. Thank you :)

@LALESPETROS 3 жыл бұрын

Great video indeed!!! :)

@bunnnycast1055 Жыл бұрын

amazing tutorial thanks !

Жыл бұрын

Thank you!

@freelancepakistangames7245 2 жыл бұрын

Thanks man ❤

@Coconut.Capybara2 2 жыл бұрын

Thanks so much!

@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.

@erfanjamshidi6228 2 жыл бұрын

Thanks so helpful.!

@imabean9710 11 ай бұрын

Thanks bro you help me two times

@DarkTemplar42 Жыл бұрын

Thanks a lot!

@OfficialMiles2Go Жыл бұрын

Fantastic Video!

Жыл бұрын

Thank youuu

@thecompletionist605 2 жыл бұрын

Great, thank you.

@calcipher5073 3 жыл бұрын

Good video!

@imabean9710 Жыл бұрын

Its Help me Alot

@arisaek7764 Жыл бұрын

Useful tutorial 👌

@C6OI 2 жыл бұрын

thx for the tutorial

@aksimilumaspvp7278 2 жыл бұрын

saved me, thx

@nils6227 Жыл бұрын

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

@negligiblefish 3 жыл бұрын

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

@nwotyzarc 2 жыл бұрын

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

@gurkansanli1978 2 жыл бұрын

thanks bro.

@darknside 2 жыл бұрын

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

@zerozoom1.023 Жыл бұрын

Muy buen video, it's perfec

@user-jy9vc4dv2n 3 жыл бұрын

Thanks you

@robertnagy3942 2 жыл бұрын

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

@Aker 2 жыл бұрын

awesome tutorial! any way to add 3d objects

@AdidasDoge 2 жыл бұрын

You are literally gonna be the next Brackeys

@ConsideraCore 2 жыл бұрын

Hopefully :)

@eckual 3 жыл бұрын

subscribed

@brandons2501 3 жыл бұрын

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

@micmicmw 3 жыл бұрын

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

@hanskloss4168 Жыл бұрын

How can I display the scroll bar menu and 3d scene at the same time? So that the player sees the scroll bar menu when playing.

@MathsPlusGames 3 жыл бұрын

Very clean

@ksovv228 9 ай бұрын

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 KZfaq 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 3 жыл бұрын

Thanks man, you're awesome

@jansvec3855 3 жыл бұрын

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?

@CAESAR_IS_GOD_mohammadisaloser 2 жыл бұрын

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

@d00bix48 3 жыл бұрын

Thanks mate, very helpful! ♥️

@dizmo.. 3 жыл бұрын

Thanks for this guide!

@luisguilhermesilvarodrigue8242 2 жыл бұрын

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

@chaostellar Жыл бұрын

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

@filya1 3 жыл бұрын

Thanks for the great video! If I had only 2 items in the list, is there a way to align them to the top? Right now it centers itself vertically.

@ConsideraCore 3 жыл бұрын

Thank you! Set the child alignment to "Center Top" in your vertical layout group

@filya1 3 жыл бұрын

@@ConsideraCore didn't work. Still aligned in the center.

@ConsideraCore 3 жыл бұрын

Well I learned something new today! Go to your panel, go to rect transform, set the y pivot to 1 and itll work!

@filya1 3 жыл бұрын

@@ConsideraCore awesome, that works! This is so confusing!

@blaketheshepherd 2 жыл бұрын

@@ConsideraCore Heads up, that should be done BEFORE you change the settings on the content size fitter to avoid issues. I struggled for awhile with this lol

@mi_roz 5 ай бұрын

thanks'

@korays0726 3 жыл бұрын

thanks it helped a lot!

@xingorro8605 3 жыл бұрын

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

@ConsideraCore 3 жыл бұрын

Awesome glad to hear!

@AnimilesYT 3 жыл бұрын

I need a horizontal scroll area with dynamic content, but if I follow these steps and replace every vertical thing with horizontal, then it will expand from the middle outward to the left and right instead of only expanding to the right. Any ideas on how to fix this?

@ConsideraCore 3 жыл бұрын

Set the panels' (where the content is) Y pivot to 1

@skidderdidder2346 Жыл бұрын

@@ConsideraCore I'm having the same issue as here except I cant fix it since the panels y pivot is already set to 1. I even re-followed this tutorial and still don't understand where I went wrong.