How To Create UMG UI in Unreal Engine - Animated UI Material

hi everyone Paul here welcome back to the channel this is another Unreal Engine tutorial this is part of my Unreal Engine umg UI Series in this video we're going to learn how to recreate one of the animated buttons from the UI material tab with 40 material functions and over 100 usage example this is an amazing resource I use this technique in one game I'm working on it looks better than using button textures to animate in this video I'm going to break down building the minimal button and also touch some of the items I have covered in previous videos like modular widgets and widget animation we will quickly go over the project and how to navigate the specific assets you want to drill down to in the content drawer then we are going to migrate the material functions to a black new project and start from there let's go so here I have the UI material lab project open as you can see there's some cool animations here one is transformed this gradients this time there's sdfs mask patterns distortions utilities and applications so the one we're gonna try to recreate is the minimal buttons here as you can see if I hover on one item it would animate and similar other stuffs are made the same here but I feel these are a little bit more complex this one's the easiest to recreate so we'll start with this one so if I exit this project I'm going to quickly show you how to get to that so open up the UI material lab and under the widgets under Pages this is where all those tabs are structured so the number nine when you open it up uh if you want to jump quickly to one item click on it and look at the hierarchy here you can see this is using a modular widget so all these buttons share the same code so you could right click and edit widget blueprint it should bring you to that particular widget and here it has a zipper overlay a bottom background a text and a button so on the bottom background here you would see it's using a material and if I quickly go to the animation section here and click on Hover you would see it's referencing a brush material and there's a hover parameter and a bit net size on that material so let's jump into that material um you could also quickly search for it here am I UI button yeah so this one material instance if you open it up you could see there's a bunch of parameters here that you could change you can change the color the control is the outline and the shape what we're interested in is the parent you want to click on here and that should bring up the parent so here is how the material was set up there's a bunch of parameters some lurping and it's using some of the material functions which we're gonna use and migrate to a new project so here this is setting up the wave this animation here and then the button box here which is defining the but the Box itself cool so we're going to jump into that um first off I want to show you the material functions here so this is the one that is mostly used here so we're not going to try to recreate this but we're going to migrate this so you could right click on this folder and select migrate and open up a new another project a temporary project see here I have a blank project with nothing on it so we're going to migrate this to this project so I'm going to hit OK here it's going to ask me which directory I want to save it so I'm on the right directory make sure it's on the content folder and hit on open cool once that is complete you can jump back to that project and you would see everything there has been migrated now we could start using these functions and recreate that button cool so first off go to the content here let's create a couple of folders we're going to create a UI folder in another folder for maps and another folder for materials so let's start with the UI open that folder right click and select user interface widget blueprint and then call give this a name widget blueprint um UI button open that up and we're going to do the same so we're going to create an overlay in this overlay we're going to stack up the image the text and the button so first is the image this one give it a name of image background make sure it's a variable extend it all the way through also search for text drag it on the overlay so right now we can see it because the text is white so let's change that to Black I'll make that centered and also centered here and make this a variable as well so remove that and make that a variable next search for a button and drag it like so and this one is called button hit and it's also a variable now we want the opacity and the color here to be transparent um sorry not this one expand this and change the alpha to zero or the color and opacity and do the same for the color here make that zero and you may want to resize this because this is all that we needed cool so I'm going to save that and I also want to put this oversized here so right click here and select wrap with is a size box because I noticed something weird so here adjust the width and height so here I'm just going to give it a width of 300 and a height of 90 that looks much better go now let's jump to the graph so on the graph here we want the uh text to be dynamic so click here for a new variable and call it bottom text with a type of text compile make that instance editable give it a default text and we're just gonna grab that do a get and same for the text block to get and search for a node called text set text so basically whatever is the text pass from this parameter make that the value so look that up like that and that should be it for now for this one go back to the content drawer and create another user interface widget so this one we're going to call BP intro Main open that up and then start with the canvas panel this time drag that Excel and let's add a vertical box and actually let's add a border and put the vertical box on the border make sure it's a child go and then the Border we're gonna Center align it and make sure it's in the middle and size the content cool and go back to the vertical box here and search for that widget that we just created the UI button drag that in there and give this a name so you could see we have a parameter here for the body text which we defined earlier so you can say new game copy a couple more times and for the second one we're gonna say continue and for the third one we're gonna say quit so we're not going to implement the full functionality we're just gonna cater for the butted animation on this tutorial so compile that so let's jump back to the button here and to the designer and to the image background so here we need to Define that brush so the brush here you could create a new material here and Define like so but I would do it like this go to the content drawer go to that material folder that we created right click and select material and this one we're going to say m underscore UI button open that up first off this is what you get so this won't work with the brain usable brush or Texture in a widget so you need to change the material domain to user interface and change the blend mode to translucent so this is the one that's going to animate so first off let's define the final color right click and select a constant tree vector promote this to a variable so we're going to call this outline color and this would be the light color so set it like that and do alert so lerp is the one that we're gonna use to animate between the two states so um duplicate this and call this one over and hook it on alert pier and for the alpha promote this to a variable and change this to is over and we're going to do another lerp and finally hook that up to the final color like so and we're going to duplicate this Ctrl d for the first parameter here this is going to be called button color and make this color to make this color a bit darker so I'm going to change like that and for the other one this is going to be called button color hover and that should be fine so hook this up like that and you should get something like that so next we're going to define the alpha so this would be the actual button so scroll to the left here and restart using the first material function so search for get user interface UV so here it's going to turn as a UV basically a horizontal and a vertical UV so from here drag and search for MF UI SDF box so this is one of the one that came from that UI material lab so this one defines a box so we could actually go here and create a reroute node to hook this up so we could see something in the screen add name reroute declaration node so this is common on that project where it creates reroute nodes so it's like a shortcut so here give it a name of um button Alpha cool and scroll back a little here and then we could hook up that one so if you right click and search for button Alpha you would see that now so it's like a shortcut from there you could link that like so so now we have that shape that size so by default it's a square so we could Define the size here so create a new constant convert that to a parameter and this one we're going to say size X duplicate that and this would be size y so you could play around with the size here so here for my X I'm just going to apply this 0.186 and for the Y I'm going to Define this 0.5 and I'm going to append the two to create a vector so append vector and hook it up like so to the size now that should um get me the size that I want for my button next let me make some space here clone this one and let's create one for roundness so we have some around around corners so around yes and I believe this is just 0.2 and hook that up to the corner radius oh so it's not it's this I set it too big so 0.2 so now you have that corner radius in there so next we're gonna have some glow Max so it's gonna be a little bit faded so clone one of the parameter rename it to glow Max and I believe this is just .02 very small and hook that up to the glomax I might need a little bit more so change that to 0.8 there you go so that's much better next as the static pool so right click and search for static bull set that's true this to keep the aspect ratio so that should be there next this is also going to Output a feel an outline SDF and SDF outline so we want an SDF so here create another reroute node and this time call this um SDF box so this is the box that we're gonna try to animate so we could already make a comment here and say this is going to be bottom box cool next slide down a little bit here we're going to start animating that SDF box so we could right click and search for SDF box here and we're going to use this for creating that so we want that wavy thing going on so here we're going to create a maybe copy this from the hover here clone it a couple of times we're gonna have one for Speed and one for the repetition so for here let's say wave speed and the other one is going to be wave repetition so we're going to create I'm not gonna so we're gonna call another material function called MF linear UI linear time and this one by default it's going to hook up to the float value let's hook that up to the speed and I'm just going to quickly change this to 0.1 and this material linear time is going to Output a loop ping pong or switch you could check the material lab for example of this kind of animation and we're gonna call another function from here called MF UI wave and instead of SDF inputs here unhook that and put the loop on the motion and the SDF box here put it on SDF input and for the repetition hook that up for the repetition like so give it a value um you play around with this one so here we'll Define this four and finally it's going to output something so here for the cosine um do a smooth step and instead of Min here and hook that hook that up to the value and do a 1 minus and do I multiply we're going to define the lower half later and do another multiply and finally we could hook this up to the button Alpha here for the opacity so here I'm going to right click and say Max and for the multiply here this bottom node I'm going to hook that up there and finally I'm going to hook this up to the opacity here and that should remove some of this uh area or start animating it cool so now it's animating but we still have this funky looking background so we're going to start fixing that so for the SDF box here we're gonna do a smooth step again so smooth step and instead of the Min there disconnect that hook that up here or disconnected my wave here as well so like that and the vignette size here you could Define this parameter as well so here say vignette size give it a little bit space and set that to 0.3 to a 1 minus hook that to the multiply here and that should start becoming a little bit more better for the other multiply here right click and promote that to a parameter this is going to be the outline Alpha so right now you won't see it so change that to 0.05 you would see it animating so pretty much that's the button so we're going to comment this and this would be the wave animation cool so now we can start using that this material for our button so I'm just going back to the content drawer right click here and create a material instance I'm just gonna rename this to Mi to indicate that it's an instance cool and then save that now we could jump back to the button so the widget here click under here and then select for the image select the material instance we just created so MIUI button and there you go so we have that animated button going on here next we're going to try to do the animation so here click on the plus here and click um select hover and select that image select that Track image track under the track select uh brush material and under the brush material here select the s hovert so under is over here shrink this animation clip to probably Point 50 drag it like that and there's already a keyframe defined for the initial start so go to the end of Point 50 and add another keyframe so this time set the hovered state to 1. so if you drag that you could see the button is animated so jump into the graph now and look at the button hit so on the bottom hit here there's two events here hovered and uncovered so click on both to add a note on the graph and drag the hover um animation that we have and we want to do a play animation when we do play animation here connect it like that and for unhover clone display animation and hook it like that but this time the play mode instead of forward set it to reverse and hook it up like that compile save now we're ready to use this intro main if we look at it still the Border doesn't look right so go to the Border here and then let's round some of those Corners so one cool thing I found out for here is under the brush if you change the draw as image to rounded box but you could actually create rounded corners for it so click on the outline settings here there's a corner radius there uh and a rounding type so for the rounding type here set it to fixed radius and that should take the value from here so if I change these values for example the Y here change that to 40 that will make it rounded there so I'm just gonna quickly select that border again and select 40 for the other side so this is how it's going to look like go now it's time to add it to the layout so here I have this level I don't like this um so I'm just gonna jump to the maps create a new level and I'm just going to say intro map open that up save everything yep and from here I'm gonna open up the level blueprint under event begin play we're going to create a widget and I'm going to call the wbp intro main that we just created and add to viewport and you might need to also add the get player controller so we could set the mouse cursor true and probably also set the input mode input mode to UI only and hook it up like that so compile save go back to the intro and delete and there you have it however when I click on it it doesn't look like it's animating so I think I know the problem so I think if I go to the corner side here it would animate that is because if we go back to the button that I created go to the designer and under the button here hit here you can see that our button is not extended the alignment's not right so extend that all the way through compile save let's try it again and there you go and the bot is not quite right so to adjust that just open the material instance and adjust any of the properties here you could adjust the button color the hover State and all of these so for the outline color probably change this to something like that and let's change it to something funky pink and same thing here pink and you could also preview it here by the hover so if you do this change the value here you would see what it looks like so I'm just going to save that um actually I'm going to set that back to zero save go back to the intro map and hit play now that's looking a lot much better and when I click on it it would animate and change color the animation is quite slow so you could click that you're liking to change that animation just go back to the bottom and change the settings from here so I think if I make this a bit faster maybe 30 should be fine I'm gonna stop and play it again yep so it's now more a little bit more responsive with lowering all the animation cool so hope you like this video thumbs up thumbs down I'm gonna try to dissect other more items from that material lab

Channel: Just Another Dang How To Channel

Views: 5,416

Keywords:

Id: 8VwS8mBCUSk

Length: 24min 46sec (1486 seconds)

Published: Wed Aug 30 2023