Outline Shader in Godot (tutorial)

let's see how to grades outline shaders and by the way in the previous video we saw how to create that smooth transition texture based links in the description but now let's look at the outline we're going to see how to create an outline that we can define in pixels just like the outline layer effects you can find in crater or other programs except that this one is generated in real time in your game if you have a keen eye you will see that this outline is not perfectly round well for one because the sprite has some drop shadow on it but it's also because of the way we're going to create that outline at the game's resolution and in motion it works perfectly as usual source code in the description now let's get started so if you have the demo you can use the test sprite I've provided for you if you don't just pick any sprites it will work you just need something that's transparent because the outline will appear around the sprites and within the bounding box of the sprite note if your sprite fills the entire box it will not be visible because shaders only operate inside that box note that can make the outline inside the texture and inside the sprite instead if you want we're going to see how to make it outside the sprite let's create a new material again shader material and a new shader resource inside a bit I will save the resource at the root of the project let's call it outline and get started with it so first we define our shader type it's going to be canvas item as usual and the shader random mode we also want it to be and shaded this one I'm not sure maybe you want some lighting on top of it and shaded is the most common mode you'll use for canvas item shaders if you don't want them to be affected by light now we're going to start with our exported parameters first we want to define the width of our outline or the size if you want and we're going to define a range where a minimum of zero and let's set the maximum at I don't know 30 pixels something like that and we're going to use a color for the outline as well so for that you need to use B vector fault type for values for RGB and alpha let's call it the outline color make sure that we give go to the hand color so that once we save the shader and go back to the material and show you the parameters we get that color picker which is quite convenient I'll set the width to 4 pixels to start with so that we can see our outline appear as we build it we're going to add our fragment function because we're going to work on pixels again here okay so let me explain what we're going to do here and I'm going to use crater to demonstrate the ID so I have the base right and I have a copy of it that's pure black imagine that this is our outline color okay we're going to take our texture and sample it multiple times but offset it slightly in different directions this way so let me copy the sprite four times and I'm going to upset it by four pixels on the right form pixels on the Left four pixels down and four pixels up and there you get an outline now with these four pixels especially on a round shape like that the outline approximation is pretty good but you do get some flattening on the diagonals and that's why we're also going to use for our the copies moving to the diagonals we're going to add all these files together and divide it by the number of copies we'll do that with a bit of a trick but this way you can get the outline effect around any sprite regardless of the shape so let's do this we're going to calculate an alpha value and we're going to set it to minus the number of times we're going to upset and resample the texture so in our case we're going to do that four times to start with let's do four times x our sprites alpha and to get it we've got to sample our texture yeah let's call this the sprite color we're going to store the texture look up in a variable and want to use the built in texture all caps constant name this corresponds to the texture of that sprite and the texture function is going to extract the colors from it this is a sampler 2d and we need to pass in our UVs as well to get the colors that we want to really just get this texture a copy but inside a variable now our alpha is going to be minus four times the sprite colors alpha value now we're going to cup this same texture four times but with a slight UV upset every time so we're going to do something like alpha plus equals we're going to add the result of that lookup we're going to look at the texture plus and we're going to use a vector to to upset it every time on the UVs for example if we want to start going to the right we can do plus 0.1 and 0 on the y-axis we extract the alpha only because remember we are working on a floating point value called alpha here and we do that four times and finally we're going to do it's going to the left going to the bottom so 0.1 and going to the top minus 0.1 now we're going to assign our outline color and the alpha only to the color result so we can visualize our outline outline color dot RGB and the Alpha and you will get this weird result we do get our red outline here we have a bit flattening on the side that's fine Paul now we're going to fix it and we do get an outline plus something inside of the sprite that looks little weird the first thing we're going to do here we're going to replace that zero point one hard-coded value with our width in pixel known that using zero point one makes for a big outline because we're currently in the texture space when we do that while I knew B space so zero point one means 10% of that texture size on the x axis or on the y axis now we're going to calculate a width or a size based on our width and pixel at the top of our shader let's create a new floating point value we call its size it's going to be equal to the width times one divided by and we're going to use the texture size function to calculate the size of the texture this one takes a texture and LOD a certain level of detail or MIT map of the texture in 2d we generally work would be full resolution texture so that's the LOD 0 in this case and we want to take the first component of that value this is going to give us an integer value remember that textures have fixed size in pixels so we get an integer we're going to wrap all that in parentheses and I'm going to convert this to a floating point value so we don't get that type error so I will float size is equals to 1 divided by the size of the texture so we get the size of 1 pixel that way multiplied by the width we want in pixel now we're going to copy that size and I'm going to replace our zero point once here control are going to replace them with size and make sure you only select the lines where I want to replace values click selection only and replace all there you go so now we can control the size of the outline in pixels using our width parameter by type 8 I get an 8 pixels outline note that with our for texture upsets the outline is small it works really well the problems start to rise as we increase the size of the outline the more we increase it the more we get that flattening on the sides and the more you can see the overlap between our texture lookups but up to 6 pixels it seems to be working pretty well so if you only need 6 pixels you can stop right here now if you want to use 8 texture lookups you're going to start with an alpha minus 8 times the sprites alpha and then the resulting 8 it's actually lookups look something like that now I've got a little exercise for you when you start to see this many lines of code repeated there's something you can do about it with loops so I invite you to simplify this code with a double for loop but we're going to move on to calculating the final color because right now we have an outline and we have some empty gap in between so we want to put our sprite color back in the center so one thing we can do is mix between the outline color and the sprites color and their respective alphas to make sure that we get the right colors on the right pixels so first we can make sure that we compound both all paths together with the max function Max will return the highest value between the two so our alpha and also our sprite colors alpha so as we get values of 1.0 in the center we're going to use that to get our sprite call it back now as you can see we do get some negative alpha values in the center this is why we get that weird color so one way we can also compound the two alphas together is to first get only the absolute value of this alpha plus these bright colors alpha and we're going to claim the result between 0 and 1 so use the clamp function we're going to pass that as the first parameter we climb between 0 and 1 and there you go we get a fairly opaque result now we're going to calculate our final color so let's call that the final color and we're going to use the mixed function to mix between the outline color and the sprites color sprite call the first outline color second if you want and for the transition parameter between the two and we could simply use our alpha is a transition value now we want to replace the final color in the color assignment at the end of the shader and make sure that we only grab the RGB values you do get with that negative alpha that alpha error that we get we do have the outline but we do have some artifacts on the texture so we want to make sure to clam the alpha between zero and one when we do that to not have that negative alpha value and with that you have your outline shader you can change the color you can change the outline width this is not a 100% optimized outline you still get some artifacts here and there you can get updates and improve code by going to the open source repository and grabbing the outline shader there the point of this tutorial is to give you a quick look at texture size at doing some logic with pixels like upsetting the texture multiple time using multiple texture lookups techniques that you will reuse in different shaders I invite you to go watch the transition to try the view if you haven't already or our series on shaders with Bastion ilish about 2d and 3d water you can also support requests by getting our good course or supporting us on patreon but that's it thank you kindly for watching be creative have fun you in the next one bye-bye

Channel: GDQuest

Views: 32,673

Keywords: godot shader tutorial, shader tutorial, shader programming, shader programming tutorial, godot shader, godot shader 2d, godot shader examples, godot shading language, outline shader, outline shader tutorial, godot shaders, game development, game engine, godot 3 shader tutorial, open source

Id: LAa8UE3ItM8

Length: 13min 6sec (786 seconds)

Published: Wed Oct 24 2018