Interaction Outline / Outline Effect- Tutorial | Unreal Engine 5

hello everyone in this video we will see how to create an outline Shader in a engine file to do so we're going to first create a material so right click in the content browser look for material then choose material call that M outline I'm going to open it in the settings of this material I'm going to change the material domain from surface to PO process then only one node is available the MS C now I'm going to create a new node I'm going to look for a seene texture and from the corner of the in texture I'm going to connect that to a LP node so L stands for linear interpolate so the name is actually linear interpolate in a engine click on that so this Lo will be connected into the msf column we see an error is because the send texture ID is set to syn color what we want here is postprocess input zero the moment you do that you can see that the error is gone so in our La node we have a b and then the alpha value right now the a value is good so we clear for that now we want to have the B value in this case the B value will be the color of the outline to do that I'm going I'm going to look for a color node so I'm going to look for constant and I'm going to look for a constant 3 Vector right here I'm going to right click on that and I'm going to convert that to a parameter so we can change the color whenever we want and I'm going to call that color this color will be connected directly into a make float node so going to connect the red value here to me float and I'm going to look for me float 4 so the red value will be connected to X the green to Y the blue to Z and the alpha here will be also connected to the alpha of make float we're changing the parameter of this color to make that a float which we will connect inside the love value instead of just connecting that to B I'm going to look for a multiply node and another constant but this time just a constant Vector which I will right click on and convert to parameter call that intensity I'm going to call that glow intensity and this will allow us to change the intensity of the color so right now we have a color here that we multiply to this intensity so we're gaining the intensity of that color which we can then use directly into be this just allows us for multiple scenarios and creating different type of outlines so right now we have the A and B value of the L the most complicated one is actually to get the alpha value here so the L switches between the value A and B based on this third value the alpha value here and here what we want is to get the depth of the scene so we can see if the element is chosen it will be highlighted and how highlighted it will be so let's get started what I'm going to do here is just move that up and comment here and I'm going to call that color I'm just going to change the color of the comment here we go and I will move back and we're going to work on creating the alpha value so I'm going to search for a node called view size and from there I'm going to look for a sale node then I'm going to connect that to a clamp node what we're doing here is we're getting this value uh of U size and we are clamping that between one and two by default it's Zer and one we want to have one as the minimum value and two as the maximum value now I'm going to create another parameter so I'm going to create another constant this time once again a constant one so by default it's just called constant and right clicked convert to parameter and this will be the width of the line so while we created the color earlier we still need to have the actual vision of what the line would be around the object so by default I'm going to leave this value to zero um actually I'm going to change that to going to change the default value to 0.5 but since it's a parameter we can change that later on this will be connected to a multiply value and we're going to get the clim value inside the multiply so here we're just creating the line around the object but we still haven't defined how to know uh where the line would be we have the size of the line the value is clamed and all that but we don't know around the object where this would go to do that I'm going to look for a note called sin Texel size this will be multiplied with the result of the previous multiply from there this multiply node will Connect into two different nodes first I'm going to look for a mask in this case component mask by default we have the RNG value which stands for red green and blue and I'm actually actually I just want the red value here and then I'm going to connect the multiply n to another Mas component and this time I do not want the red value I just want the green value I will connect the first component mask into an upend node actually called upend vector and as you can guess the second component mask will also be connected to another upend node so upend Vector make sure this is the upend vector under math and not under vector Ops the red mask is connected to the a value of the open the green mask will be connected to the B value of the openen then I'm going to look for a constant once again a constant one this time this will not be a parameter I'm just going to leave the value to zero and this will be connected to the first openend in the B value but also to the second opend but this time for the a value now that we have that I'm going to create another constant and this time the value will be minus one so right now things might be a bit confusing what we are determining here is to show where the line will appear so to keep going going to connect the up end into a multiply node and as you can guess I will do that twice this case multiply again and just like the upend nodes this will go inside the B value so the first appen is connected to multiply on the a value and the second openen is connected to a multiply node but this time for the B value and exactly like before I'm going to connect this constant we just created which value is minus one directly into to both multiply so the first one for the B value and the second one for the a value so if I look into my material right now we can see that everything kind of looks like it's very close to each other so I'm going to move the collar and the final material node more on the right now I'm need to look for a screen position node from there I'm going to get another mask so component mask and this time I will not change the default value of red and green so the screen position allows us to get position of the player so we can see based on this position based on where the camera is what would be outlined on the object so I'm going to connect that into an ad node and what I'm going to do here is I'm going to create multiple for I'm going to create a total of four different ad nodes so add press contrl C and contrl V to go faster so we have a total of four different an nodes and I also want to get four different sin texture nodes so I'm going to right click look for sin texture by default the SC texture is set to sin color but what I want here is depth so I'm going to look for sin depth we want to have the depth perception from the camera to see where the outline will be everything we're doing here is in 3D so we need to have this depth value I need a total of four nodes so I'm going to copy and paste that to have a grand to of four so once again I'm just going to move everything more on the right side because this is taking a lot of space and back into back into this material I'm going to connect the first ad node into the UV of the first scene texture and I will do that actually for all of them the second ad node will be connected into the UV of the second one and so on just going to try to space things around here we go and all those anal need to be connected so what I'm going to do is get the mass component we have from the screen position the one where we we are using the red and green value directly and I will connect that into all the a values of all the ad nodes while this is great we still need to connect something to the B value so in this case we're going to get um the result of the first openen we had here connect that to the B value of the first ad node then I'm going to get the multiply result the first multiply result connect that to the second second add node then the second up node at the bottom here will be connected to the third ad node into the B section and finally the result of the second multiply the one that's at the very bottom will be connected into the B section of the ad node now we have four different values here and what I actually need I just realize that I said we need the SE depth what we actually need is custom depth so I'm just going to change that in all of my noes right now so here we go and what I'm going to do is I'm going to copy one of those nodes contrl C and contrl + V so I have a grand total of five different scene textures and all of them are set to custom depth this one will not be connected to anything on the UV side however the corner result of this custom depth will be connected to a subtract node and what I'm going to do here just like the add nodes we created earlier I'm going to copy and paste all of those so I have a total of four different substracts the very top custom depth node its color is connected to the first substract it will also be connected to only substract nodes into the a values so I'm going to get color all of them into a now that we have all the a values for the subtract nodes I'm going to need to get the B value in this case this actually very easy we just need to connect all the SC textures to uh the B values so the first in texture the one that is connected to an ad node so I'm just going to ignore the right top one here the one that's connected to an ad node in the UV I'm going to get it color and drag that directly into the first substract for the second one here I will also get the corner and drag that into the B node here of the second substract for the third one I'm going to get the Coler connect that to the third subtract into the B value and finally the last one get the colner and connect that to the B value now we almost done we just just need to get an add node here so the first subtract is connected to an add node and we need to add the result of the first subtract and the second one and the third subtract node will also get to another add node where we get the result of the third subtract node and the fourth subtract node so in here you should have something that looks like that both subtract one and two are connected into an add node together and three and four are also connected to another anode and we also want to get the result of both this ad node so I'm just going to get another one and I'm going to connect the result of the first ad node into a and the result sort of the second ad node into B so at the end we have all this operation all this calculation we're getting the depth of the scene we're getting the lines the the width of the line of the outline all that ends up in one single value here which is the result of this ad node and we are almost there so I'm going to connect the result of this ad node into a divide node and this divide node will be attached to another constant so in this case look for constant or if you want you can just press one on your keyboard press one and then just simply click into the material um editor and this will create u a this value this time will be hardcoded to minus 100 finally going to connect the result of that into a substract and we are just going to substract one to that so by default B is set to one that's all we need to have and I'm going to get a clamp node here by default the minimum value should be zero and the maximum value should be one we will uh keep those values so we want to have the result of all of this operation set between 0 and one this is why we need a clamp here and this clamp will be connected to the L the alpha value of the N should be set between zero and one so this is why we're clamping this here to make sure that we don't have a higher or a smaller value for some reason and this is pretty much all we need to do here so now I'm going to save this material go back into my scene and I'm going to add a volume and actually I want a postprocess volume here if just like me you have a postprocess volume already in your scene you don't have to create a second one so I just did that for the sake of the example but I'm going to delete that and in this PO process volume I'm going to search for infinite extend and I'm going to make sure this is checked on to true now I'm going to look for material and under your postprocess volume you should have a postprocess materials by default it should be an array with zero element in it so I'm going to add an element and I'm going to click on choose and asset reference what we see here is we have none in the array going to drag and drop the material out line we just created and put it right there so now this post process has a material but nothing is happening here we can see that there is no outline anywhere so what we need to do is for each object we want to outline for example I'm going to select this Cube I want to look for depth into the search bar here and we can see that under rendering into the advance settings there's a value called render custom depth pass we want to turn that to true and we can see that we have an outline here because I did not change the color of my outline we barely can see it so what I'm going to do is go into my material change the default color from black to something white and change the glue intensity to 10 and now we can see that the object is outline so by default this material if I can create an instance of this material I'm not going to rename that so it's just going to be called material outline instance if I open that and see I can choose the width the intensity and the color can change that to let's say blue color I want to have a very thick line and a very strong intensity so I put 10 for the glow intensity 10 for the line width and the color is bluish back into my P process volume I can look into materials again and change this R element to the instance I just created here and we can see the outline is very obvious here it's actually a bit too much but it's uh it's working so we can just change values let's say I want a small line 0.5 going to save and here we go so this is it for this video and we'll see you in the next one

Channel: Morrigan

Views: 121

Keywords: Unreal Engine 5, Tutorial, Interaction System, Game Development, UE5, Unreal Engine Tutorial, Blueprint, Game Design, Programming, Video Game Development, ue5, interface, interface blueprint, blueprint interface, unreal, tutorial, interaction, system, tutorial unreal, tutorial ue5, tutorial interaction system, game dev, blueprint, user interface, widget, outline, outline effect, outline shader, outline interaction, outline unreal engine, outline effect ue, outline effect unreal

Id: udr-1U9CjmI

Length: 18min 50sec (1130 seconds)

Published: Fri Apr 19 2024