How To Create UMG UI in Unreal Engine - Rounded Corners with Materials

foreign [Music] welcome back to the channel where I make how-to videos from subjects like mac tips back-ends Salesforce and game development if you haven't subscribed yet please subscribe to my YouTube channel this is the second part of my Unreal Engine umg UI Series in this video we're gonna learn how to create borders and bottles with rounded corners so let me show you a quick demo so here I have a simple setup we have a simple level a hit play the widgets will show on the screen as you could see I have a border here with rounded corners and the second one it has a more pronounced rounded corner and similarly have buttons here when I hover um you can see that the corner is very in sizes so we're going to learn how to do this let's jump into it cool so I'm using a default level here from the startup contact the minimal default you could use whatever you want open up the content drawer and what I want to do is get a little bit organized so create a new folder create main right click and create UI folder next let's create material so yep we're going to use materials to create those random Corners so open up the UI and select user interface and then widget blueprint then user widget and I'm just gonna name this Main and first open up the look search for the canvas panel drag that here and let's put a couple of elements on the screen so first actually let's look for the Border resize that like so and add some text drag it the text is color white so let me change that to Black so I can see it and then just Center align it and change it to order one I'm gonna select that Ctrl D duplicate pull it down and change the text to part two next let's add some buttons as well so drag it on the screen resize it select search for the text drag it inside change the value to button one I'm going to select that then duplicate a couple of times so that's one button and then I'm going to drag the second one here so first let's add it to the screen so go back to the level and under here go on under open level blueprint then right click say event begin play then search for create a widget it is for the class look for the class we just created W Main and then here say add to viewport so this is just a quickly test when I hit play I could see those widgets on the screen so now let's make the borders rounded so Escape that and go back to the content drawer go to the materials we're going to create couple of materials here let's start with the first one so first first one I'm going to call M1 rounded corner open that up first let's change the material domain to user interface so we know we're using it for umg change from opaque to translucent for the final color we want white so reach out here select Vector 3 constant Vector 3 and then just change these values to 1 1 1. and for the opacity we're going to use a function called radial generate ratio gradient exponential so this one we want so as you can see here is great that Spirit and the edges are soft so we want the density so if you hover it you would say your default then value is 2.33 so reach out here and say constant and we want the valve to be a bit hard higher so change that to 100 you would see the edges are more sharper so compile even though there's no parameter in here go to the content drawer create a material instance and save and go back to the menu and let's select that material instance so from here select that and under the brush here you could select that you would see changes shape here um it's not yet rounded go through the draw as menu here and change it to box and change the margin to 0.5 if I deselect it you would see it's a little bit rounded at the edge there let's do the same here but adjust the roundness so select box again do the same thing 0.5 and this time under the image X and Y change the value so you could change that to 100 but you need to hit compile and you would see that it's more rounded so you could bump that up higher like 250 to make it more rounded so let's also change the alpha level here under the tint change that to 0.5 so it looks good when you're viewing it on the screen you can see the background and do the same here so technically you could do the same here but you need to do it for on the buttons but you need to do it on all this style so this normal Harvard Pro press and disabled so do it for the normal and I'll do it for the hovers as well and change the draw as to box and similar here throughout the box and change it to 0.5 and 0.5 so when you hover the same image would happen so under here you could change the alpha level here as well so it's a different color when you're hovering and oh I mean the tint and then change the alpha level to 0.5 so it's a little bit transparent so let's quickly test that out so hit go back here hit play you can see it's transparent and it's rounded so let's go back and adjust the other button so here let's use the same instance again so select that select that change it to box and then 0.5 do the same here for the hover change it to box and change it to 0.5 and this time for the X and Y image change that to probably 60. and do the same for the Harvard State 60 and hit compile and you would see the change now you see it's more rounded cool so for the third button we're going to use a different material so in a different function so go back to the content drawer right click and select material this one I'm going to call M2 rounded corner open that up so do the same here change it to user interface change it to translucent and do the same for the color search for constant Vector 3 vector change this out to one one to make it white and this time we're going to use a another function called generate rounded generate round rack so this is what we want so you can see the image there is already rounded um if you hover here these are the default one the the default for the corner radius is point 12. so we want to create a parameter for this so uh search for constant and then promote this as a parameter and then just call this radius and for the default value here change it back to one uh 0.12 as you can see it's not going to now save go back here and then create a material instance for it so because we created an instance for it we now have a parameter that we could adjust for the radius so go back to the menu here select this button a third one and because we have it selected on the content drawer in which to select it as you can see the image will change um let's do the same set it to box and then set it to 0.5 do the same for the hover box and change the margin to 0.5 cool so the difference here is if I go to change the X and Y here probably change it to 100 and hit compile you would see that it actually Shrunk the image and didn't really resize those border so to resize those Corner go to the material instance so let me undock this like so go back there um um probably hit play here while it's playing look at the bottom tree here when I adjust the radius here you would see that I could adjust the size of the corner from here using this material instance so that's how you would adjust it from here so I stop if I go here and do probably do the same let's see if this works Yep this also works so we don't need to play it but from here you could actually adjust the size cool so that's how to round corners and buttons using materials for the umg UI so hope you like this video thumbs up thumbs down please subscribe to my YouTube channel cheers bye for now

Channel: Just Another Dang How To Channel

Views: 4,050

Keywords:

Id: x98So2FoLXA

Length: 10min 49sec (649 seconds)

Published: Fri Aug 11 2023