#UE5 Series: How To Animate Materials in UNREAL Engine

hello everyone reza here with another unreal engine tutorial the ability to add motion to your materials is an important skill to have and knowing the right technique can provide a way to create inexpensive and effective effects inside unreal engine 5. in this step-by-step tutorial i will go over multiple techniques to show you how to add animation and effects to your materials without inserting a single keyframe it's quite a unique tutorial in a way and we have a lot to cover so let's get started [Music] all right let's analyze the scene really quick this is the model that i would like to bring to unreal engine 5 and it's basically a spinning wheel game i've got three green parts and these three green parts will give us an excuse to learn more about certain techniques to add animation to materials so this is a will a fortune-ish type of model and i do have a material for it so this is the material that i would like to assign to this bit and i would like to spin it using certain techniques this is a sort of a notification board that i have i've already made the font ready in photoshop i would like to assign it to here and pan that font across the board and of course i would like to use math node to create flashing lights or to create a transition basically from one color to another color so three different objects three different techniques uh hopefully we kind of killed a few birds with one stone using this model so let's uh export this to unreal engine five so send to unreal engine and you can go selection or you can export it as fbx or obj just something to be mindful of we've already gone through this via introduction to material video so feel free to check that out but just to do a little bit of recap make sure smoothing groups is on and of course when you export everything if i go all the way to access conversion make sure up access is set to z with that in mind let's export this object into unreal engine 5 and we'll take it from there all right here i am inside unreal engine 5. um so as you can see there is no material on these three guys uh the ground plane is just a default plane what i did i've gone ahead and created a new level and gave myself a basic level and saved that level as will of fortune wof into levels i put all the materials in here and all the props that i imported to unreal engine 5 into a separate folder and these two textures that i've got the villa fortune texture and the font do you feel lucky i brought them into their own folders so i've got textures props materials and levels and i've got one finished one for the ones that i've tried before nothing new for the materials all of these materials are just untouched brand new materials i didn't do anything because i would like to show how to add animation to them so as you can see i just named them correctly so m m for master material will which goes to this guy and then i've got mm master material button which goes to the button and mm board which of course goes to the board now with that out of the way and by the way i've covered all of these steps in my previous videos so please feel free to check them out if some of these are sort of vague or unfamiliar to you but with that out of the way let's go to the first chapter and learn how to add rotation to this spinning wheel [Music] all right um we already have this mm wheel assigned to this object but i actually would like to assign a material instance to that object instead so i'm going to create a material instance so we keep this master material we put some attributes on to this material instance so it makes the job a lot easier it's easier to compile and we've already tried this in the past so mi for material instance will and what i'm going to do i'm just going to drag and drop that here so we know that what we have in here is just a material instance now i'm going to double click on this mm wheel to open the material graph i can go full screen for now so let's start by adding the texture i've already imported the texture here that's the texture that we have and we know how to add texture hopefully by now simply drag and drop it into the material graph space so there's nothing special going on here we've already tried this in the past from rgb to base color and we get ourselves a texture i'm going to apply that and if i minimize you can see the sort of filler fortune texture has been applied to the material and again we're not looking at the master material here we're looking at the instance so keep reminding yourself that the instance is the one that i'm looking at but it's identical to the master material again if those two um and the notion of master material or instance material doesn't make any sense i've got a separate video just on those but basically instance is a copy of master material and it's much faster to compile that's why we use instance instead of master for every single material that we use i'm going to save for now and let's see what else we need i'm going to maximize the window so next is to bring a node to allow us to create rotating textures now that's the exciting part probably the easiest part of the tutorial there is only one node that can rotate textures for you without adding a single keyframe and that is called rotator that node is amazing it's got two main nodes one node is coordinates from where you would like to rotate your object or your texture rather so you need to give yourself a coordinate you need to know where the pivot is in your model and of course it is a time dependent node so how fast this needs to be rotated that's another thing to be mindful of so there is a node actually called time and that gives you a passage of time to the material but surprisingly enough if you just go from coordinates to uvs you can actually have a rotating material so i can just go apply and if i go in here you can see now the texture is spinning without even using this time simply because we've got actually the time here we've got the coordinates center x is your u and the center y is your v coordinate so u v and it's at the center of the texture 0.5.5 and that's why it rotates from the center and we've got speed and that speed determines how fast this object or texture is moving so if i go in here and set this speed to 1 and apply you can see it spins a lot faster however while it's working we would like to parameterize this time factor so we can have it as an attribute in our material instance right now there is no way to have this or extract this as a parameter in our material instance if i double click on my material instance there is no time factor here and we have no access to the speed there is no way for us to tweak that attribute and that kind of defeats the purpose of having the material instance so let's see how we can in a very very easy way extract this time factor using the actual time node so i'll make sure that everything is at default again if you change anything you can click on this reset button to bring everything to default now basically all you need to do is to multiply this time factor by a constant and give yourself a parameter let me show how this works so i'm going to press m and left click to create a multiplier of course another way is to just typing multiply and bring the multiply node or bring it from the main palette it really doesn't matter i'm used to the shortcut letter m on your keyboard left click to bring multiply now that output goes to time and time goes to a we just need a single constant expression to be able to control the value so single channel expression we already know one click and it gives us a single channel to the b and now this is something that you can parameterize i'm just going to right click on it convert to parameter and i'm going to name it rotation speed now this can be seen in our material instance that's fantastic and if you look at the default value i've got default value set to zero i can set it to 0.25 the value that we had in our original rotator node but now this can be seen in our material instance if i go apply and save and go to my material instance i'm just going to go and open my material instance we can see now we have rotation speed at our disposal i can go ahead and enable that and bring this window to aside and now all i need to do is just to change this value so i can go and set this to 2 set this to 4 set this to 8 and you can see how dynamic this looks no compiling no saving nothing so really simple way of animating or rather rotating your texture over time using a rotator node again it relies on uv coordinates so if you're planning on using this node make sure you've got good uvs very very useful very easy to use so let's move on to the next chapter and explore more techniques [Music] all right next is to add animation to this notification board in the previous chapter we learned how to rotate now we'll learn how to pan a texture across the model from left to right or top to bottom or maybe diagonally if that's something that you want to do to do that we need to of course create the instance so i already have the mm board i'm just gonna go create a material i'm going to rename that to mi board i can probably minimize this and dock that bring it as a floating window and just drag and drop it onto this board that definitely works and if i double click you can see that there is currently nothing in there um we do not have any parameter and that's exactly what we want to get so i'm just going to go ahead and open the master material and there we have it our master material first things first of course we know what to do we need to bring in the texture so i'm going to go to textures and bring over my texture rgb to base color and i preferably would like to add that to our emissive as well that can be fun so maybe actually emissive will get the job done so alt to disconnect i'm gonna select this guy and i'm going to go to shading model and change that to unlit with that we're not going to get any of these expensive nodes expect no specularity no metallic this is just a notification board so maybe just emissive will get the job done for us so i'm just going to connect that to my emissive we really don't need anything else and already try to be careful about my materials if i double click on it you can see the background is already black the font has already been colored i'm not going to change anything in here which is good so let's start with the actual note now the note that we would like to use is called panner expression now the panner expression is extremely useful i'm just going to go and type in panner and bring that node over another way of bringing this node is to hold down p and left click and that will bring panner and of course if you would like to torture yourself you will find it here but we don't want to do that so yeah i think p left click would be the fastest way of bringing this now just like rotator this relies on your uv coordinates so first things first you need to check your uv coordinates make sure you've got healthy uv coordinates you no overlapping within 0 to 1 all the ground rules apply we've got coordinates so it takes in base uv texture coordinates which we've already know how to bring its texture coordinate that gets plugged in here we've got the time factor and that again takes in the value to determine the current position of the texture and that the time expression would be the right note to plug this to and of course we've got speed and that speed clarifies how fast the object is moving and you may have noticed once i hover over this it says vector 2 speed scale this means that we have scale y and scale x very similar to rotator it relies on two vectors two values for u and v u is x v is y so with that out of the way see how we can use this so first things first i need to clarify the coordinates so i'm going to go texture coordinate of course we already have the uvs all set up so texture coordinates goes to coordinates that's very easy time factor we already know this we can bring in a passage of time and assign that to our time and for speed um that's the part that catches people off guard some users tend to just say okay i'm going to grab this guy and bring it over that is not going to work simply because if i hover it says vector 2 speed scale so we need two of these guys one is responsible for x the other one is responsible for y it also allows you to not only move your texture to left and right but also move it up and down if need be so this tells me that i need two of these guys i'm gonna bring this one over i'm going to parameterize both of them because i would like to have them on my instance and i'm going to name this properly i'm going to call this speed x and i'm going to call this speed y now um how will i be able to connect these two into one channel and this is something that we have already covered in our material video but in case if you haven't watched that or if you forgot there is one note that can actually coordinate two strings together to make one new string and that is called append so append vector is just a right node for me because it allows me to connect these two nodes uh into one and just create one channel out of it so one goes here and one goes here that's fantastic i can select all of them and press c and i would call that panning speed and that's something that i'm going to see in my material instance you can also go in here and if need be again this is not mandatory but sometimes you have a model where that requires tiling if that's the case pressing m click and bring a multiply in instead going in here apply the multiply to your texture coordinate and then give yourself a single value for tiling and i can just go in here parameterize it and just call this tiling again you may or may not need this i probably don't need to do that because i i was kind of careful about my uvs but if you think that this requires tiling again we've covered this already but just in case um we're gonna call this texture scale and that is responsible for our tiling this is responsible for our panning and i just need to call that tiling and that should do the trick now all i need to do is just to plug the coordinate to my uvs i'm going to go apply and let's see what we get i am going to use x so the font is going to go from left to right so i'm going to go with x and default value set to 0.5 now there's one more thing that i need to do before we call this a day because so far we are not seeing anything and that is to give our tiling a value because the default tile link is set to zero if you don't use multiply and just connect this to your coordinate you will see the panning happening but because i used multiply a single value and usually for a single channel constant the default is set to zero this means no tiling no animation whatsoever the default for this should be one and as soon as i click on that we will see our animation fantastic so now i can go to rmi board and go to speed and i can either lower this or increase the speed and have my animation super cool isn't it i can at the same time click on this guy and bring over our instant wheel material and give that a value and so far we've successfully completed animation on two items now in the next chapter we'll learn a completely different method to create animation changing colors for our sort of winning button so let's move on to the next chapter [Music] now let's create a material to change colors on this button right here i already have a mm button for it right here i'm just going to right click go create material instance i'm going to keep the name remove inst and go with mi material instance and drag and drop that onto the button we can see mi button has been assigned successfully now let's go ahead and open mm button so mm button double click open and we are going to use a different node to add animation to this button now you really need to kind of clarify what you would like to do but for flashing lights i think the easiest way of animating this is to use either sine or cosine curve or expression so if i do sine or you can do the same thing with cosine you can see these two uh expressions uh basically they create sine and cosine wave over time they're fairly similar the only difference is cosine expression is got a bit of an offset compared to sine but they pretty much generate this type of node let me just bring this over so you can see the output is a like a continuous oscillating waveform by connecting this to a time so this goes up and down consistently over time and again the only difference between this and cosine is the offset so where the sine is up cosine is down and the other way around for all of these waves there's not much to it really you can use sine or cosine but what it does basically the output did the input that it likes to get you may have guessed it already we really would like to assign time to it so because it's so dependent to this time value they always go hand in hand so if i just preview this without doing anything else so go in here enable and start previewing you can see that's all it does it creates up and down value over time so you can go and change the period from one to point one to go super quick or go to five and that's what it does extends or widens the wave forms so that's really it there is not much to it and we are using this not as a base color i really don't want to give this up and down or 0 and 1 or on and off or black and white whatever you want to call it as a base color excuse i would like to use it as a mask so once you put that as a mask then you can just have full control over your channel a and channel b and um control your base color however you would like to control it now here's a question what note can we use to have channel a and channel b and sort of an alpha to plug this to the alpha so we can apply all of them to the base color well we discovered that node in our introduction to material it's a very useful node and perfect choice for moments like this and that node is called linear interpolation or a lerp node so lerp node is fantastic because it gives us the alpha and that alpha can go to sine or cosine so this can be offsetted and then you can just apply textures into pipe a or pipe b you can apply colors to pipe a or pipe e and have that transition so every time we get black it goes to pipe b every time we get white it goes to pipe a you can reverse that as well but basically that black and white interaction is our animation for a and b now for now we are going to use three vector constant so holding three on the keyboard ctrl c ctrl v one is going to be a one is going to be b and it's going to toggle between the two using this guy over here so in our case our a is going to be i don't know red maybe and you can actually not have b if you want to so if i go in here and just plug that you can see that it gives us a basically white color you can bring a multiplier bring the multiplier in here assign a in here and you can give a constant to b it now switches from the color to black to color to black by the way i can assign that to a missive color as well makes it fun so that's another way of doing it so now you can see i'm getting flashing light um from one color to black to one color but what i actually would like to do is to have two colors so i'm just going to give this one one color for a and one color for b i can probably change that to something else let's say yellow and now we can see there is a transition in here where it transitions from this color into this color right you can have a much stronger transition using a multiply for your sine curve so i can go in here press m bring a multiply holding ctrl connect this guy into a bring it over to alpha so one goes to a one goes to sign the other one can be a just a simple instance and that is the multiplier factor so i can go in here and set that to three and now you can see we are getting a much stronger transition right so that's definitely something you can do if you would like this to be really pronounced you can always multiply the value get a much stronger value in here now it is at the moment translating or basically going that interpolation is quite smooth from color a to color b to color a to color b it's more like a dissolve than a linear interpolation so if i were to sort of draw this right now it goes to color a and then b and then a and then b and then a and then b so this is a and this is b and that's how it works it's because of the sine curve and because of the lerp node and the nature of the lerp node that blends the two but it's more about this sine curve that gives us this type of motion how about this what if we want to go from a to b to a to b so what if we would like to kill this smooth transition from a to b and go fully stepped mode we call this stepped as opposed to spline there's one note that can help us to sort of eliminate that really smooth transition and go fully stepped with my changing colors and that node is a material function a material function is like a bundle that keeps all the nodes in it we can create our own material functions but this one is ready to go for us and it's called value step so if i right-click and type in value step that receives a gradient which exactly what we have here we've got a smooth transition gradient so i'm going to get the get the multiply and feed it to my gradient because that's exactly what i have and of course we need to give this a value a constant value for the um for the offset so let's say 0.5 offset and that should work for us it receives a gradient and speeds out a step value that now goes to my alpha and now if you check you can see that i am getting stepped value no transition is happening my multiplier is a bit too high so i'm probably going to set that one to two and now if i go and apply this and look at my button you can see it no longer transitions from one color to another color it actually changes on spot which is kind of more realistic and towards what i would like to see all right what about parameterization what we should be parameterizing here of course i would like to have control over my colors in my material instance so i'm just going to call this one color a and i'm going to give this one a parameter and call this color b and that would be the base color i can probably go in here select and press c to comment it and call this colors and just in case you can always group that as well so i can group this colors so it's under this group and for the uh speed of course we have this little guy over here to do the speed for us convert to parameter i'm going to call this speed and that is in charge of our flashing light so this is our mask so i'm just going to call this alpha this is our alpha that controls all the white and black mask information and this is our value step offset so you can actually parameterize data as well so i'm going to call that our offset value which can be handy if we were to use it so that's pretty much it that's the node hierarchy that we're using i'm gonna go apply and save and if i minimize and bring up our material instance now if i go in here and open our material instance you can see i have control over colors i have control over speed and oh i forgot to put color b under the same group so i'm going to select this guy and maybe this guy and put that under the colors group so both are under the same group switching back and yep i've got both of them under the same group and i've got speed and offset under another group we can call it whatever is comfortable for us so for example for the speed i can i can put that under parameters and this offset can also goes under parameters group just to be more tidy about everything now we've got colors and parameters i can go in here and change the speed set that to five you can see it flashes faster with colors you can change the color for example go from here and of course color set to green on this guy again if you're unhappy about emissive press alt and disconnect the base color so everything goes directly into a mission i'm going to save and now what you see is going to basically just show the emission color and at any point of time you can change that to any color that you wish to have again you can add more colors pretty much the same rule applies you work with the exact same workflow but basically that's pretty much it so we discovered three different ways of applying animation to our scene using rotator using panner and using sine or cosine into animation and that gives us really a cheap way of adding motion to our textures i hope you found this video useful i hope you use these techniques in your own projects inside unreal engine thank you very much for your support as usual you can always follow me on twitter or my instagram channel to know more about all the upcoming projects have a great rest of your day guys and see you in the next video bye

Channel: SARKAMARI

Views: 9,644

Keywords: unreal engine 5, unreal engine 5 tutorial, unreal engine 5 beginner tutorial, unreal engine material function, unreal engine material nodes, unreal engine material animation, unreal engine animation blending, unreal engine animation beginner tutorial, unreal engine make rotator, unreal engine paneer, unreal engine panner node, unreal engine material paneer, unreal engine 5 paneer, ue5 materials, ue5 material instance, ue5 material tiling, ue5 material functions

Id: wl2AXvNgqKM

Length: 35min 52sec (2152 seconds)

Published: Wed Sep 14 2022