Shield Force Field - Shader Graph Tutorial

in this video we're going to make a nice shield force field effect using share graph this is a great effect to indicate that a certain area is protected to either bought the player or bought projectiles you can see it uses an action in the FPS game I made recently let's begin [Music] hello and welcome I'm your code monkey and this channel is all about helping you learn how to make your own games with NF tutorials made by a professional indie game developer so if you find the video helpful consider subscribing ok so the effect we're trying to make here is the one in the FPS game I made in just 5 days if you haven't seen it yet then go check out that video and play the game it's very quick and playable fully in your browser so here I wanted to make something that looked like a shield force field effect that the enemies could shoot through but not a player so this is the effect that I came up with we have a sphere mesh with a material applied the texture is showing some hexagons animated moving upwards the effect has some nice HDR colors with a nice bloom effect and you can see I'm lined with extra bloom constantly scanning over our shield so we can all walk around the shield and even go inside it and the whole thing works great again go play that micro game to see the effect in action so first we're going to make the shader work with a 3d mesh and then we're also going to apply it to a 2d sprite that way we can use it on either 2d or 3d games alright so this is our goal let's get to it so here we are in a basic scene I just have a for any simple character control everything is set for 3d since we're going to start off with a 3d shader now over here in the project files I have the various textures we're going to need there's the base hexagon texture then we have a emission texture to make sure our hexagons glow and finally have a simple gradient texture that we're going to animate so let's start off by creating a new shader make it a PBR graph call this our shield PBR ok here we are in our shooter graph and here we have our PBR masternode now the first thing we need is obviously our texture so we make a new property of texture 2d call it our main text and set the reference to underscore main text this has to be this exact name for the primary texture now let's select default so we have our hexagons as our default now let's drag the texture onto our board and now we need to assemble it so create a new simple texture node drag the texture on there and the output into our albedo and just like that you can see it apply into our sphere preview ok so far so good let's test this out so back in the editor let's make a new sphere so a 3d object just a sphere right there it is we have our nice fear now let's create a brand new material I want our shield and let's set our shooter inside the shade where I've shown PBR and just like that it already has the main texture default texture so now we just apply it into our sphere just like that and just like that we have our sphere with our basic texture added into our world all right now one of the issues that you can already see is we didn't lack of transparency so let's solve that so that's very simple all we need to do is go into the PVR master node click on the gear icon in there and then here we have our surface and switch from opaque into transparent and in our case for the shield we also want it to be to silent so click that one as well all right that you do it let's test can if there is there's the texture applied and now we can go inside and there you go we can view it from the inside so our texture correctly has two sides and it's also transparent you can see it in the hole there alright so far so good now obviously another huge issue is the size of the texture so back in the shooter graph let's resize our texture by going in here and we add a tunneling an offset note we pass this into the UV input and now in here we can modify the tongue so for example let's put it 10/10 and this should make the texture repeat itself but as you can see it's not doing that the reason is on the texture import option so let's go there here on the texture import options we have our texture and we need to go into rap mode and switch it from clamp into repeat as soon as we hit a point there you go there's our texture now repeating itself so let's make sure we apply this to all of our textures so all these two also make them repeat ok now back in the shader graph you can already see our effect correctly working so instead of 10 let's put it 5 5 and we can play around with these values now in order to not have these values hard-code the initiator itself let's make a nice property so we create a new vector to call this the main text styling here lets default it to 5/5 and we can simply drag it into our scene and the put for our telling ok so just like that now let's look at it in game here's the texture and as you can see it is now much smaller and we can some point around in the values over here in the inspector we can similarly modify the main text sound let's put it at 10:10 and just like this it starts to look more like a shield okay so far so good now back in the shadow graph let's just apply our alpha channel so we just connect the alpha directly in there let's see and yep there's our shield now looking more and more like a shield ok so far so good now let's deal with our emission so for that let's add our texture so we create a new texture TD call this our mission text okay there's the emission just regular in there and simple it like we did with the other one then let's apply the exact same telling so use down and yep just like that and now we take this and drag it straight on to the emission field okay so just like this let's test I just like that we have our shield with a nice emission texture applied onto it right so far so good now let's see how we can animate our shield so the way we're going to do it is by using this same telling an offset node we're essentially going to increase the offset over time and that's how we move our texture we want to increase it over time so for that we create a time node and we want to use this time value in here however this is a fault whereas this requires a vector too so we need to make a combined node and now here it's a bit confusing since the combine now chose labels for colors but it works the same for vectors so here the R equals the X and the G equals the Y so we pass in the time onto the gene saints who want to move it on the Y and we pass in the ERG which is the XY and put it on the offset and there you go just like that d texture is already nicely animated however we have two issues first of all it's moving too fast and secondly it's going down instead of up so let's on the direction which is very simple in here before we create our vector we just had a negate node and we negate our time value and pass there and there you go now the texture is moving up okay and now for the spin let's go up here to make a new vector one come with our shield spin and let's default it to point five now we can drag it onto our board and all we really need is to have a multiply node where we multiply the speed by the time before negating and going forward all right so let's just drag this and put it like that just like that okay great so just like that our speed knob looks better by being a bit slower and now we can also switch this from mode put it on a slider and drag it from zero to two this way we can easily modify this filner to make our shield faster or slower so let's test this out and here we are and yep there you go our shield is now nicely animated going up and here on the inspector we can see our shield speed and we can simply drag it to make it go much slower there you go very slow or very fast so there you go our effect is nicely customisable so we have successfully animated our shield awesome now here we have some basic emission we want to be able to tint it in different colors and play around with the intensity so back in our shadow graph let's make a new property of type color and let's call this the emission color let's switch the modes from default into HDR and here let's pick a nice blue okay so all we need is to take our color in here and then we make a multiply node and we multiply this color by our emission texture and we pass the output onto the emission on the master so just like that alright let's see it in game and yep there it is in game our shield with a very nice intense glow effect and here in the inspector we can play around with color so for example now we have a blue now make it a darker blue make it lighter make it a lot more intense way too intense and we can switch it to commerce and let's make it a more red more green and so on and so forth so there you go another nice customization option okay so our effect is coming along great we already have our shield working very nice now let's use the gradient texture to add an extra effect on top so back in our shield we're first we need the texture so we create a new texture 2d for our gradient okay so let's drag the texture in here and as always we first sample it so sample this texture yep there's our gradient and now we're going to take this color and add a multiply node and we're going to multiply our gradient by the output of our emission so there it is you can see the effect and now we can add this one on top of our emission in order to get a bit extra so here with a add node you can already see the effect and then we pass all this into the emission on the Ambassador and okay there it is now here we can add a color on top of our gradient like we did for the emission so let's make a new color here and let's put it at almost white and drag it in there okay and all we do is add a multiply node so multiply our extra color by that one and then we pass that one in there and there you go now we have a more intense effect okay so let's see this in game and if there is there is a shield with the gradient effects on top now it's currently being applied to the entire texture so it's a bit hard to see so let's deal with the tiling as well as animated now in order to do that we're going to do pretty much the same thing that we did in here so we need a tunneling and offset node and first to animate it we pass in the same vector that we used in there so we pass it on the offset and there you go you can already see the gradient constantly going up now like this gradient is going at the exact same speed as our main texture we want to make it a bit faster so we can simply make a vector one and first we multiply these and like this we have it going a bit faster so that's good now we also want to tell it more than just once so for that let's make it properly after I vector one call it the gradient child why let's see from two to four and now we just have to point into our telling so we drag it in here we'll create a new combine node and we want to tell it on the Y so we pass in the g and passing the RG in there and just like that yep you can see our nice gradient being tiled several times on the Y alright so let's see how our effect isn't looking right now and you here we are with our nice field effect as you can see we have the nice gradient going a bit faster than the actual shield hexagon and in-home effect looks pretty great here in the inspector we have all the families that we can play around with so we can make it move faster or slower and we can make the gradient tile more or less so just like that we get a bunch more rings on our gradient and we also can play around with colors so for the x-ray emission for example let's try putting it more of a green more of a red yellow and so on alright so here we have a great force field shield effect and we can also go inside and yep everything looks pretty nice alright now let's finally take this and make it into a spray chater ok so making this sprite is very simple let's simply duplicate our graph come with our shield sprite you know here is our complete nice shadow graph and all we need to do is modify our mess or node so we can go into master and in sets select the sprite lid so here are both of our master notes now we right-click on this one called set active and now we can get rid of the master node now here one of the main differences is that the sprite master does not have an emission but rather the emission is baked into the color so we just had a multiply node in order to multiply our emission by our base color and we pass that into the cone and let's right-click and make this into a quad so here on the quad you can already see the exact same effect however when working with sprites it makes more sense to have a spray cheap rather than a machine so let's go into our min tax which is our hexagon texture and we're going to rename this from min tax into shield text and now that we have renamed that now we can add a new texture and this one we're going to call the main text and a 4d foam let's select a circle okay so now we drag our texture in here we sample it and now we just need to multiply this by our output from there so we multiply our circle by our output in the colors in here and we drag them out into the color and there you go now we have our nice spreadsheet now one more thing we can do which is nice is applying a nice alpha so just add a new vector one comma T alpha we just multiply the Alpha by our texture and then we apply it in there and everything is the same all right so that's it let's test okay so here we are in a 2d scene now we simply create a new sprite render and now we need a material to a point to it so we create our material and we select our graphs and our shield sprite and there it is our inspector properly so now we just drag it into our sprite and there it is there's our sprite nicely applicator so here the shield effect essentially works on top of this sprite so we can change the sprite for example let's use this one and there you go there's our nice shield effect so you can play it in game any of here we are in game with our working shield effect working as a sprite so you're in the inspector I can change the sprite and if there it is now I can change the alpha so make it more transparent more visible that's really visible and again we can simply around down to colors like the emission and play around all this and it's a great looking effect so point to different textures and there you go it looks great so just like this we built our great effect we made it work both in 2d and 3d you can see this effect in action in the FPS game I made using unities micro game as a base go check out that video and play the game for yourself it's very quick and fully playable in the browser in there you don't see the shield effect being used on with a nice shield system as always you can download the project found any tony's from unity code monkey comm subscribe to the channel for more unity tutorials post any questions you have in the comments and I'll see you next time [Music]

Channel: Code Monkey

Views: 26,462

Keywords: unity shield shader graph, unity shield, shield shader, force field shader, unity shader graph sprite, force field, unity shader tutorial, unity shader graph tutorial, shader graph, unity shader graph tutorial 2019, unity 2d shader graph, unity shader graph 2d, unity 2d shaders, code monkey, unity shader graph, brackeys, unity tutorial, unity game tutorial, unity 2d tutorial, unity 3d, unity, game development, game dev, shaders, shader, unity shader, unity3d, games

Id: 6AKR4b4C5jo

Length: 16min 4sec (964 seconds)

Published: Tue Nov 19 2019