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
quick and good tutorial 😎
@christhedevYT
Жыл бұрын
looks like somebody wants to get back into game dev👀
@PengiiiiGameDev
Жыл бұрын
Whoa dude just came back to life 👁️👄👁️
@dontCallMe..
Жыл бұрын
i thought you were dead
@SaharshDev
Жыл бұрын
damn dani here too!
@unityUser
Жыл бұрын
Ayo dani😂😂
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
2 жыл бұрын
sup Primer
@demyanrudenko
2 жыл бұрын
Can't say I expected to see you here O_O
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.
Bro, I like how simple your tutorials are. Thanks, bro that's time-saving.
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!
How long have I been looking for this tutorial! Thank you very much, it helped a lot 👍
That was way easier than I expected. Great tutorial!
why was it so hard hard to find such a basic tutorial. thank you
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
The thumbnail itself actually helped me with what problem I had! Video was great too! Top respect!
Wow! Thanks so much because as a new unity person this comes in very helpful, nice job!
ive actually searched for rounding in 3d but this video is a great tutorial
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
life saver for me!!! thank you so much!!!!, I used this info to image BG of UI text!
Thanks for the video! I learned a lot about spriting from this video!
this just saved me a butt load of time and effort, thanks.
Thank you for this awesome tutorial! It was very helpful!
Nice simple and efficient, thanks for tutorial
searched for "unity rounded ui" thank you and have a good one
This was what I needed, thank you so much
You uploading makes e happy :)
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!
thanks so much for this! it helped a lot
Very helpful and cool video!
Another great tutorial
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.
Thanks, amazing video!
Thanks for the nice tutorial. One question: Why did we choose 42 x 42 pixel? Does this selection depend on our screen ratio?
I knew that and great tutorial you are amazing
Thank for your downloading matterials.
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?
Your chanel is just too good. I love it
omg!!! this is amazing!
Thank you, Maciej!
@CocoCode
10 ай бұрын
Thank you Alexander! I'm glad you found this tutorial helpful 💙
I'm guilty of using the first method 😅 Thanks for the video
Awesome job. If we download your images, which one should we import to use?
Coco is such a rounded individual 😄
Mine GOD! This is awessome!
many thanks!!!
It's crazy that I uploaded a video demonstrating exactly this a year before this video was published... lol
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 :)
very helpfiul ! thanks
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
Thank you so much!
Really nice trick for unity! Thanks a lot!
Thanks!
Awesome!!!
You are a great man
I was just designing rounded corners in unity when this video cane up
Thanks a lot!
Thanks so much :)
You made a PDF, I loved that
nice tutorial
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
2 жыл бұрын
Thanks for sharing, the asset looks awesome!
@akarsh9407
2 жыл бұрын
@@CCV334 wlcm
@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
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
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
Thanks
@CocoCode
Жыл бұрын
Thank you very much Alexandru!
Why this is not mentioned anywhere in my whole career lmao
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
2 жыл бұрын
It works if I set pixels per unit to 1 in the sprite.
@yonatanabergel
Жыл бұрын
your image has too few pixels (or too many)
Y no more videos? 😭
Love u
Ladies and Gentlemen New brackeys is here
Thank you so very much. May the Lord bless you always!
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...
Black magic
FIRST
@walterh2113
3 жыл бұрын
Second
@CocoCode
3 жыл бұрын
Third
@kunalpachoriya4061
3 жыл бұрын
@@CocoCode Ok Third
@Qwetzxl
3 жыл бұрын
69th
@walterh2113
3 жыл бұрын
@@Qwetzxl nice
So much effort just to make rounded corners in Unity... In CSS it's just one line: border-radius: 5px;
@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
2 жыл бұрын
@@walterh2113 have you any video link from that I could learn more about Unity Ui builder