Master ROUNDED corners for your UI | Unity UI tutorial

so you've just created a button in unity and you'd like to give it a bit more appealing look with rounded corners unfortunately unity does not have any easy way to create them so we'll need to take a different approach your first idea might be to create a button image that's a good first guess here i have an image i've created with the rounded rectangle and with the exactly same dimensions as on the scene here it is imported into unity and attached to a button image looks great isn't it but what happens if i have multiple buttons with different sizes resizing the same image doesn't work and there is no point in creating separate file for each of them we need something more elastic look at what we'd like to achieve regardless of the button size some areas should not change i'm talking about all the corners of this image and some of them should stretch only vertically or horizontally that way you get a total of 8 different parts and the background that will be filled out in the middle it may sound like something complicated but unity has a great tool to help you with exactly that first let's create an image in photoshop or any graphic program of your choice create 42 by 42 canvas and then using a rounded rectangle tool fill out the entire space then set the roundness to 20 pixels from each corner leaving 2 pixels in the middle in both axes same as the second before that way we'll be able to split that shape into 9 parts finally let's set its color to white that way we will be able to easily change the color of the shape in unity inspector now save it as the png file and import it into your unity assets folder if you don't have any tools to create such images by yourself i've prepared a package containing a few examples you can download all of them for free using the link in the description now time to tell unity how to slice our image click on adjust imported image in the project assets then in the inspector make sure that the texture type is set to sprite to the end ui and then press sprite editor you should see this window if you have newer unity version and you get an error at the very top select window package manager then switch to packages registry listing and search for 2d sprite install it in the sprite editor all we need to do is to move those green lines and tell you how to split this image alternative way is to do it by typing corner radius here in the bottom right hand corner in my case 20 pixels for left top right and bottom you should see those green lines making the exact same pattern as i showed you earlier apply our changes close this window select our button image on the scene and finally dragging the image with the rounded corners we've just worked on unity should automatically change the image type to sliced if not do it yourself and here it is a great button with rounded corners if you'd like to achieve different results you can use this pixels per unit multiplier but be aware that it might make corners a bit too pixelated in that case just use a picture with higher border radius let's look at the end at a few more advanced examples the first one will be this piece of paper if i just create an equal border from each side and save it you can see that our shape does not scale properly that's because all triangles are being interpreted as a side of our shape and are being stretched to fix that in the sprite editor make sure that all triangles stay in the corner and those are not being precise that way our shape is nicely resizable another example will be this sprite with the grass as always let's split it into 9 equal parts save and apply to a shape on our scene looks good so far but if we'll start to resize it you can see that everything becomes stretched an easy way to fix that is to change image type from sliced to tiled that way border and center parts are not being precised but repeated to fill out the available space the very last case will be this scroll bar sprite obviously we don't need to resize it vertically so we can just set the border only from the left and the right side that way any height change will result in stretching of the whole object so make sure that the height is correct but resizing it horizontally will look perfect so that's it thanks a lot to my awesome patrons that support this channel be sure to check out my other videos about unity why see you soon you

Channel: Coco Code

Views: 83,282

Keywords: unity, cococode, bionicl code, bionicl, unity3d, Maciej maj, tutorial, guide, coco code, rounded corners, ui rounded, ui button, ui image, rounded button, rounded image, sprite editor, 2d sprite, 2d sprite unity, rounded editor, rounded sprite, rounded ui, unity ui rounded, unity ui rounded corners, rounded sprites, ui tutorial, rounded corners tutorial, coco code rounded, coco code button, coco code unity ui, tiled image type

Id: gO4jnaxvMjk

Length: 5min 39sec (339 seconds)

Published: Wed Aug 04 2021