UE5 | UE4 Tutorial : Cel - Toon Shader

[Music] today we're going to cover how to make a cell to Shell no sale Shader and ue4 and 5. we will actually be making this in unreal 5 but all of this should be applicable within ue4 it's going to be a fairly simple material where we're just going to use a little bit of Mass to create that step effect but yeah yeah that's it let's get into the tutorial all right so let's first just get rid of this effect that I've already gotten seen so if we just get rid of that and go into your folder and we right click and create a material let me call it m underscore cell Shader and before we go into if we right click and create a material instance like this back to our post process volume and go all the way down to push process materials and click on choose set reference and then if we drag that instance into there whatever we do now in our material will now affect the environment so note three save all that we open up our Shader like this here and now we can do some work number two sec so the first thing we need to do is change the material domain so if we go to a little drop down on Surface under material domain and select port Al says it will come up black and that's because we don't have any data in here yet and we need to reference the render data from our scene if you go up to the little lit icon visualization and then click on overview you'll see all these little screens here and this is how the passes unreal uses to make up this image and we can call all over these within the material by using the node scene texture so if we put that back to lit and open this guy up like this and if we right click and create a scene texture this process input 0 and Chuck that guy into there and apply that you're seeing goes back to normal sweet now if we open up this game we now need to calculate our new line for the cell shooting and the way we're going to do that is forgive yourself we'll leave a room and we duplicate this guy down here and grab ourselves the base color as stored in G buffer like this and we're going to desaturate them nodes like this cool and if we divide the both of them this should be black and white shading now you might notice this sort of Jitter effect and we'll solve this by going back into your material clicking on the empty space going all the way down to the bottom here and under blendable location if we change it from after tone mapping to before translucency Supply to solve that sec so now all we need to do is put this through a sort of calculation to produce a sort of stepping effect so the first thing we need to create or is an if statement if we open this guy up properly create an if like this and we just put the error and out of the B Channel we're going to create a constant so if you left click and press one on your keyboard and put a one value in there for now and an a value if we connect that up to the top one here from the post process mp0 and we're just neaten that up a little bit like this and for the a is more than b if we multiply this by itself but just before here if we clamp this just in case it's more than the value we need so it should be between 0 and 2 like this guy up a weaver again thank you and now all we need to do is figure out what's going to be equal to B and what's less than b so if we push this down here a little bit we're first going to add in the specularity in the scene so if we duplicate this and on the top one if we change this to spec we're and in the bottom one if we make this metallic like this and if we pull out the specular and saturate it multiply this by a factor of roughly six check this until there into the B Channel and change the air channel to 1. and then we're going to use the metallic value to mask this so if we put it here and saturate like this and you fire that into the alpha what this means is anything that's metallic well then in the scene be calculated via the specularity but it's multiplied by six so it's a little bit more extreme and anything that isn't metallic is pure white so now drag out here and multiply this like this and make this Channel and if we put divide into here make a little rear node here here and may pillow the multiply and loop this we're going to give ourselves a little bit more control here so if we put this to the B Channel and then this one goes into the a channel just like this and maybe pillar here and create a saturate and then we connect that up to the is less than b and is equal to B I only need to do is create a little parameter here so we can turn the specularity on and off depend s what you want for your game so if you left click and press s and type in Spec light like this and put the default to one and put the max to one check that guy into Alpha GPS now if you go into our scene and we open up our instance like this and we play about with our spec value now you should see that the specularity you know affected by material sec so now if we go back in let me just give ourselves a little bit more space like this [Music] this is the the lighting cool now all we need to do is Chuck this through a sort of calculation to give us a sort of Step effect so if we drag out here and give ourselves a little parameter here and call it stat kill and put this to 0.9 and this is all going to go into alert so if we create a layer so that we can do over calculations in the middle cool so if we drag out the power and then multiply and then we floor this and then divide this what we're going to do is create a parameter here just like before and we're going to call this steps maybe put in like five-ish multiply the value lower it and then divide it by the same value this should give us our step sort of effect cool so now we need to saturate this and stick that into the B channel of the lerp so now we need to figure out the alpha channel so if we go along here and out of the power we create a multiply lower that and just in between these nodes if we create a little saturate for safety like this and give ourselves a little parameter over here uh let's say step offset and we give it the value of three for now we fire this into our Alpha and we will see that our preview is starting to look a little bit different so if we save and apply and then we go into the scene you'll notice we actually have our cell shading stripe kind of effect which is pretty cool sick and you know what's also kind of sick I'm working on a game called button pop if you guys are interested in the game at all I'd really appreciate it if you go check out Steam and wishlister and I really really head back so if you want to see something in particular in the game like your own hat or your own button or something like that put the comment down below and with that said let's get back to the tutorial so if we go back into the material and give ourselves even more space and comment us and call it uh steps and if we Chuck these guys into little group all at steps that were neaten things up now the next thing we need to do is calculate the color but just before we do that we're going to create a power and then a multiply I'm going to multiply it by 1.5 and keep the power at two and the reason for this is it's just going to solve a few of the little issues with the color later on actively so don't worry too much about this okay so if we get some empty space here and we create alert we're going to lurp between the shadow color and seen color but kind of tunified if you want to say and we're going to mask this with our steps calculation so if we just Chuck this guy into there like that and for our shadow color if we create a three Vector so if we left click and press three at the same time give a year three vector and if you right click and convert to a parameter and call this Shadow color and connect this guy up to the e and um I tend to make this like a sort of Bluey purpley color so if we make a point zero nine nine in the red and then a point one two seven in the green and our point two three seven for the blue you'll get this kind of color that's what I usually use and if we just come along a little bit here and right click and type in type and even make this post recess input 0 let me drag out and we normalize it this will give us the pure color of the scene with a lot less of the shading involved in it but we can control this a little bit so if we either multiply or even you can lurp it if you like buy a primer so if we make a parameter here and call this normalize color and if we make this a number between one and two usually is best so we can just stick in 1.5 for now and a little trick that I use is that I multiply this bye the base color so if I duplicate this up here and we find the base color for lighting and we desaturate this and we multiply this here by roughly five or something like that we sat through that and stick that into multiply that will just kind of give it an extra pop to it so now if we saturate this and mask it to the RGB value like that Rock that guy into the B should now be able to connect this up to end result and if we compile and save this and go into the scene you basically have a very simple cell Shader and play about with these values a little bit if you like change the color step values all that sort of stuff if we go back into our material let me open it up we can add some little details here that really add a lot of functionality to the material so if we say alarm and we put these guys under the group color like this and if we add a little LARP here Chuck this guy into here for now and then put that into that layer expand this up and if we create two parameters here one of them should be called Shadow men look at that and the other one should be called Shadow Max and just put the max to one for a note and put it a and what this will allow you to do is control how powerful the Shadows are in the scene another cool trick that I usually use in a lot of my projects is that I like to blend this with either um this color for the sort of pure scene color and also blend it with the base render so if we drag over here a little bit and we right click and create a scene texture like this and we drop this down and go to texture color as stored in G buffer like this and if we drag out and mask this we create alert by pressing L and left clicking and we connect this guy up here like that and if we pull this guy into the B this guy into the e and if you create a little parameter here and call it soon blend the one and put the max to one as well and Chuck that into the alpha and if we just look at this along the exact same just put that into the output and this into the B but this time if we change this one to the post process input 0 and we rename this one to base blend like this and we apply and Save we have a look in our scene and have a look at the instance here what this will allow us to do is we activate these gaze like here pull this down we'll go back to our normal scene render can cool and then also if you just put that back up we can also blend between our material render and the base color so what I tend to do in a lot of my projects is that I like a sort of um a blend between it rather than just being so harsh so if we put it to like 0.9 it like this which can kill again that's really just up to you in your project so if we go back into our material again enough this guy a couple other things that we can do is add in ambient occlusion on top of this and also mask it depended on a different character or the whole world or whatever you need so we just push this guy along a wee bit here and we create a multiply and then multiply here like this and if we create a scene texture again and you look for ambient illusion and if we drag out here and mask it to the red and we Chuck this into a layer and for this tutorial we're just going to do a minim Max but you could even like put color onto the AO quite easily here um so the min max way is that if you just create a primer we call it AO men and then duplicate that like this and the Mac should be one cool so essentially what this allows you to do is with the max value this is how intense the base render is which is which is and the minimum value will control how Intense or even how dark the eel is cool so if you do actually want to apply some color onto this all you need to do is right click create alert like this and instead of multiplying it we can Chuck this guy into a factory like this and then into the alpha and if we connect this guy up to the B which is which is white value which is the strongest and max value here like this and then all we need to do to get rid of this all we need to do is create three vectors so left click and press three and if we just make this a color for now you can make a superamer if you like into your material but for this tutorial we'll just make a color so let's say green like this again here and you'll see this kind of glow here to apply this enter scene you'll notice that we have fill control over our AO like this which can go and obviously it's the color that we want so if we go back in here and make it let's say black like your normal sort of AO color apply that yeah sick this will also be affected by your post-process settings so if we go in here and type in ambient occlusion you'll see that it's affected so it's kind of up to you if you need that and your material or not so if we go back in here we can start masking this out depending on the object as well so if we copy this guy over and we change it to a custom stencil let me drag out and we divide by 255 like this let me drag out here and musket just to the red Channel and the pillow here and create a bit mask like this and we want to create a constant so one and click and for this tutorial I'm going to put it to 200 but you could put it to any value Within 255. down here and if we stick that into the bit here we create a LARP access into the alpha and then put this to the output and this as e and all we need to do now is get the post process and put zero so if we use that there mask this to RGB if you don't mask it it will give you an error like this if we apply save the only thing you're going to have to do to make sure this actually works in your scene is you'll have to go into your project sentence and type in custom and you have an option called custom depth stencil pass and as standard it might be set to enabled you'll need to set it to enabled with stencil so you click that and then go back to your scene it should be and you'll notice that this ball among some other objects is not rendered in the South Shader kind of style and that's because if you go to the search function in the details panel and type in custom depth see that custom depth is ticked on if I click off it goes back to cell shooting if you click on and because it's also set to 200 it will not be included in this pass but if you set it to another number like 201 uh includes it now you might need this to be the other way around like let's say you want the whole world to be realistic but then just an object to not be uh what you could do is you is reverse this so in your lurp just pull this down um if we just put this value to the B and the post process 0 to the E and we apply the whole world is realistic except for the object with the custom depth on which is pretty sick no just one little tip to go forward with this this goes really well with outline material I I have made a tutorial in the past going over how to make one uh if you want to see that go check out this link but if you've got your own one you can plug it in right here in your post process materials array also just in the topic of outline materials I will be looking into a more advanced sort of outline material where we can include all the details and your characters and textures and stuff like that so if that's something you'd be interested in keep an eye on channel but yeah I think that's the end of this tutorial I'm currently working on a game called button pop if you're interested in the game at all I'd really appreciate it if you check it out on Steam and wishlist it I've got a number of Dev Vlogs up now so we'll have a look I really just appreciate your guys feedback so if you want to see in then protect your Thunder game like your own button or a hat or something like that leave a kind below but yeah I guess I'll see you guys later bye

Channel: Reality Adrift Studio

Views: 21,078

Keywords: #gamedev, #indiedev, #unrealengine, #UE4, #UE5, #indiegamedeveloper, #outline, #UnrealTutorial, #Blueprint, #Toon, #Cel Shader, #Stylised Material

Id: ry-E3QmpIBU

Length: 22min 40sec (1360 seconds)

Published: Fri Apr 07 2023