Master ROUNDED corners for your UI | Unity UI tutorial

🎁 Download package for FREE: www.patreon.com/posts/5450546...
This tutorial/guide will show you how to create a nice rounded corners for you Unity project with UI elements like buttons and images/frames. I will show you how to generate a rounded corner sprite image and then apply it to your project with sprite editor. At the end you will also learn what is the difference between Sliced and Tiled display mode.
💜 Join our Discord: / discord
🔵 Follow me on Twitter: / bionicl333
You will learn:
- How to create rounded corners for your game
- How to use Unity sprite editor
- How to slice sprite in Unity
- How to use tiled sprite
- How to create rounded button image
Timestamps:
0:00 - Intro
1:17 - Preparing image
2:12 - Setup in Unity
3:46 - More examples

Пікірлер: 88

  • @Danidev
    @Danidev Жыл бұрын

    quick and good tutorial 😎

  • @christhedevYT

    @christhedevYT

    Жыл бұрын

    looks like somebody wants to get back into game dev👀

  • @PengiiiiGameDev

    @PengiiiiGameDev

    Жыл бұрын

    Whoa dude just came back to life 👁️👄👁️

  • @dontCallMe..

    @dontCallMe..

    Жыл бұрын

    i thought you were dead

  • @SaharshDev

    @SaharshDev

    Жыл бұрын

    damn dani here too!

  • @unityUser

    @unityUser

    Жыл бұрын

    Ayo dani😂😂

  • @PrimerBlobs
    @PrimerBlobs2 жыл бұрын

    This is one of the best tutorial videos I've seen. It balances getting to the point and being concretely useful with also explaining the reasoning behind everything. And the free example files to ensure I could follow along were very useful. Looking forward to seeing more of your stuff!

  • @Wonk0

    @Wonk0

    2 жыл бұрын

    sup Primer

  • @demyanrudenko

    @demyanrudenko

    2 жыл бұрын

    Can't say I expected to see you here O_O

  • @FOLDIK_UA
    @FOLDIK_UA18 күн бұрын

    Finally, I found the necessary solution to the problem of how to make these edges for sprites that the editor of Unity warned me about. The biggest difficulty is that when you look for edges directly, it returns custom edges like a sprite color stroke, it's just terrible. Thanks for the video, you helped a lot.

  • @zSal
    @zSal2 жыл бұрын

    Bro, I like how simple your tutorials are. Thanks, bro that's time-saving.

  • @Caden_Burleson
    @Caden_Burleson2 жыл бұрын

    Thank you! All of your tutorials are SPOT on! You keep them entertaining with helpful graphics, you clearly explain things, and you keep it short!

  • @VladDenLeTSPlySHik
    @VladDenLeTSPlySHik Жыл бұрын

    How long have I been looking for this tutorial! Thank you very much, it helped a lot 👍

  • @nikodemkirsz4423
    @nikodemkirsz44232 жыл бұрын

    That was way easier than I expected. Great tutorial!

  • @artkonina
    @artkonina2 жыл бұрын

    why was it so hard hard to find such a basic tutorial. thank you

  • @Qwetzxl
    @Qwetzxl3 жыл бұрын

    Damn i thought you would need a script to tell unity how to snip it but no this is so cool unity continues to amaze me

  • @EliteCraftedGaming
    @EliteCraftedGaming2 жыл бұрын

    The thumbnail itself actually helped me with what problem I had! Video was great too! Top respect!

  • @keyemail2761
    @keyemail27612 жыл бұрын

    Wow! Thanks so much because as a new unity person this comes in very helpful, nice job!

  • @GamingDudeSUS
    @GamingDudeSUS3 ай бұрын

    ive actually searched for rounding in 3d but this video is a great tutorial

  • @johnsartain4160
    @johnsartain41607 ай бұрын

    That resolves so many issues I had with unity I just hope that in the future when I need to remember how to do this I can find your video

  • @abhinandanscell
    @abhinandanscell7 ай бұрын

    life saver for me!!! thank you so much!!!!, I used this info to image BG of UI text!

  • @Frosty-zd4rl
    @Frosty-zd4rl2 жыл бұрын

    Thanks for the video! I learned a lot about spriting from this video!

  • @robman219
    @robman2198 ай бұрын

    this just saved me a butt load of time and effort, thanks.

  • @robert_katona
    @robert_katona2 жыл бұрын

    Thank you for this awesome tutorial! It was very helpful!

  • @rowleyes5954
    @rowleyes59542 жыл бұрын

    Nice simple and efficient, thanks for tutorial

  • @wmka
    @wmka Жыл бұрын

    searched for "unity rounded ui" thank you and have a good one

  • @nathanvekovius465
    @nathanvekovius4653 ай бұрын

    This was what I needed, thank you so much

  • @Qwetzxl
    @Qwetzxl3 жыл бұрын

    You uploading makes e happy :)

  • @iliketowatchducks
    @iliketowatchducks2 жыл бұрын

    Thank you dude. I was like searching bloody Google for png files, and they all fake pngs. I dont have photo shop, but this shows me the concept of it, so now its easy, you can just even make a circle sprite from the unity sprite package. SO thanks!

  • @samuelbaker3631
    @samuelbaker3631 Жыл бұрын

    thanks so much for this! it helped a lot

  • @dtktvgedarme7080
    @dtktvgedarme70808 ай бұрын

    Very helpful and cool video!

  • @clastergaming6394
    @clastergaming63942 жыл бұрын

    Another great tutorial

  • @georgemincila
    @georgemincila2 жыл бұрын

    Very straightforward tutorial. Can I ask though, how would this be done when we have a large sprite sheet with all the UI assets inside? I can create slices inside that large image as you teach here, but how do I drag the image? In my case, the image has a lot of other buttons too.

  • @mobilenerdgames
    @mobilenerdgames2 жыл бұрын

    Thanks, amazing video!

  • @onatkorucu842
    @onatkorucu842 Жыл бұрын

    Thanks for the nice tutorial. One question: Why did we choose 42 x 42 pixel? Does this selection depend on our screen ratio?

  • @tufanaydin6340
    @tufanaydin6340 Жыл бұрын

    I knew that and great tutorial you are amazing

  • @LetWorkTogether
    @LetWorkTogether2 жыл бұрын

    Thank for your downloading matterials.

  • @nartz5361
    @nartz5361 Жыл бұрын

    oh god, this is the best tutorial that I've ever see, thanks for the video! is that will automatically change so it's responsive UI?

  • @adamsekerka3428
    @adamsekerka34282 жыл бұрын

    Your chanel is just too good. I love it

  • @yayapipi1385
    @yayapipi1385 Жыл бұрын

    omg!!! this is amazing!

  • @AlexanderSchories
    @AlexanderSchories10 ай бұрын

    Thank you, Maciej!

  • @CocoCode

    @CocoCode

    10 ай бұрын

    Thank you Alexander! I'm glad you found this tutorial helpful 💙

  • @methanesulfonic
    @methanesulfonic Жыл бұрын

    I'm guilty of using the first method 😅 Thanks for the video

  • @DanKardell
    @DanKardell2 жыл бұрын

    Awesome job. If we download your images, which one should we import to use?

  • @JeffKomarow
    @JeffKomarow3 жыл бұрын

    Coco is such a rounded individual 😄

  • @egorovsa
    @egorovsa Жыл бұрын

    Mine GOD! This is awessome!

  • @jumbocube
    @jumbocube Жыл бұрын

    many thanks!!!

  • @pixeldustinteractive
    @pixeldustinteractive7 ай бұрын

    It's crazy that I uploaded a video demonstrating exactly this a year before this video was published... lol

  • @perryjones7655
    @perryjones76555 ай бұрын

    for those using illustrator: Create a new file - make sure your artboard measurements are set to pixels. Make the artboard 42/42 px. Instead of using a circle, use a square and set the corner roundness to the same value. This will produce the same result, You can follow the rest of the tutorial as is :)

  • @dankenarigato
    @dankenarigato2 жыл бұрын

    very helpfiul ! thanks

  • @BGFutureBG
    @BGFutureBG Жыл бұрын

    Very well explained! I guess this can't really work if the message box image has diagonal border lines though? At some point it will always straighten the line if it's sliced

  • @vesselblue
    @vesselblue Жыл бұрын

    Thank you so much!

  • @fdolbec123
    @fdolbec123 Жыл бұрын

    Really nice trick for unity! Thanks a lot!

  • @मेबीराज
    @मेबीराज2 жыл бұрын

    Thanks!

  • @diegodetomas4240
    @diegodetomas42402 жыл бұрын

    Awesome!!!

  • @Alabfa
    @Alabfa3 жыл бұрын

    You are a great man

  • @PreslavKolev
    @PreslavKolev3 жыл бұрын

    I was just designing rounded corners in unity when this video cane up

  • @tolian500
    @tolian500 Жыл бұрын

    Thanks a lot!

  • @lukaspaver
    @lukaspaver Жыл бұрын

    Thanks so much :)

  • @romeu_
    @romeu_ Жыл бұрын

    You made a PDF, I loved that

  • @esa0832
    @esa08322 жыл бұрын

    nice tutorial

  • @akarsh9407
    @akarsh94073 жыл бұрын

    Hey try using shape2d assets (for basic things not for advanced textures) in unity asset store then u can do ANYTHING. Its the most useful asset i found for ui, u can change the shape the radius of corners and many more, if u like it plz even make a tutorial on it there are certain things that i am not able to do with that asset and probably u could figure out how things work! Yeah but for more advanced texture ur way is AWESOME 👌

  • @CCV334

    @CCV334

    2 жыл бұрын

    Thanks for sharing, the asset looks awesome!

  • @akarsh9407

    @akarsh9407

    2 жыл бұрын

    @@CCV334 wlcm

  • @CocoCode

    @CocoCode

    2 жыл бұрын

    It does look great, you’re right. For basic rounded corners it might be a better solution but still, the one shown on the video allows you to slice not only rounded corners but also some more advanced textures as shown at the end of the video 👌

  • @akarsh9407

    @akarsh9407

    2 жыл бұрын

    @@CocoCode yeah ofcourse the video was worth watching it as i didn't knew that kind of technique that u used in video ever exits so i learned some thing new 😊👌

  • @akarsh9407

    @akarsh9407

    2 жыл бұрын

    @@CocoCode Is there any plan of you making video on it? I mean the asset is good for basic things and prototypes so it might be useful for many people who dont want unity's default ugly ui

  • @AlsiQwyk
    @AlsiQwyk Жыл бұрын

    Thanks

  • @CocoCode

    @CocoCode

    Жыл бұрын

    Thank you very much Alexandru!

  • @chakibchemso
    @chakibchemso2 жыл бұрын

    Why this is not mentioned anywhere in my whole career lmao

  • @GamernetsLP
    @GamernetsLP2 жыл бұрын

    For me, the button is not round unless I set pixels per unit multiplier to 0.01 (lowest) on the image. Any idea why?

  • @GamernetsLP

    @GamernetsLP

    2 жыл бұрын

    It works if I set pixels per unit to 1 in the sprite.

  • @yonatanabergel

    @yonatanabergel

    Жыл бұрын

    your image has too few pixels (or too many)

  • @ShinichiKudoQatnip
    @ShinichiKudoQatnip2 жыл бұрын

    Y no more videos? 😭

  • @ViniciusLuduvique
    @ViniciusLuduvique9 ай бұрын

    Love u

  • @josephseed9270
    @josephseed92702 жыл бұрын

    Ladies and Gentlemen New brackeys is here

  • @ThiagoPrego
    @ThiagoPrego Жыл бұрын

    Thank you so very much. May the Lord bless you always!

  • @bluzenkk
    @bluzenkk Жыл бұрын

    i think... its better to just buy the procedural UI asset from the unity store... will save you tons of hassle.. if you really want to DYI... then writ the procedural script yourself...

  • @118andrey
    @118andrey2 жыл бұрын

    Black magic

  • @fredyfred1950
    @fredyfred19503 жыл бұрын

    FIRST

  • @walterh2113

    @walterh2113

    3 жыл бұрын

    Second

  • @CocoCode

    @CocoCode

    3 жыл бұрын

    Third

  • @kunalpachoriya4061

    @kunalpachoriya4061

    3 жыл бұрын

    @@CocoCode Ok Third

  • @Qwetzxl

    @Qwetzxl

    3 жыл бұрын

    69th

  • @walterh2113

    @walterh2113

    3 жыл бұрын

    @@Qwetzxl nice

  • @XboxPlayerPL
    @XboxPlayerPL3 жыл бұрын

    So much effort just to make rounded corners in Unity... In CSS it's just one line: border-radius: 5px;

  • @walterh2113

    @walterh2113

    3 жыл бұрын

    In Unity you can do that as well, if you write a couple lines of code. But in this tutorial it actually shows how to do it with proper textured buttons, not just coloured boxes. And you can use something like css in Unity if you want, with the UI builder.

  • @ungames6909

    @ungames6909

    2 жыл бұрын

    @@walterh2113 have you any video link from that I could learn more about Unity Ui builder