How to scale Unity UI objects for every screen - Unity UI tutorial

Поділитися
Вставка
  • Опубліковано 31 січ 2025

КОМЕНТАРІ • 128

  • @CocoCode
    @CocoCode  3 місяці тому

    Dive deeper into UI development
    👉 Check out my newest course, Master Unity UI ➡ bit.ly/cc-unity-ui-5
    It’s packed with everything you need to create awesome UI ✨🎨

  • @wyrda2452
    @wyrda2452 Рік тому +19

    As someone starting out in UI development in Unity, this was the best explanation of anchor presets I've seen. Nicely done.

  • @justvlaxx1260
    @justvlaxx1260 3 роки тому +13

    Thank you man. Company gave me a full project to do on my own and I am utterly terrible with the UI. Your videos, at my own free time at home, made it very simple to create the UI that designer envisioned and artist created (sprites).
    Again, thank you very, very much for this tutorial.

    • @someonesomewhere1975
      @someonesomewhere1975 2 роки тому

      Onboarding for a work project also counts as work - no matter how trivial the task seesm ;)

    • @karthik-vq2rj
      @karthik-vq2rj Рік тому +2

      can you refer me bro for your working company please. I have experience of 1 year

    • @Doil-9938
      @Doil-9938 Рік тому +1

      @@karthik-vq2rji admire this grind

    • @karthik-vq2rj
      @karthik-vq2rj Рік тому

      @@Doil-9938 it's very good

  • @MrFarkasOfficial
    @MrFarkasOfficial 4 роки тому +10

    I’m binge watching you tutorials. They’re so nice.

  • @Grovezy
    @Grovezy 4 роки тому +41

    Simple and Straight to the point, excellent.

  • @brksfrb7085
    @brksfrb7085 2 місяці тому

    I've been searching this for days... Never seen canvas scaling by screen width thank you very much!! If I couldn't find it in this video either, I was gonna make it manually with scripting.

  • @blucatdev
    @blucatdev 3 роки тому +2

    Changing the UI scale mode to change with the screen size was a game changer for me! Thank you!!!!

  • @TheScorpionAly
    @TheScorpionAly 2 роки тому +3

    Very good tutorial, you are very good at explaining things for beginners and I hope that your channel grows and helps as many people as possible!

  • @christianalejandroflores8501
    @christianalejandroflores8501 2 роки тому

    great tutorial, all your videos are simple and concise!!
    This kind of channels deserve a great success!

  • @ironichamster8197
    @ironichamster8197 2 роки тому

    Thank you so much! This was so helpful, I was worried since I'll be presenting my game on a projector that my game would scale differently than on my laptop. Now it looks great!

  • @CocoCode
    @CocoCode  4 роки тому +13

    Hope you enjoyed this one! Any suggestions for next Unity UI tutorials? 🎉

    • @RonnieBanerjee007
      @RonnieBanerjee007 4 роки тому

      Can you talk about what panels and canvases are in your next video, it can be just for 10 seconds but I just need to grasp some concepts cause I can't seem to wrap my head around them.
      Really really amazing videos by the way.

    • @animationspace8550
      @animationspace8550 4 роки тому +4

      Hexagonal UI! All of it! Every hexagon UI piece you could think of! And if that doesn't work... make another. Because hexagons are the bestagons!

    • @CocoCode
      @CocoCode  4 роки тому +1

      Woah, sounds like a good one!

    • @iannnavas
      @iannnavas Рік тому

      I liked it so much! Your explanation was very calm and clear! Thanks

  • @Feynman.R
    @Feynman.R 3 роки тому +1

    Thanks for tutorial, only in your video I fully understand why my buttons go like crazy when scaling. And by the way, in this video you are using my background image and trees, glad that someone from gamedev using my stock images. :)

  • @dzmo-official
    @dzmo-official 2 роки тому

    Such a good tutorial man! You are what make UA-cam great!

  • @amritpalsinghubhi5859
    @amritpalsinghubhi5859 3 роки тому +1

    this is super best i was looking on it for many days thanks bro.

  • @Diego-8842
    @Diego-8842 Рік тому

    this tutorial helped me alot thanks man, i'm now struggling with key mapping using the old unity input systems.

  • @ignatiusreilly8280
    @ignatiusreilly8280 3 роки тому +7

    Good stuff, I wish I came across this sooner. I was struggling with Unity UI scaling, which was irritating to try to trick into working correctly.

  • @hwzzegwggs8029
    @hwzzegwggs8029 3 роки тому

    Thank you so much I was searching so long for this video :)

  • @bmcg3712
    @bmcg3712 3 роки тому

    Oh my god, thank you thank you thank you!! Such a simple thing in retrospect, but a big deal if it's missed!!

  • @backitdev
    @backitdev 3 роки тому

    Cool video, thanks 😊
    I watched a few video before (4 or 5) but this was the most understandable for me!
    Keep up the good work 👏

  • @filipedecamargo3390
    @filipedecamargo3390 2 роки тому

    Thanks to you I was able to reverse engineer some things to fix my UI. Thx :D

  • @Leather128
    @Leather128 3 роки тому +1

    Thanks for this video! This just made my game so much better!

  • @msc-clk
    @msc-clk Рік тому

    amazing simple but useful tutorial. kudos man!

  • @-hackers_industry
    @-hackers_industry 2 роки тому

    thank you so much man you saved me centuries of work

  • @kaleyikan
    @kaleyikan 2 роки тому

    Thx a lot thats what ive been looking for. It solved my problem perfectly. Thx a lot. You gained 1 subscriber and 1 like. Thank you

  • @KlingStudios
    @KlingStudios 2 роки тому

    This is awesome, thanks! save me alot of headaches.

  • @krakenchan
    @krakenchan 7 місяців тому

    I've been working VR GUI for so long I forget simple things thank you

  • @IsraelLucasSousaSilva
    @IsraelLucasSousaSilva Рік тому +1

    It reminds me of Figma's autolayout, pretty cool. Thanks!

  • @duvieira2836
    @duvieira2836 4 роки тому +1

    loved the tutorial!! thx for the help!!

    • @CocoCode
      @CocoCode  4 роки тому

      Thank you! If you have any suggestion for next video, be sure to share it here 🎉

  • @stratocasting
    @stratocasting 2 роки тому

    thats exactly what i'm searching for, thanks...

  • @redcorecreations
    @redcorecreations 4 роки тому +3

    this tutorial is a treasure :D well explained thank u sir !

    • @CocoCode
      @CocoCode  4 роки тому +1

      Glad you liked it!

    • @redcorecreations
      @redcorecreations 4 роки тому +2

      @@CocoCode I would love to see some Shop tutorial , ( How we can make a ui shop with some items and some coins , .. )

  • @KemMuhammad
    @KemMuhammad 4 роки тому +1

    It can not be this simple. LOL! Thank You Sir!

  • @m4x1me54
    @m4x1me54 2 роки тому

    Very quick and works perfectly !

  • @elainechen5033
    @elainechen5033 3 роки тому

    Thank you so much! I learned something new : D

  • @plaidev
    @plaidev 4 роки тому +1

    very high quality videos!

  • @thilosapp5300
    @thilosapp5300 3 роки тому +1

    Love ur videos!

  • @kurechita
    @kurechita 3 роки тому

    Thanks for the video, my english is very bad and I could understand everything perfectly

  • @Samuel_3000
    @Samuel_3000 2 роки тому

    Thank you for the tutorial 😎

  • @runrajrun
    @runrajrun 2 роки тому +1

    Amazing video!

  • @bananaman.__
    @bananaman.__ 2 роки тому

    Thank you so much. Very helpful!

  • @helenawilsena5821
    @helenawilsena5821 4 роки тому +2

    I like you channel name. Its really pretty💜💛💚

  • @animationsbelike
    @animationsbelike 2 роки тому

    Thank you! :) I used your technique

  • @Praj7wal
    @Praj7wal 2 роки тому

    Thanks that was very helpful

  • @nafallahi
    @nafallahi 3 місяці тому

    Very useful. Thank

  • @RF-ww5gc
    @RF-ww5gc Рік тому +1

    Thanks very much

  • @darkerror0539
    @darkerror0539 Рік тому

    thx for this tut

  • @vijayanand2783
    @vijayanand2783 3 роки тому +1

    nice video.keep uploading videos

  • @Hasibix
    @Hasibix 3 роки тому

    thank you soo much your really good subbed

  • @DrFizzyQuizzler
    @DrFizzyQuizzler 2 роки тому

    Your my hero!!!

  • @Hund335
    @Hund335 3 роки тому

    Thank you VERY much the Tutorial is very good and strate so you earned my Like and Abo (sry if its not gramatical correct because im not that good at English xd)

  • @damar1967
    @damar1967 3 роки тому +2

    thank you!

  • @gulnursezen280
    @gulnursezen280 3 роки тому

    Thanks man :)

  • @khalidQweder
    @khalidQweder 8 місяців тому

    Excellent.

  • @mysterious_monolith_
    @mysterious_monolith_ Рік тому

    Awesome!

  • @nooxegg6610
    @nooxegg6610 3 роки тому +1

    Thanks a lot coco

  • @7415_Gamer
    @7415_Gamer 3 роки тому

    Good tuts bro.

  • @FadedGamingMain
    @FadedGamingMain 3 роки тому

    Thank you!!

  • @om3rz662
    @om3rz662 Рік тому

    Thanks bro!

  • @seiitkhanotegali7734
    @seiitkhanotegali7734 2 роки тому

    thanks helped alot

  • @vacantknight
    @vacantknight 3 роки тому

    THANK YOU

  • @kylopootis6489
    @kylopootis6489 8 місяців тому

    thank you very much sir

  • @averydee5328
    @averydee5328 2 роки тому

    Thank you, god bless.

  • @akmaludddin9281
    @akmaludddin9281 11 місяців тому

    i hope i found this channel sooner

  • @cahydra
    @cahydra 3 роки тому

    Thanks kind person

  • @LukeKochan
    @LukeKochan 2 роки тому

    great!

  • @amrascripter2522
    @amrascripter2522 3 роки тому

    Thank you❤️ you help me to fix Rect Position and image or button position❤️❤️❤️❤️

  • @deb5976
    @deb5976 Рік тому

    Amazing! The only problem I still find is that you need to choose if the ui will follow the size of the screen horizontaly or verticaly. you cant choose both. So, you are making a game with a menu on the botton and one on the top, you want them to be the size of the screen horizontaly, but, when you change phone screens, if you go to an ipad for example, the top and bottom menus almos touch each other.

    • @stephendoesnothing-kl2gu
      @stephendoesnothing-kl2gu Рік тому

      whenever that happens for me I just make 2 different applications, because sometimes I also need to optimize the PC game for mobile

  • @50Gameplay
    @50Gameplay 3 роки тому

    Talking about 9-slicing with sprites in the editor would also help. Maybe this is one point that is missing here in this video.

  • @EtherealLogic
    @EtherealLogic 6 місяців тому

    I love you platonically 😃

  • @pudgepudge1548
    @pudgepudge1548 3 роки тому +2

    Do you know if its possible to scale with sprite renderers instead of image components?

  • @XiroNyakuya
    @XiroNyakuya Рік тому

    Doesn't work. I have a button with the "Top-Left" selected, and when I resize the screen as you do, it moves up and down. If I just select "top-left" it works, but if after tha I move the button a little to adjust it to the screen, then it doesn't work.
    There must be something else missing.

  • @giannat418
    @giannat418 3 роки тому

    I love your voice, dude

  • @kardokdelikaya9570
    @kardokdelikaya9570 2 роки тому +1

    I want to make UI looks as good as at 1920x1080 resolution while it's at 1280x720. Like every other gameObject on the scene will look foggy but UI will stay at it's finest. I tried a few stuff but couldn't pull this one of. Do you know how can I make this to happen?

  • @Galder6
    @Galder6 2 роки тому

    For keeping aspect ratio is best using % instead of pixels. My two cents

  • @hawwka
    @hawwka 3 роки тому

    From Russia with love!

  • @anticstudios
    @anticstudios 2 роки тому

    thank you

  • @dertobbe1176
    @dertobbe1176 Рік тому

    I have an issue that sometimes when i Start the Editor, my panel are out of Position. I have 2 panel inside the canvas. 1 is top half right the other is bottom half right. The bottom one went down and the top one went up so half of each penal is out of the canvas. Any ideas?

  • @tiwagchronicles2789
    @tiwagchronicles2789 Рік тому

    How should I make a box-like button, not a rectangular one?

  • @ignatiusreilly8280
    @ignatiusreilly8280 3 роки тому

    In this example, are the Bars group, health bar, mana bar, pause button - are these panels?
    I got in trouble by nesting Canvases under the main UI Canvas, now trying to fix this mess.

    • @CocoCode
      @CocoCode  3 роки тому

      Check out my livestream where I build a UI from the ground up. It's a bit long but it should give you a pretty good idea of how to setup everything!
      ua-cam.com/video/xteNAZxyf1Y/v-deo.html

    • @ignatiusreilly8280
      @ignatiusreilly8280 3 роки тому

      @@CocoCode Thanks, will check it out when I'm done with my current thing.
      I should mention, my problem was nested canvasses, now fixed it.

  • @JulioCesar-vh4jd
    @JulioCesar-vh4jd 2 роки тому

    Ty :)

  • @jellycode4949
    @jellycode4949 2 роки тому

    Plz help, How do I do this trick on gameobjects that aren't UI/canvas items??

  • @mdmahinrahman3937
    @mdmahinrahman3937 8 місяців тому

    Please make a tutorial for constant camera aspect retio for all mobile screens in unity 💞.............mean eventsystem

  • @GalaxyHellsGamer
    @GalaxyHellsGamer 2 роки тому

    TYSM

  • @QWGamesOfficial
    @QWGamesOfficial Рік тому

    Why my ui elements dont have to anchor presets?

  • @АгафенПарфенов

    You are not scale UI elements, only justify position. How to exactly change size of elements? Because if I run my game in high resolution elements still small

  • @emomaxd
    @emomaxd 3 роки тому +1

    thanks

  • @DARK_AMBIGUOUS
    @DARK_AMBIGUOUS 2 роки тому

    But how do I make it so when you play a game on an iPad, the UI elements are a lot smaller because the iPad screen has a lot more space, in my game on my iPad, the hi elements are way bigger

  • @PraveenKumar-pj9ls
    @PraveenKumar-pj9ls 4 роки тому

    Great tutorial.. :) thank you very much. But the player, enemy and other game objects - do they need to be inside canvas or outside? I see your game elements are outside canvas. i'm trying them by using inside canvas? Am i doing it wrong? Kindly help!

    • @CocoCode
      @CocoCode  4 роки тому +1

      Hey there - great question!
      Yes, usually you place all elements related to the gameplay not in the UI/canvas. I'll soon create a few videos series on how to create a simple game and I'll show how to separate UI and the game itself!

    • @PraveenKumar-pj9ls
      @PraveenKumar-pj9ls 4 роки тому

      @@CocoCode cool, a video on that would be much helpful. Waiting for that... thank you for your reply.. meanwhile I'll try moving them out of canvas and see how it works. Have a good day 😊🤝

  • @littlegreen4899
    @littlegreen4899 3 роки тому

    Only problem is that when I set the canvas scaler to scale with screen size it makes everything massive

  • @santoshparihar6820
    @santoshparihar6820 4 роки тому

    Thanks for the video. But we can't make each games in canvas. We have to use sprites, and they don't have anchor points, so how can we make all sprites fit to the screen size

    • @CocoCode
      @CocoCode  4 роки тому +1

      You mean how to make your game (not related to UI) scalable to all devices? This is a completely different topic. (Please correct me if I misunderstood your question!) thanks for watching!

    • @santoshparihar6820
      @santoshparihar6820 4 роки тому

      @@CocoCode Yes you got my point. So could you please make a video on it

    • @jellycode4949
      @jellycode4949 2 роки тому

      @@santoshparihar6820 plz tell me the solution if u got the answer to that question

  • @ilikepotatos5891
    @ilikepotatos5891 2 роки тому

    My pixel fonts Looks blurry in full screen
    How do i solve it?

  • @mivuh
    @mivuh 3 роки тому

    Thx for the Video, im new in game dev and have the same Problem with my borders on a top down 2d Game.
    Ive made landscape full hd and made the boarders exactly on my canves outlines. It works perfectly on my xiaomi but when i load it up on a different phone no boarder does fit the outline of the screen as intented.
    Do you have any feedback for thi

  • @ferds814
    @ferds814 Рік тому

    steaight forward. doesnt work. almost like anchor doesnt exist for me

  • @Jono1982
    @Jono1982 3 роки тому

    Can you make it so the screen cannot go too small?

  • @riotzone7767
    @riotzone7767 4 роки тому

    I think that to make video about Screen Wrap its great idea. What you think about it?

    • @CocoCode
      @CocoCode  4 роки тому

      What do you mean by ‘screen wrap’?

  • @TOKIOFXTRADING
    @TOKIOFXTRADING 2 роки тому

    tnx mn

  • @Luvomy
    @Luvomy 2 роки тому

    what about game elements?

  • @JeremWatts
    @JeremWatts 2 роки тому

    ah yes. health and mana bars. just as important as the powz menoo.

  • @sigridopps3049
    @sigridopps3049 Рік тому

    👎He makes it look like you just click the picture for upper left corner to stick your game object to the upper left corner. But that is exactly not what it does. It's going to take beginners a while to realize, that this video explained exactly nothing but gave a false impression of how it works. You have to watch the official unity tut to understand that these corners are not the corners that you make your game object stick to but actually they are the corners to which you put your object in relation to (which i am sorry too say is a bit more complicated than what this Coco here is trying to make it look like). A beginner who watched this will always keep wondering why it never really works 100% the way he would expect.

  • @westparezal
    @westparezal 2 роки тому

    nothing with real project.

  • @exuchyy
    @exuchyy 10 місяців тому

    i didnt understand shit