Translucent Overlay Material - Unreal Engine 5 tutorial

foreign a big thank you to all of you who like comment subscribe and share my videos or through other means support this channel you are what makes this channel grow and become a resource for other people to learn from enough about how awesome you are back to the video so this is what we will be taking a closer look at in this material slash unreala engine 5.1 tutorial we will be looking at the translucent material overlay option that we have available that can be used for example for outlines like you can see for the green character over here but also for other effects like you see it's the right you have a lot of options when it comes to this and we will go through setting up a simple material to get some kind of effect like this and also show how you can activate it on a character in runtime through blueprints like this character is being done right now um yeah that's it welcome back in this episode we are going to be talking a little bit about translucent overlay materials and this is something that I covered a little bit uh previously when I was showing off the new features for 5.1 and I'll leave the documentation link for this in the description if you want to go there but we're going to go through a little bit of what this means and what this can be used for for example so in here I have a project I have a few different materials set up for some different characters first thing to note is that an overlay material can be applied both to a skeletal mesh and to a static mesh and how this works is it will what Unreal Engine will do is it will render the mesh twice to achieve this effect the benefit you get from this is that it is more convenient to to get certain effects on characters now than it was previously like for example here on the left I have something that is reminiscent to an outline material that you would previously do in a post-process material for example now you don't need to do that you can just apply it in runtime if you want to using this overlay material slot uh how this works if we look on the characters we can see that if we click on this one you have a few different categories here if you go to rendering or you scroll down to it you'll find that we have a rendering selection here and if we open up the advanced tab you can see that we have an overlay material and grouping here so you can also search for overlay material if you want to find it that way as well so this is the slot that will be using the material and that is essentially it so from now we'll just together create a simple material for this character in the middle and you'll see how we can go about creating one of these it's not very hard we are going to be creating a translucent material you have a lot of options when it comes to creating materials because you can use a lot of different variations techniques and use this for a lot of stuff not only for making outlines to the left here you can have other effects going on as well making dissolves and stuff like that as well if you wanted to um but yeah so let's go into our folder here I've created a tutorial folder and we're going to be creating a material together so we'll go create a material we'll call this m underscore overlay and we'll go into it and what we'll do here is we will create the very simple material to start off with um let's create something akin to this outline material over here so first off we're going to be creating a color so I'm going to be holding down three key and left clicking and we'll get the color node a three Vectron and this one we will be using as our our color for our outline so to start off we could create something I don't know maybe something purple like so that will be our color clicking on our material we're going to be changing it from opaque to translate sorry translucent blend mode so we'll be hooking this up into the missive if we have it directly into the emission now this will be the the color that we display on something but we want to create something that is more along the edges and what I tend to do for that is I tend to use the fresnel node so if we right click and type in fresnel properly for now there we go this is our fresnel function and this one is driven by some scalar values so let's create a few scalar values we'll create hold on left key left click twice now we created some values now I'm going to be using some values that I found were fairly interesting to use so the first one will be four and this one we will be using as our exponent and the second value will use something like minus 0.00001 or something and this will be our fraction like so and now we want to combine these two things and we'll do that by doing a multiply so we'll hold down our m key and left click and then we'll hook them together and then hook that up to our emissive color and now we're essentially getting something akin to what I was talking about we get a sort of edge shape here now this would be something that would be if we also cook it into opacity I'll see that the dark Parts go away so it will just colored edges to demonstrate what this looks like we can actually apply it on our character so we go to a character and we'll make sure that it's selected over here then we'll drag it here I either drag it or select it in here if we have it selected already and we'll see that we have a sort of effect selected we have a sort of purple outline for it now so that's that's one way you can go about doing that um let's expand upon this a little bit by combining it with our other effect that we have over here we have this sort of panning effect um so let's create a effect for that so we'll go and do a texture sample right click and type in texture and you'll get a texture sample and we can have this driven by noise so we can go and choose the texture over here and we can say noise if we find something that looks okay I don't know tiling noise seems good it probably is tiled so it's seamless that's probably pretty good uh let's have it moving so we'll right click and type in panor this allows us to actually pan our texture if we want to we can put in some speeds here so 0.1 and 0.1 so it will just pan a little bit um and from here we don't really need to do all that much more we want to combine it with the effect over here that we have so what we can do is we can multiply and have this output be combined with this output and then have that output be driving our result over here and then we can also take our rgba here as our opacity so that drives what effects or what colors are being uh translucent for this um so yeah something like that maybe change the color to something a little bit more bright maybe some orangey like that and yeah so now we have something that's very basic uh not super clear but something to start from at least and for right now it just looks like this but we can enhance upon this further for one thing we might want to make this a little bit more um modular and easy to work with so we might want to make a material instance so we can right click on this exponent and we'll just call it exponent like so now we have exposed it as a parameter for our material instances and over here we can right click and click remember this term parameter as well and we'll call this maybe I don't know fraction something like that we can right click on our color and we can make that let's call it color that's straightforward we could do the same for texture sample right click convert it to parameter and we can call this our noise texture or something like that so now we have a bunch of different parameters here that we can play around with uh let's save it and we'll open up our content browser again and we'll create a right click and create a material instance now we have a material instance of this we'll call it MI overlay opening this up we can now alter these values if we wanted to we could for example go to the color and make it pop a little bit more so we can take a red color and go from one to maybe 50 it will give it a more colorful emissive burst and we can actually let's do it this way uh let's put it back to one just for those of you that don't work with materials this is that much and we'll check our character and make sure that we have our material instance selected and we'll make use of that material instead there shouldn't be a change because it looks the same then after that we can actually change these values now if we put five you can see that it's a little bit brighter over here and if we put to 50 you can see that it's pretty bright over here so this is one way and we can also change the exponents on the fact fraction and the the textures here if we wanted to as well let's even go even further let's go to 100. um so you have the ability to create these materials and apply them like overlays very Simply Now like this now what I have here is I have three skeletal meshes so we've just applied them directly but we could also apply this in runtime if we wanted to so if we save this put it over here to the left here we also have a blueprint of our this is a third person character template so we have a the queen character as our default character essentially and we can open up our blueprint for that character and add some code for this so let's add a keyboard e key is what I tend to like to use and we can see how we can actually change these materials on a character on the Fly um let's have a flip flop so we can turn it off and on like so and yeah let's just get our mesh we need to get our skeletal mesh because that's who has the overlay material type insert overlay you can see overlay material appears here and we want to have two of these we'll copy paste it and put it over here and we'll say run the first one and the second one like so and then let's say we wanted to have the the material over here for for when it flips to a we can right click promote variable and we'll get a variable here we can say that this is our overlay material this will be of the type material interface so it will be able to handle both materials and material instances and we'll compile and we'll find our material which was called Mi overlay so am I overlay like so and we have that hooked up so now when we are pressing e key it will go to a it will set this material which is set to be our overlay and when we click again it should go over here and it's setting it to nothing which means it will be blanking out the material overlay and now if we play and I press the E key you can see that I start glowing like the character in the middle does and pressing e again will remove it so that's how simple it is to make use of in runtime just from blueprint code as well so that's essentially going to be it um I hope that this was useful and that's all for now keep on learning take care hopefully found this video helpful if you liked the video leave a like if you did not like it leave a dislike leave any suggestions or comments you have down below subscribe and share this video if you want to see more like it in the future that is all for now keep on learning take care foreign [Music]

Channel: LeafBranchGames

Views: 23,296

Keywords: learning hub, unreal engine, tutorial, unreal engine 5, blueprints, game design, game dev, unreal engine 5 beginner, unreal engine 5 tutorial, unreal engine 5 beginner tutorial, ue5 beginner tutorial, building user interfaces for unreal, engine ui design, user interface, design ui, design tutorial, building user interfaces, unreal engine user interface, Leafbranchgames, Good habits, Best practice, the right way, translucent, overlay, material, 5.1

Id: 0wGZJzNR7Ww

Length: 13min 41sec (821 seconds)

Published: Tue Dec 20 2022