Pixelate Effect - Shader Graph Tutorial

in this video we're going to make a pixelated shader in shadowgraph we're going to pixelate our sprite and easily animate it through code let's begin [Music] hello and welcome I'm your code monkey and this channel is all about helping you will learn how to make your own games with in-depth tutorials made by a professional indie game developer so if you find the video helpful consider subscribing okay so this what we want to make over here is my character I'm looking perfectly normal now by pressing a button and there you go my character becomes completely pixelated so the sprite is now made up of very blocky pixels and by pressing another button there you go we can animate the pixelate amount and now it goes back to normal so click pixelated and back to normal here is the shader inspector where you can see our pixelated amount so at zero the sprite has no pixelation so it looks perfectly normal and as we increase it becomes more and more pixelated so by just dragging the slider we can make it more or less pixelated alright so this is our goal let's get to it ok here we are in our empty scene let's begin by making our shader so we simply going to create a new shader go into the 2d renderer and make a sprite McGrath let's call this our pixel a trailer alright so here we are in shooter graph and we have our sprite light master node now for starters we need a texture so let's make a new property of type texture TD and we're going to call this our main text okay here it is with the reference underscore main text this is the exact name you need to use for the primary texture now we drag the texture onto our board and we need to sample it so we get a sample node and we just pass in the RGB onto the color node and you're right click and select the quad okay there's our basic texture so let's test it out go up here to save it and now we make a new material here we have our material and we just select in here onto shader graphs and select our pixelated shader alright there it is with our texture selected so let's test if there's a character I'm working perfectly normal alright so far so good now let's make our pixelated shader now in order to do that what we need to do is play around with the UV values so here on the sample texture now you can see that it takes a UV input and we can also create a node simply giving so this homes ruv and as you can see by the colors the X&Y are constantly increasing so for example we can use the preview node in order to easily see the values so the preview node which takes an input and then shows it in here what it's receiving so before that we can add a split node in order to split our rgba into separate and then in here you can see the red going from black to white so from 0 to 1 then you can see the green going from down to up so the R is increasing along the x-axis and DG along the y-axis and these are all normalized values so this is 0 and this is 1 now if we just pass our basic UV onto the UV node there you go nothing happens since it's receiving perfectly normal movies so before we pass it in there we're going to modify something in here now in order to have our pixelated effect what we're going to do is make sure that this gradient isn't perfectly smooth but rather it has very discrete values and we're going to do that is by multiplying then foreing and the vine okay so let's see how we do that first we go up here and create a new vector one which is essentially a fault and we're going to call this our pixel pixelated amount okay so here we have our property let's drag it onto the board all right and now here the first thing we're going to do is take our UV and multiply it by this pixelated amount so we make a multiply node we multiply this one onto this one and now for example we can use the preview in order to see what it's doing so we put the preview in there and let's look at the R and there you go so right now it's falling black because we're multiplying by zero but let's try multiplying by 10 and there you go right now it's a lot more intense since again pure white represents 1 so all the values above 1 are going to show as white so by doing this essentially we made it go from 0 to 10 so after we multiply then we can start getting some jagged values by utilizing a floor node so for in case you don't know it's a simple mathematical operation it essentially discards the decimal values so for example 1.7 becomes just 1 so first we multiply everything by 10 then we take this output and we for all of it and there you go right now you can already see the discrete values and then let's put the output into split so we can preview it and just like that you can already kind of see the effect so over here we have an area that is full-on zero and over here an area that is fawn above one so in here we already have a bunch of discrete values going from over here we have zero then here we have one and two and three and so on but we can't see it since in here we only see normalized values so after we multiply and we for it then we can simply divide it in order to go back to a zero to one scale so we add a divine node and we're going to divide this output by the same as our pixelated amount and just like that you can already see the UV having some very distinct segments and if we pass it on to our preview node yep there you go exam like that so essentially we are splitting our UV node into ten different segments and now if we pass this along into the UV node and there you go you can already see the effect now obviously ten is way too small so let's increase it by quite a bit and if I put out a hundred yep there you go the shape is visible but it is indeed pixelated all right awesome so let's test it out just like this and yep there's our character and looking very pixelated great all right now let's make the pixel later mounted slider so we can easily change it so here we just go into our properties and change the mode from default into a slider set the minimum at zero and maximum let's say at 200 okay let's see okay here it is with our inspector so if I increase a slider yep there you go unless pixelated and I decrease and there you go you can see the nice effect all right awesome now the name should probably be backwards meaning when pixelated amount is at zero it should not be pixelated at all and when at maximum it should be fully pixelated also the value really should be normalized so just going from zero to one so let's do both of those so here in our shader let's define a constant for our max pixelated amount so we do a vector one and let's put that 200 now you could also expose this if you want it but in this case making it a local constant won't do just fine and now on the pixel and amount let's make it go from zero just to one so let's defaulter at 0.5 and now before we do any of this we first multiply our pixelated amount by our constant so this one by this one yep and now it's this output that we use both here and then on our divide note yep all right so this should be working with normalized families now in order to flip it over here we can add a 1 minus node so this one does exactly as it sounds like it takes 1 minus a certain value so we take our pixel in amount and we do a 1 minus node and then we apply it to our multiplication any of just like that so now for here I'm pixel in amount we can go from 0 all the way to 1 and yep just like that so let's see okay here we are with our character and our pixelated amount slider as you can see it goes from 0 all the way to 1 so at 0 we have almost no pixelation and if we move it past 1 there you go it becomes insanely pixelated so just like this we have a nice leather working with enormous own right awesome now over here on 0 you can still see some pixelation the reason for that is because even when we set it to 0 we are using our constants so in this case just 200 samples so one way to solve this would be to simply increase this to a very large number so that would solve it but it wouldn't really be very pretty so another approach we can take is to add some nice logic so here in our shader let's do a test to see if the pixelated amount is 0 so in order to do a simple if we can add a compare node so we do a comparison between our pixelated amount and 0 so this one outputs a boolean and then we can also create a branch node so this one as you can see takes a boolean and then has a true and false which comes out here on the output so this is essentially an if-else so if the boolean over here is true it will return the true if it's false it on return the false so when this one is true it means that the pixilated amount is 0 and we do not want to pixel it so when it is true we want to output the original UV so this one in here and when it is false we want to output the pixilated UV which is this one in here so now we move it all the way in here ok so that's it then we take the output from this branch and we pass it on to the UV and yep just like this so here we're using two very nice nodes to work with Bali logic all right this should be working let's test okay so here we are and let's drag the slider all the way down to zero any up there you go with zero it has absolutely no pixelation whatsoever it is receiving the exact perfect original UV and as I increase just a tiny bit there yo pixelation becomes visible so at zero no pixelation as soon as i increase the effect gets a point right awesome so now when we have zero we have a perfect sprite now let's see how we can animate this valley to play around and over here I have this script as you can see it's extremely tiny only 30 lines long and what we have is a material reference for our material and then on keypress we are setting a target pixelated amount so here on let's put a maximum of 0.7 so when we press T we're going to set the pixel amount to alert on to towards 0.7 and when we press the Y it will go back to zero which is essentially no pixelation so here we're just playing around with these twofold values and nor to a point to our material this is what we do we go into the material we call set float we pass in the reference name and then we set our float amount so there is a very simple script let's see okay so here we are in yep there's our character looking completely normal and I press this button and there you go it becomes completely pixelated with a nice animation and now I press this button and there you go it goes back to normal so press pixelate prax and back to normal so here we have our nice pixelated effect being animated through a nice script and again here it is in sheet graph and we're doing is playing around with the UV and doing some simple math in order to get some fixed value increments and with that we get some nice pocket pixels so here is the effect again and as you can see it looks great as always you can download the project files in each choice from ent code monkey comm subscribe to the channel for more ent tutorials post any questions you have in the comments and I'll see you next time [Music]

Channel: Code Monkey

Views: 31,144

Keywords: unity pixel shader, unity pixelate shader, unity pixelated image effect, unity pixelated, code monkey, brackeys, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity, game development, game dev, unity shader graph 2d, unity shader graph, unity 2d shader graph, unity 2d shaders, shader graph, unity shader graph tutorial, unity shader graph tutorial 2019, unity shader graph sprite, unity shader tutorial, shaders, shader

Id: siiqnXA156Y

Length: 11min 6sec (666 seconds)

Published: Wed Jan 01 2020