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

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ก.ย. 2024

ความคิดเห็น • 221

  • @plontulublalulu
    @plontulublalulu ปีที่แล้ว +86

    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
      @marcin.drozdz ปีที่แล้ว +5

      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
      @xXYannuschXx ปีที่แล้ว +3

      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
      @SGTIB ปีที่แล้ว

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

    • @Fuudo_123
      @Fuudo_123 10 หลายเดือนก่อน +1

      ​@@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
      @cetta2020 5 หลายเดือนก่อน +1

      THANK YOU FOR THE TIPS!

  • @stvs9722
    @stvs9722 2 ปีที่แล้ว +24

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

  • @3DavyJones
    @3DavyJones 2 ปีที่แล้ว +12

    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
      @nxt_tim ปีที่แล้ว

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

  • @kingbling7571
    @kingbling7571 3 ปีที่แล้ว +22

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

  • @bloopydlooper8198
    @bloopydlooper8198 3 ปีที่แล้ว +19

    you just saved my career ♥

    • @gregorychristopher7039
      @gregorychristopher7039 3 ปีที่แล้ว

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

    • @mauricioalfonso8521
      @mauricioalfonso8521 3 ปีที่แล้ว

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

    • @gregorychristopher7039
      @gregorychristopher7039 3 ปีที่แล้ว

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

    • @mauricioalfonso8521
      @mauricioalfonso8521 3 ปีที่แล้ว

      @Gregory Christopher No problem :D

  • @leotello864
    @leotello864 6 หลายเดือนก่อน +1

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

    • @ConsideraCore
      @ConsideraCore  6 หลายเดือนก่อน +2

      its a valid title change; still works today!

  • @davidc1425
    @davidc1425 2 ปีที่แล้ว +3

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

  • @tobiaspeyton7911
    @tobiaspeyton7911 3 ปีที่แล้ว +1

    Changed my life with the Layout group

  • @phantomdenstudios
    @phantomdenstudios 8 หลายเดือนก่อน +1

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

  • @hugobarahona5552
    @hugobarahona5552 ปีที่แล้ว +1

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

  • @muinchishty2473
    @muinchishty2473 ปีที่แล้ว

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

  • @GrayFoxware
    @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
    @martin_taavet 2 ปีที่แล้ว

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

  • @hypepill7415
    @hypepill7415 10 หลายเดือนก่อน +1

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

  • @Deanin
    @Deanin 3 ปีที่แล้ว +7

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

    • @rashidfarhan6223
      @rashidfarhan6223 3 ปีที่แล้ว

      same man I always forget how the scroll rect works

  • @crtglowgames
    @crtglowgames 2 หลายเดือนก่อน

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

  • @chinoarc
    @chinoarc 2 ปีที่แล้ว +1

    I just wanna say Thank you so much

  • @fastbois6141
    @fastbois6141 2 ปีที่แล้ว +3

    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!

  • @gamingattns7819
    @gamingattns7819 2 ปีที่แล้ว +1

    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

  • @halivudestevez2
    @halivudestevez2 5 หลายเดือนก่อน

    Like your style showing the things.

  • @dsaassda
    @dsaassda 3 ปีที่แล้ว +5

    Thank you, best tutorial ❤️😍

  • @evgeniykuzne5739
    @evgeniykuzne5739 ปีที่แล้ว

    Vertical layout component really helped me, thanks!

  • @loganmanor1626
    @loganmanor1626 7 หลายเดือนก่อน

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

  • @naumov-channel
    @naumov-channel 4 หลายเดือนก่อน

    Thx, bro all works!

  • @namelessbrat7197
    @namelessbrat7197 2 ปีที่แล้ว

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

  • @Cextra_the_artist
    @Cextra_the_artist ปีที่แล้ว

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

  • @neoblazealex
    @neoblazealex 3 หลายเดือนก่อน

    Thanks for the help!
    🤗

  • @thompson2491
    @thompson2491 หลายเดือนก่อน

    Thank YOU a lot!!

  • @GustavoAzevedoOficial
    @GustavoAzevedoOficial ปีที่แล้ว

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

  • @Sylph-Eater
    @Sylph-Eater 3 ปีที่แล้ว

    Wow this was exactly what I was looking for tysm!

  • @deekshithr862
    @deekshithr862 ปีที่แล้ว

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

  • @nils6227
    @nils6227 ปีที่แล้ว

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

  • @cesarsfalcao
    @cesarsfalcao ปีที่แล้ว

    Thanks, great video!!

  • @legendaryswordsman2279
    @legendaryswordsman2279 2 ปีที่แล้ว

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

  • @ryangoward-1947
    @ryangoward-1947 ปีที่แล้ว

    Thanks Zach, really great stuff!!

  • @negligiblefish
    @negligiblefish 3 ปีที่แล้ว +11

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

  • @AdidasDoge
    @AdidasDoge 2 ปีที่แล้ว +1

    You are literally gonna be the next Brackeys

  • @VitorHugo-rj6uf
    @VitorHugo-rj6uf 2 ปีที่แล้ว +1

    What a great tutorial! Thank you!

  • @OfficialMiles2Go
    @OfficialMiles2Go ปีที่แล้ว

    Fantastic Video!

  • @HyperQuest
    @HyperQuest 3 ปีที่แล้ว

    Thanks for the video!

  • @Case-A-Lace
    @Case-A-Lace 2 ปีที่แล้ว

    Great tutorial hommie! This helped me out a lot!

  • @ronikaraGame
    @ronikaraGame 3 ปีที่แล้ว

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

  • @vectokhanh3416
    @vectokhanh3416 2 หลายเดือนก่อน

    Thanks!

  • @DarkTemplar42
    @DarkTemplar42 ปีที่แล้ว +1

    Thanks a lot!

  • @moonzhild
    @moonzhild 2 ปีที่แล้ว +1

    VERY HELPFUL! THANKS!

  • @andressblabla
    @andressblabla 3 ปีที่แล้ว

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

  • @conradoandrade7275
    @conradoandrade7275 2 ปีที่แล้ว

    Man, you know how to teach! Thanks!

  • @xingorro8605
    @xingorro8605 3 ปีที่แล้ว +2

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

  • @sufianahmad55
    @sufianahmad55 3 ปีที่แล้ว

    very well explained

  • @mansoorahmadkhan3623
    @mansoorahmadkhan3623 2 ปีที่แล้ว

    This saved my time. Thanks!

  • @erfanjamshidi6228
    @erfanjamshidi6228 2 ปีที่แล้ว +1

    Thanks so helpful.!

  • @aksimilumaspvp7278
    @aksimilumaspvp7278 2 ปีที่แล้ว +1

    saved me, thx

  • @IvanLopez-om6pw
    @IvanLopez-om6pw 3 ปีที่แล้ว

    Very good video bro! Saved my life too!

  • @iscalio1985sv
    @iscalio1985sv ปีที่แล้ว

    That's working. Thank you :)

  • @dedz
    @dedz 2 ปีที่แล้ว

    Awesome tutorial! Really useful!

  • @michelmilek2891
    @michelmilek2891 2 ปีที่แล้ว

    Great tutorial, thank you very much!

  •  ปีที่แล้ว

    Thank youuu

  • @MilkTheDuck
    @MilkTheDuck 3 ปีที่แล้ว

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

  • @Saskamon
    @Saskamon ปีที่แล้ว

    Thanks a lot, mate.

  • @wenranlu619
    @wenranlu619 ปีที่แล้ว

    Thank you! this really works!

  • @imabean9710
    @imabean9710 ปีที่แล้ว

    Thanks bro you help me two times

  •  ปีที่แล้ว

    Thank you!

  • @calcipher5073
    @calcipher5073 3 ปีที่แล้ว

    Good video!

  • @luiscarlosboteroagudelo9249
    @luiscarlosboteroagudelo9249 2 ปีที่แล้ว

    Really nice and useful video!

  • @imabean9710
    @imabean9710 ปีที่แล้ว

    Its Help me Alot

  • @bunnnycast1055
    @bunnnycast1055 ปีที่แล้ว

    amazing tutorial thanks !

  • @onedaycode
    @onedaycode 3 หลายเดือนก่อน

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

  • @arisaek7764
    @arisaek7764 ปีที่แล้ว

    Useful tutorial 👌

  • @jeffietheturtle4111
    @jeffietheturtle4111 2 ปีที่แล้ว

    thanks, helped me a lot

  • @C6OI
    @C6OI 2 ปีที่แล้ว

    thx for the tutorial

  • @freelancepakistangames7245
    @freelancepakistangames7245 3 ปีที่แล้ว

    Thanks man ❤

  • @micmicmw
    @micmicmw 3 ปีที่แล้ว +1

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

  • @pedroaboffa
    @pedroaboffa 5 วันที่ผ่านมา

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

  • @MineNrollDude
    @MineNrollDude 24 วันที่ผ่านมา

    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!

  • @thecompletionist605
    @thecompletionist605 2 ปีที่แล้ว

    Great, thank you.

  • @LALESPETROS
    @LALESPETROS 3 ปีที่แล้ว

    Great video indeed!!! :)

  • @gurkansanli1978
    @gurkansanli1978 2 ปีที่แล้ว

    thanks bro.

  • @robertnagy3942
    @robertnagy3942 2 ปีที่แล้ว

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

  • @nwotyzarc
    @nwotyzarc 2 ปีที่แล้ว

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

  • @hellbladeplay7137
    @hellbladeplay7137 3 ปีที่แล้ว +1

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

  • @zerozoom1.023
    @zerozoom1.023 ปีที่แล้ว

    Muy buen video, it's perfec

  • @fedrogamedev
    @fedrogamedev 3 ปีที่แล้ว

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

  • @MathsPlusGames
    @MathsPlusGames 3 ปีที่แล้ว +1

    Very clean

  • @reg8622
    @reg8622 2 ปีที่แล้ว +1

    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
      @DARK_AMBIGUOUS 2 ปีที่แล้ว

      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

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

  • @the_stray_cat
    @the_stray_cat 24 วันที่ผ่านมา

    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

  • @darknside
    @darknside 3 ปีที่แล้ว

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

  • @mohamedalsaadany6547
    @mohamedalsaadany6547 3 ปีที่แล้ว +1

    Thanks man, you're awesome

  • @mi_roz
    @mi_roz 7 หลายเดือนก่อน

    thanks'

  • @brandons2501
    @brandons2501 3 ปีที่แล้ว

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

  • @eckual
    @eckual 3 ปีที่แล้ว

    subscribed

  • @ksovv228
    @ksovv228 11 หลายเดือนก่อน

    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 TH-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?

  • @d00bix48
    @d00bix48 3 ปีที่แล้ว

    Thanks mate, very helpful! ♥️

  • @dizmo..
    @dizmo.. 3 ปีที่แล้ว

    Thanks for this guide!

  • @mobilenerdgames
    @mobilenerdgames 3 ปีที่แล้ว

    just what i needet thanks man ! keep it up

  • @Преродактель
    @Преродактель 3 ปีที่แล้ว

    Thanks you

  • @irtezamasud1079
    @irtezamasud1079 ปีที่แล้ว

    cool

  • @dawidziomalify
    @dawidziomalify 2 ปีที่แล้ว +1

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

  • @xsraut
    @xsraut 3 ปีที่แล้ว

    Awesome Tutorial. Thank You.

  • @chaostellar
    @chaostellar ปีที่แล้ว

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