How to make a 2D OUTLINE in Unity!

hey it's me again mr. schmuck eyebrows at your disposal as you can probably guess we're still working from home so I'm afraid you're stuck with picture me a little while longer so a really common effect to use when creating a game is a 2d outline around your sprite this can be a great way to make a sprite stand out from the background and draw attention to something important but as is often the case with shaders that isn't actually a really easy and solid way to create an outline that is just going to work for everyone instead we kind of have to cheat our way there which quickly becomes a bit hacky that said the technique that I use and that I see used most commonly it's actually really simple to make and it works in most cases if you just follow a few guidelines it basically works by taking the sprite and creating a copy of it we then take this copy colored and offset it towards the left as you can see this crêpes a kind of drop shadow effect but if we repeat this process three more times toward right up and down it creates a nice even outline and we can do all this inside of shader graph without writing any code so let's jump into unity and try it out but first this video is sponsored by nvidia nvidia studio is invidious initiative to improve your credit workflow through software optimization and powerful hardware their industry-leading GPUs along with their optimized driver technology allows you to speed up your process in creative programs such as Adobe Unity Maya blender and so on our TX studio systems are specially optimized for real-time ray tracing and significantly decrease the render time right here we're using the razorblade 15 studio edition and we were able to smoothly edit color corrected 8k footage and easily simulate 20 million particles at over 60 FPS in unity those of you who already own an NVIDIA GPU can download the latest in video studio driver for increased performance and reliability if you don't already own one check out invidious new lineup of r-tx studio systems by clicking the link in the description for a limited time you can get three months Adobe Creative Cloud for free all right let's get outlining so as you can see i am here in june d and i've gone ahead and set up this very simple player character that i can move around the assets that I'm using here from the gothic then your church pack they're completely free on the acid storm will of course have a link to them in the description and before we get started you want to make sure that you're using you RP and that your project is set up to use the 2d renderer if you're unsure how to do that you can go ahead and watch our previous video on setting up shader graph for 2d again a link for that in the description alright so I want to go ahead and give my player an outline so to do that let's start by going to the project here and let's go under shader 2d renderer and create a sprite on that graph if you still want your sprite to receive lighting you can choose lit graph instead it's really not going to change anything but I'm gonna choose unlit here and I'm going to name it simply sprite outline I'm also just going to right click on this shader and create a material based on it let's call this player and I'm simply going to drag it on to my player object a right away we can see that our player turns into a white box the reason for this is that our shader is currently completely empty and so our player doesn't know what sprite to show let's go ahead and change this by open up our sprite outline shader and I'm actually just going to turn this into a full screen window here and as you can see in here all we have is this empty master node so let's go ahead and load our default sprite sheet into this node to do that we need to create a new property of type texture 2d and let's call it main text and in order for unity to automatically input the right sprite we need to set the reference here to exactly underscore main tanks again we've talked about this in previous videos on shader graph but this is just a value that unity searches for and make sure that this main text here is always going to display our sprite then we can convert this value here so we'll put it into a sample texture node in order to convert it from a texture into an RGB a channel and we can then take this into the color input of our master node and right now we don't really see anything happening in here but that's just because we need to set a default texture here something you're going to hit default and I'm just gonna input the player sprite sheet and right away we can see that it loads into a sample texture and under our main preview if we right click here and change to quad we can clearly see all the sprites making up player and if we save this asset and go back to our scene view we can clearly see that our player is currently showing up in other words unity is now automatically loading the right sprite from our sprite renderer into our shader as you can see right here now with that setup we are ready to create our outline and as we talked about this starts by making a copy of our normal texture so we'll take these two nodes here hit ctrl-c and ctrl-v in order to duplicate them and we're going to go ahead and offset this copy of the texture to the left to do that we need a tiling and offset node so we'll hit space search for tiling and offset and we can then take the output of this node and put it into the UVs of our sample texture node what this does this allow us to offset both the tiling of our sheet as you can see here we can stretch it in and out and it also allows us to adjust the offset and that's exactly what we want to do we want to offset this a tiny bit to the left so to do that let's in put a tiny value something like point zero zero five of course this value is going to depend on your sprite sheet and now these two textures here are going to be slightly different and because of that what we can actually do is subtract one from the other so if we take the Alpha of our offset node here and put it into a subtract node we can then take the alpha of our normal texture here and also put it into that subtract node and what this does is actually show us the difference between these two textures in other words we are only seeing the outline the part of these two textures that aren't the same and this is giving us kind of the drop shadow effect what we can then do with this is multiply it with some colors let's take the output of this put it into a multiply node and let's take some kind of color node here so color and put that into the other input and as for the color here we want to go ahead and pick a bright color I'm just gonna choose some kind of bright orange here and you also want to make sure and this is very important that you set the alpha all the way to the top this way we make sure that our outline won't be transparent and now that we have our the outline here oh it's currently just a drop shadow but you get the point what we can do is add this back on to our original texture and then input it into our master node so let's go ahead and instead of just going directly here let's take this signal and add it together with our drop shadow and take the output of that and put it into our master and right away you can see we have this bright orange outline on the left side of our character in fact we should be able to go ahead and just save this asset go into unity and voila we can now see this bright outline on part of our character now there might be a few things that are preventing this from working on your system depending on your setup so we need to make sure that we follow certain guidelines the first one is that we need to make sure that we leave some room around our sprite the reason for this is that when working with sprites and shaders in 2d we can actually only display things inside of these borders in fact we can preview this by going into wireframe mode and as you can see our sprite here is pretty much just a 2d quad that we are drawing a bunch of color data onto and so if this isn't big enough we won't be able to see the actual outline so how do you leave room around your sprite well you make sure that when you are designing your sprite that you have plenty of room around it and if you're working with multiple sprites like I am here when you go into the sprite editor and slice your sprites you need to make sure that you leave plenty of room around each individual one as you can see I've done that here so I have no problem displaying the outline and sometimes when you're working with just a single sprite like I have this ninja character here again this is freely available on the asset store link in the description Jun is actually going to go ahead and cut the geometry of this 2d mesh to kind of fit the sprite and in most cases this is fine but if you want to make sure that you can have an outline around your character that might not fit too well see if we go into wireframe mode on this character we can see that the mesh is actually fitted to the character so to turn that off we can simply select the character and change the mesh type from tight to full rect and as you can see now it displays the entire image of our character and if we go back into shaded our character still remains the same so let's say workaround for that and the final thing that you want to make sure is that your sprite sheet is completely square if your sprite sheet is stretched in one direction it's actually going to go ahead and stretch the outline as well so just something to keep in mind now with this we can go ahead and add some more stuff to our shader so let's open up our shader and the first thing that we want to do is control the thickness and this is done by simply adjusting the offset so to be able to do this inside of the material let's create a vector 1 property let's call it thickness and let's default it to point zero zero five we can also change the mode here from default to slider and this way we can choose two values that we can go between I'm going to set it between zero and point zero five then let's take this thickness value and drag it in here and now we can't just input it directly because we only want the thickness to control the offset on the X so let's instead go from the thickness into a vector two and here we can have the thickness going to the X component we can leave the Y component at zero and then take the output of that onto the offset and that should allow us to control the thickness through the material now let's go ahead and do the same thing for color but we already have a color node here so let's simply right click on this and convert it to a property and that is simply going to put a property up here in our outline called color let's also go ahead and change the mode here from default to HDR which is going to allow us to input higher intensity values to make our outline glow and with these changes let's go ahead and save our asset and if we now select our player material as you can see we have a spider here adjusting the thickness as well as a color value that we can change and even bump up the intensity on to make it glow of course whenever you're working with glow you also need to make sure that you have a bloom post-processing effect enabled we have a whole video dedicated to glow in case you're interested so now that our effect is working let's go ahead and copy it to the other directions starting with the right side and doing this is actually super simple because we can take this entire section and just duplicate it so let's move the and let's remove this connection here and let's instead take all of these notes right here hit ctrl-c and ctrl-v to duplicate them let's move them down here and we now take the thickness here and instead of just inputting this directly into the X of our secondary group of notes here we want to make sure to reverse this to the other side so if we move point zero zero five to the left here we want to move negative point zero zero five to the right over here and we can of course do this by just multiplying with minus one and of course that's a handy note for this so let's go from our thickness into a negate note again this just multiplies with minus one and then from this node into our X and what we now have is both the left and right side of our outline and what we can simply do is add these two together let's take the Alpha of our left side go into an add node let's take the alpha of a right side go into the same add node and this might be a bit hard to see but we now have the same sprite kind of shifted to each side now from here you might think well let's just goes straight into the subtract but since we are adding values together here some of these are actually going to be above one and we want to make sure that our alpha always stays between zero and one so to do that we go from the output here into a clamp node and we're just going to clamp the values between zero and one so anything that's larger is just going to be one anything that's less is just going to be zero it's a very simple node but it's just going to make sure that when we subtract these two nothing weird is going to happen and we can now see that we have an outline on both the left and right side of our character really cool and I'm just going to go ahead and sort these nodes so that they don't look as confusing and just like we've done the left and the right side we can actually take all of these nodes here and copy them in order to create up-and-down and the only thing that we need to change here is instead of going from the thickness to our X we'll go from the thickness to our Y here and the same thing down here except we go from our thickness turn the gate node and then from the eunich eight node instead of going to X we go to why and that's pretty much it so we can now take these two values and add them together so we're going to an add node here to add our two up-and-down directions together and we can then add these two together so we'll go into yet another add node here and that now has all of the directions to add it together left right up and down and then finally we'll go from this into our clamp which goes to subtract multiply with some color and then add everything back together and right away we can see that in our preview our outline is now all the way around our character and if we save this asset and go back into unity voila our character indeed has an outline that goes all the way around awesome and we can of course go ahead and adjust the thickness of this in any way that we'd like we're gonna just the color of this and the glow amount so there's plenty of opportunity to have fun with this of course you will notice that if you go ahead and make the outline really large like I do here our technique will kind of start to falter because we can start seeing the individual copies of the sprite and easy fix for this is to just create more copies diagonally which will kind of help fill this out but I'm just gonna be completely honest it is more of a hacky fix than it is a solution unfortunately that's often how it is with shaders but I'd say for most cases this is going to work just fine I think this outline is as thick as I wanted on this character now if we zoom in here we'll actually notice that this outline is a bit uneven some parts are brighter than others in this case I actually think it looks pretty cool but you might just want a completely solid outline now this doesn't always happen but as you can see sometimes the sprite sheet gets laid out in such a way that there's a bunch of color around the actual character that's the weird color clenching we see here I haven't been able to find out why this happens so if any of you know something about this definitely let us know in the comments but luckily there is an easy fix for this what we can do is simply use the fact that we have an alpha Channel and multiplied into the different color channels in order to get rid of all these colors surrounding it in other before we add all this stuff together we'll take our color channels and multiply them together with our alpha channel in order to remove all of this stuff around the characters now that's just blank and this is great but since we have the Alpha as part of this four channel we're kind of right now multiplying the alpha with itself and we don't want to do that so we'll take the output of this go into a split node we'll go from this split node into a combine node so we'll take the red to red green to green blue to blue and then instead of using the alpha here we'll go from the alpha of our sample texture into our combined node instead there we go and we can then go from our combine node into the add down here so just a tiny extra step or we're really doing here is just making sure to remove all the color around our player by multiplying it with our alpha and then making sure our alpha still stays the same throughout this step but the result of this is that if we go ahead and save our acid and now go into unity we can see that our outline is now completely even so it's not going to be influenced by how our sprite sheet is actually laid out and that's actually it for our outline we can now go ahead and choose a color that we think looks nice we can of course play around with the intensity and if we go ahead and hit play we can move our character around and the outline is going to follow all of the animations awesome that's pretty much it for this video if you enjoyed it make sure to subscribe and bring that notification bell so you don't miss the next one also don't forget to check out invidious studio if you want to optimize your creative work flow and speed up your processes simply click the link in the description to check out invidious line of products on that thanks for watching and I will see you in the next video thanks of the awesome patreon supporters who donated in March and especially thanks to Villa Vatanen Lost violence law barber presser Murphy Leela set Nobby ninja gym shoe pop jazz Daniel - sonic dandy Sam Jacob Sanford magan's wander art no kirisaki Gregory Pierce my cooker bub the mighty Zeus oven Cooper as in the fierce Erasmus v8 kaya is mother Kusa and serious wall you guys Rock

Channel: Brackeys

Views: 279,210

Keywords: brackeys, unity, unity3d, model, models, material, materials, beginner, easy, how, to, howto, learn, tutorial, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, 2d, shader, graph, outline, 2d outline, stroke, around, sprite, sprites, select, selection

Id: MqpyXhBIRSw

Length: 17min 41sec (1061 seconds)

Published: Sun May 03 2020