UE4 | UE5 Tutorial : Outline Material

hey and welcome to this tutorial on how to make a outline material on unreal four and five uh this tutorial was made in the 4.27 and it's actually a effect that I use in my current project button pop I'm currently working on a game called button pop it's a mashup between an idle a tower defense and a button Masher game where you are the main button and you have to defend yourself against all the little jealous buttons coming to get you I actually used this outline post-process material in bottom pop itself so if you are interested go check out my other videos and devlogs uh I would really appreciate any feedback as well from you guys and I just yeah I just really want to see what you guys think so let's get into this okay so let's make our outline material uh we're gonna use a post process material to make this so if we right click making to do and name this outline underscore m and we'll just open this guy up like that and we need to set this to the right type of material so if we go to material domain and Chuck that into a post process tape and go all the way down to the bottom and under blendable location we want to set that to before tone mapping sweet so now we need to right click and type in blur sample and we'll find blur sample offsets and this will be the base of our um our material going forward so off of this guy here if we type in Sample scene depth and we'll duplicate this four things just like that and we just need to you know neaten this up a wee bit and we'll stick one just above here at the moment okay so we just need to connect these guys up now so if we just stick these into the pixel offsets just like that and create a two Vector up here off of this so if we click two and click your mouse at the same time stick that in there and off a pixel offset from here if we multiply if we multiply this by negative 4 for now we just need to add these guys up now so if we create an ad and duplicate this another three times let me just simply add these guys together add these guys together uh these guys together and then finally add these guys together and we're gonna have to set uh a primer here too so this is the thickness this will be the thickness of the outline so if we create a parameter and call this outline thickness I just set this to one for now oops like that just connect that up and we drag out here and we will type in ABS so we're going to Absolute the value and we'll multiply that and then power and this will just give us a little bit more control over how it looks in the end we'll just make a little parameter here out of multiply and call it out line outline I'm out and we'll set that to 0.1 and over here we'll make another parameter and we'll call this outline oh and uh we'll set that to two for him and we'll saturate this just for safety just in case cool so we've pretty much got it but we just need to get rid of the background so what we'll do is we'll right click and create a scene depth and we're gonna have to divide this by a really large number so we divide this by eight one nine two and we flip it by creating a one minus and then we saturate that and we want to multiply this into the base value here so if we create multiply let me just multiply them together cool sweet so we've got an actual outline now which is looking pretty nice um but we're going to use this this black and white value as a mask um to go between your scene render and this outline so if we right click and we type in scene and you'll find scene texture and we're going to want to set this to post process input 0. and if we drag off of this and we type in mask and create a component mask and we just want to mask this to the RGB value like that and we want to create a lerp linear interpolate right here and we're going to stick this one into the a and just push this up with it just to kind of Tidy Up like this and what we're going to do is we're going to create a three Vector so if you if you click three and then left click on your mouse and convert this to a parameter and we're going to call this outline a column like that and we're going to stick this one into B and before we put this into the alpha we're going to multiply this put that into the alpha and we're going to use the Alpha from the alpha channel from the outline color as a way to sort of control how uh strong this effect is on the render so we just put this guy into the emissive and it's a wee bit thin there but it is actually outlining that so let's just check this in and see how it looks apply and Save and we'll right click make a material instance if you just find your post process by volume and go down to post-process materials click the local plus sign and make our asset reference and just drag that guy in start to see your scene as uh opening on everything sick it's pretty cool and if you go into your material just open this guy up here like that and you go to your thickness you can control how thick it is and the color which is pretty cool nice default for now if you are just looking for a sort of overall basic outline effect this is pretty much all you need and it will just affect the entire world but if you need this to just affect specific objects uh we'll get into that now Okay so what we're going to need to do is use custom depth to pick out certain objects for this to effect if you wanted to specifically affect things and rather than it be in the whole world so what we're going to do is we're going to go down here I'm going to right click and you're going to type in scene texture and we're going to set this to custom stencil foreign this by 255 like that we're going to mask this like before but this time we're just going to do it to the red value and then we're going to drag out again and we're going to type in bitmask and just make sure this is in the bit mask and not the bit itself and now we're just going to make a one vector stick it into there and for this tutorial I'm going to use two but you can go all the way up to I think 256. 255 something and this will be our mask so if we go before the saturate here and we multiply this like this like that play save let me go back into our scene you'll notice nothing's outlined but if we go to this uh like some like an object or this effect let me go down to custom depth let me type in custom depth turn on that and we type in our value that we have in our material so it's two so two you'll see that it's only effectiveness object I'll just turn this up a wee bit so it's easier to see yeah there you go and it's only affecting this object so if we you know select this object here turn on custom depth and pedestals too you'll see that it's outlining this object but not this one now that's pretty cool if you've got like a main character um in there they need to be outlined but you know the rest of the world's may be realistic that that works pretty well but what happens if you've got like maybe an enemy attacking you and you need to outline them in let's say red well what we can do is in this material I'll just uh bump things about a wee bit here just for space um what we're going to do is we're going to make another mask like here we're going to duplicate this guy and we're going to say this is going to be a three a value of three and this one is our black outline like the sort of main one and this is going to be the red outline okay so first of all we're gonna add these together like that and we're going to saturate this for safety and we're gonna replace this one here with this into the multiply so that the the waddled is picking out these objects like both of these objects combined and then we're gonna have to use this guy as a mask to change the color here so if we just shoot these guys up either about the space and and here we create a three vector just like before you can make this a primer so it can be a different color but I'm just going to make it red at the moment like that and we create alert like that and we connect the red one or the enemy one into the B and we connect your main color into the e and the alpha we need to connect all the way over here into the red outline like that and this guy here is going to replace the B channel here sweet so let's just see how that looks and the world now so again let's say this ball here is the enemy this is your main character and this is the enemy we turn on your custom depth let me put this to three notice it's got a red out red outline now sweet and this can be activated in blueprints or something or turned off um maybe if they're like within range or if they're attacking the player or something that's pretty cool um the only thing that might happen here is if you get to this point and you know these guys aren't showing up at all or the whole world is looking a bit odd that may be because your project settings aren't quite right so if you go to your project settings and you type in custom depth and under custom depth stencil pass there should be like a little drop down as standard it's enabled you need to change this to enabled with stencil and what this does is it basically unlocks these this sort of value here so then you can kind of you know customize like whose what value and you can have different colors on different objects and stuff like that so yeah all right so yeah I think that's the end of this tutorial if you guys need any help with this effect or if you have an idea of what you'd like me to do a tutorial on next leave a comment down below and check out my devlogs I've got my channel for a button pop if you guys are interested in the game and yeah I guess I'll see you guys there bear

Channel: Reality Adrift Studio

Views: 37,582

Keywords: #gamedev, #indiedev, #unrealengine

Id: m7DpYnWQbKI

Length: 14min 20sec (860 seconds)

Published: Fri Dec 02 2022