2D GLOW & Bloom Effect in Unity

what's going on fellow game developers my name is Muddy wolf and in today's video I'm going to show you how you can add glow to your Sprites and change your scene from this to something like this now you can see there it's a lot glowy you've got a glowing Sprite that's spreading its light across the actual ground the actual Moon has a glow and glare to it so it looks kind of cool and it's just a simple scene but you can already see the different depth you can add to a level with just adding glow to your Sprites so without further Ado let's actually implement this okay guys so we have this simple scene now you can see here we have this uh torch Sprite or this like fiery or fire on a stick Sprite I could really quickly mocked up in a Sprite and a simple Moon Sprite now we could easily make this all have some sort of glow effect by adding in a um a global volume into here so over in a hierarchy let's go to the right and go down to volume and create a global volume and so this uh just reset all of this and we could either select the profile for egg up or just create a new Global profile here and then what we can do is add noforid post-processing um Bloom we want to turn on the threshold and the intensity and put this to sound like one now you can already see the scene has some sort of atmosphere to it now it's actually kind of glowy just rights have some sort of glow to them now this is great and all but it doesn't really it despits themselves aren't glowing and also this torch should really be glowing from the fire outwards and not the whole stick as well so let's add some actual lights to us in so we're going to start with moonlight now what we want to do is go to light go down to a spotlight and you're gonna see our scene actually loses all its color because when you add 2D light to a urp scene um all the lit shaders will then be affected by this light um but you can see here on the right we can actually fix some of this by going into our targeting layers and adding backgrounds and also foreground so selecting all of them too and you can currently see the moon is being affected now that's because our light is currently on our moon but it needs a bit more intensity so let's put this up to about two or even free in terms of its uh intensity there now we can add some more glow from our moon by going to the full umetric setting on the 2D light and turning it on now you're going to probably thinking whoa that's crazy now to fix this insane amount of light you want to turn up the fall off strength now there you go you can see we get this sort of glow you can also see there's like a Halo further out here of where the light is reaching and we can increase this or decrease this with the actual range to change its effect let's put something like free I think this is a nice looking Moon effect adds a lot of depth but currently the rest fasting isn't too lit so let's add a light coming from our torch so let's just go to light and create another Spotlight which is going to come from our torch let's move this up just a little so it's more from our actual light and let's actually select the foreground as well as the default but we don't want to select the background as well because that would also affect our moon and we don't want that now in our scene here we can see it's currently looking let's put this at 0.5 so it's coming from directly in the fire and what we could do here is just up our range I'll probably put this at something like seven which gives it a nice bright um outline and then let's drop the fall off so we're saying about 0.75 to give that nice faded effect inwards now currently in our game this this looks all right but again the light down here should probably be more of a different colors so let's make it more of a yellowy it's already fire color that's coming off this light here um just so it gives it more of a real effect now this is all gray and it's looking all right but there's not much glow to actual Sprites and our actual Sprite here isn't doing anything so I'm going to show you how you can actually add in an emissive uh Shader to this graph so what we want to do is we're going to create a new Shader graph urp and we're going to select a Sprite lit Shader graph and just call this our 2D glow uh texture there double click this to open it up inside side of our inside of Shader graph and let's move this aside now you just want to make sure that it's on Sprite lit and Alpha on the right here and Universal is the active targets then what we want to do is on the left here we want to select this and add in a texture now you want to name this main text exactly like I have here because this if we click this you'll see we'll set its reference to underscore main text and this will automatically pull through the texture of your Sprite without you having to reference it we then want another texture which is actually going to be the emissive texture so we're going to say emission I'm going to call it the emission mask now let's Auto create one more which is going to be the glow effect or glow color let's call it now on the glow color we want to make sure this mode is set to HDR so we can get a nice HD um or sort of glow effect HR as well allow it to actually have some glow so let's go to our main text drag this in our emission mask and our glow color here now what we want to do is we want to take this and pull it into a sample uh texture node so let's just put this in the sample and there you go this will just confirm this texture data into actual sync we can use let's drag this in here and also put this through to a sample texture just like this and bring this here now we want to basically add this and this together to get the actual emissive value we want we also don't want to multiply the color with our mission to get that so let's start off with that let's go in here and let's add a multiply node where we're going to multiply our mission mask with our glow color so this is going to make sure the only anything that glows is the mask we are currently applying now we want to drag our sum this one into an add node and you know for here we can actually apply this to the a note and now we'll multiply our nodes together or add our nodes together to actually combine the two values now finally what we want to do is let's just tidy this up bring this over here bring this back and move this over and there's two things you need to do the first thing is we need to actually split this off into um more books we want to get the alpha value separately and apply it to the alpha but then we just want to take the rest of the add node and Pull It in our base color here now what we can do from here is just hit save asset we could stop maximizing this and go back to our scene now to actually use this 2D glow we need to create a texture outfit so let's right click it create a material and we're going to call this our torch glow effect now on this we want to drag in our torch emission now I'm going to show you my two Sprites here um which is going to look blurry because of the filtering but you can see here we have a pixel art um torch and we also have a pixel art emissions now this is just the pixels that are a part of the fire that I've set to white or a gray color which will apply the effect the black will not get any glow at all and that's what you need to do you need to take your pixel art or whatever sort of 2D art you're using and basically black out anything that isn't supposed to Glow but what is supposed to Glow you want to make it a lighter white color or any color you want now inside of our torch glow material what we can do is drag in the emission texture and then go to our torch and apply this new torch glow in the Sprite renderers material now you can see nothing's really changed here but if we start messing around with the actual HDR glow here you can see we go into this mode and we up the intensity you'll see it's starting to Glow really heavily now this isn't looking 100 too great um because it's just whitening whitening out the uh the actual color so to fix this what we're going to do is just basically turn it to be a red color which is obviously more of the texture here because it's red and yellows and this will fix our issue there and now you can see we actually have a nice glow now we could say it's something like free and go back to our scene or our game View and there you go you can see the actual glow is happening there and it's looking real good you're getting a much better glow and it's only coming from the actual source of the fire and not the actual stick so that's going to be it on today's tutorial on 2D glow it's super simple and really easy to use just make sure you're using unity's urp uh 2D scene and then you're able to add in a 2d Global volume and make sure that's added here you also want to make sure post processing is ticked on otherwise you're going to have this issue here where it's not actually glowing um we just want to turn that on because this will apply the bloom to our um element you also want to go to the output and make sure HDR is actually on now currently it's set to use the render pipeline asset which is fine because that is normally on by default I believe it's in settings and and under the universal RP pipeline here you can see HDR we just need that ticked on for the actual glow to work as well here this allows for the HDR to actually take effect and there you go so that is all you need to do to make 2D glow I hope that helps you out in your Endeavor of making 2D games but thank you all for watching this video don't forget to leave a like smash that subscribe button and I will see you in the next one peace out

Channel: Muddy Wolf

Views: 8,474

Keywords: 2d game dev, game dev, 3d game dev, 3d, 2d, game development, developer, game developer, unity, unity3d, unity 2d

Id: G1x-NA05CeA

Length: 10min 8sec (608 seconds)

Published: Mon Apr 24 2023