Layer Specific Blur... in 2D!! | Unity Tutorial

in this video we're going to create a blur Shader that we can apply to a Sprite directly then we're going to take the base from that and expand it so that we can drag a Sprite anywhere onto our scene and blur anything on a particular layer behind that Sprite this can be really useful for things like blurring your background elements this is specific to projects that are utilizing the 2D renderer pipeline asset but a lot of the logic in the Shader graphs with minimal changes could easily be applied to 3D as well ready let's go okay so first we're going to create a new Sprite lit Shader graph and I'll call it Sprite blur and in order to get our Sprites showing from our Sprite renderer component we need to create an exposed texture 2D property and call it main text spelled like this exactly and to actually be able to see it we need to sample it out now we can go ahead and drag the rgba into the base color here and let's also drag the alpha into the alpha now basically in order to get our blur effect we're offsetting the Sprite multiple times on the X and Y axis to basically produce multiple copies of the Sprite this produces an effect that looks like a blur so we need to add a tiling and offset node to accomplish this and plug that into our UV node in our sample texture now let's create a vector 2 and plug that into our offset here now in order to keep this Shader graph nice and neat let's click and drag over all of these and convert them into a Shader graph and I'll call it blur Sprite subgraph so to blur this in the most basic form we need to show our image once normally once with the X offset at 1 and at -1 and once with the Y offset at 1 and at minus 1. so we're going to have five of these in total so let's create an exposed float called blur amount and high numbers really don't produce a nice result here so let's make this a slider between 0 and 0.1 now let's go ahead and multiply that by one on the X and plug that output into the X on our Vector 2 node here so that's one okay so let's select all of this and Ctrl D to duplicate it and we need four more of these so we've already offset the X by one so let's do -1 this time great now we need one copy of the actual normal image with no offset so let's just get rid of all this here and that's three now we just need to do -1 and plus one for the Y so plus one here but this time we'll plug that into the Y instead and minus 1 down here and same thing plug this into the Y instead perfect so now we have five copies of our image now we just need to put them back together so for the vector 4 output which is our rgba let's add all of those together awesome now we have to do the same thing with the Alphas and finally let's plug that into our base color and this into the alpha back in our scene let's right click on our Shader here and create a new material doing it this way just ensures that we create a new material with this Shader already applied to it and if we apply that material to our player you'll notice that our player is all kinds of messed up and the reason for that is because we added all of this color data together and so on the parts where they are overlapping they literally add more color on top of what's already there so yes we want to add all of these together but we don't want to add intensity to the colors we want the colors to remain the same so what we need to do is take the final output for our summed rgbas and divide them by five and it's five because we have five of them added up in total okay and we need to do the same with the alpha as well foreign once that's done your character should look perfectly normal again and we can drag this slider around to blur our player awesome if you want to improve the quality of the blur you just add more samples in there you could make this a 2 and add four more samples or you could try one on the X and one on the Y and try different combinations there but keep in mind that more samples equals more performance costs I'm going to leave hours as is so that's a blur Shader for just a singular Sprite now let's create a second Shader to apply blur to the entire environment first let's duplicate our subgraph and I'll call it blur screen subgraph now let's open it up and we need to make two changes to this subgraph first we do not want to use main text we're going to use what's called camera sorting layer texture and once that's done let's plug in a screen position node into the UV on the tiling and offset node because we literally want the spray to show what the camera would be seeing behind it so where it's positioned on the screen makes sense so now let's duplicate our Sprite blur Shader and call it screen blur so first let's get rid of all the sub graphs and let's get rid of all the main texts and let's create a new property called camera sorting layer texture and again this needs to be spelled this way exactly because this performs a special function in unity so it looks for this particular string also very important make sure it is not exposed now add in our blur screen subgraphs five of them and plug in those textures we just created now we can re-hook up the vector two nodes and finally re-hook up all of the add nodes and I don't want lights to affect this so let's make this a Sprite unlit and one last thing I forgot is we don't need the alpha for this particular Shader so go back into the blur screen sub graph get rid of this connection here and highlight our output node here and delete the float since we don't need that and finally go back to the screen blur and we can get rid of all these extra add nodes and the divide and Float node all at the end here we don't need to touch anything with the alpha for this Shader so to get this working let's create a nice big Sprite and create a new material using that Shader and apply that material to this Sprite and it's not working just yet first we need to put this object on its own sorting layer so create a new layer called camera sorting layer and apply that layer to this Sprite now we need to find our Universal render pipeline asset and then from there find our 2D renderer asset and go down to this camera sorting layer texture drop down here and change it to default now really it should look like there's nothing there in the scene at all but if you change the blur slider you're able to blur your entire environment using this Sprite now there's one final thing because this is going to blur everything whether you're using an orthographic or perspective camera it's positioned on the z-axis does not matter it's just going to draw everything and blur it which is probably at least in most cases not what we want so we need to add the ability to only blur a specific layer and the best way to do this is with a second camera which triggers me a little bit I really hate having multiple cameras but sometimes for certain effects it is necessary in unity so for mine here I'm just going to apply blur to my background image here by the way real quick if you like the art assets that you see in this game I'm going to leave a link for you to download them in the description below and you can use them in any way you want even commercially they're just our gift to you and I hope you enjoy so first we need to create a layer for what we want to blur and in my case I'm just going to blur the background so let's make sure that our background Sprite is on the background layer now in our main camera open up the culling mask and deselect the background layer and our background should disappear when we do that now we're going to create a new camera as a child of our main camera and I'll call it background cam let's delete the audio listener on this background cam since we only ever want one audio listener in the scene and I'm using perspective cameras so I'm going to set my field of view to be the same on both cameras now the background camera let's change its calling mask to only draw the background layer now if you're using 2D lights like I am everything goes black that's because currently my background camera is rendering on top of my main camera and there are no lights on the background layer so let's add a new light and set its layer as background my background is a tad dark so I'll add one more light just so we can see it a little bit better and now we can see just our background so we need a way to make sure that our main camera is drawn on top of our background camera so go back to our main camera and change its render type to Overlay then in the background camera which is set to base go down to stack and add our main camera here now everything is kind of just back to the way it was before all this camera nonsense but that's just because we didn't change the layer on our screen blur object here once we set that layer properly now you can see it's only blurring the background and there you go I hope you found this video helpful please consider leaving a like if you did and subscribe if you want to see a new tutorial every Thursday also if you want access to all our videos early or get monthly Alpha builds of whatever commercial project we're working on then please consider supporting us on patreon like all of these awesome people I want to give a very special thank you to our Hall of Fame patrons Jacob yondak Xander Kessler Darren perine throbbing wind Fontaine weight and couch as well as our Early Access patrons xyoma and Ken Wade if you choose to support us on patreon you can get early access to all our videos monthly Alpha builds and more

Channel: Sasquatch B Studios

Views: 11,857

Keywords: unity, unity2d, tutorial, unity tutorial, sasquatch b, sasquatch b studios, shadergraph tutorial, unity beginner tutorial, shaders, sprite blur shader, environment blur shader, unity blur shadergraph, unity sprite blur shadergraph, unity blur layer, unity depth of field 2d, unity blur 2d renderer, unity environment blur, unity blur anything within a box, unity 2d dof, unity 2d depth of field, unity 2d blur background, unity 2d blur layer, unity 2d blur tutorial, unity blur

Id: 8-E8Vp0l6wg

Length: 10min 7sec (607 seconds)

Published: Thu Apr 06 2023