I Spent Way Too Long Making This Pixel Art Shader!

I finally figured out how to make a goodlooking pixel art Shader with shadows we're going to talk about it right now so this is what I've created I'll go ahead and show you some of the Inspirations that I've used to create this uh and then quickly go over the Shader code which I will put in the description so that you can check it out I came across this Shader on a YouTube video that I will also link it is a Shader that uses a height map to generate these islands and it uses the cursor position as the sun Direction it's pretty cool and does exactly what I need in the sense that it uses a flat image to generate Shadows against a 3D object so I adapted it to this so if we open up our gun Sprite here first let's look at it without the shaders turned on it's pretty basic just a flat image turn them on you get the Shadows you get the mission all that kind of stuff we'll go through the different inputs here you have an X frame and a y frame these tell it what frame of the sheet we're on so it's the x coordinate and the y coordinate then how many frames on each axis we have so 6x6 the sun's position so as we move it around Shadow changes uh and you can set this programmatically the glow color so I can change this to change the color of the glow in the middle modulate color which modulates the color of the entire thing because when you're using a custom Shader the modulate here does not work so then you have the height map which you can see here and the emission texture which you can see here is just the section on each frame and then that's it if we then go into our Shader editor we'll quickly freeze through this here's where it sets up everything this is the original GI height code from that Shader we looked at a second ago online but I realized that some of this is not necessary for what I'm trying to do so I simplified it down to this the vertex starts out by adjusting the area of the Sprite that we're using so first of all we have the vertex here I know it's the last thing but just bear with me we're setting the vertex to be four times the size that means is we're taking the Sprite and we're actually extending its bounds to be four times larger the important part about that is it means that our shadow can actually go outside the bounds of what the texture would normally allow but if you just multiply the vertex by four you just grow the whole picture what you need to do is keep the picture the same but extend the bounds outward so you multiply the UV by four in the X and Y direction to kind of explain this the vertex is on a scale of 0 to 1 and it's the size of the mesh or the uh object that you are painting this texture onto UV is 0 to one in both directions but it is where on the coordinate plane of the actual Sprite you are getting stuff from and so what you have to do is adjust the UV to get just the portion of the picture you want and make it the si side you want so what we do we calculate the frame size by getting the number of frames on each axis and dividing by one in this case it's 1 16 for the frame size uh so1 6666666 uh and then you have that times what frame we're on and then you add or you subtract a quarter in each Direction because by default this will put it in the top left corner and so you subtract one qu then we have the fragment so the fragment function is the function that actually processes getting the color of each pixel so we have our UV that we edited up here in the vertex we're getting the height of the pixel at that using this texture the brightness determines how high it is black is as low as possible white is as high as possible and everything in between the step size is determined by this and that just is for Ray casting towards the sun we set up some information for the sun if you see sections with these uh if if else what's what that is doing is making it so that if we are outside the bounds we don't consider the height but we'll talk about a few more of these we set up our in Shadow system which is basically what percent in the shadow it is if that makes sense then we start to loop we're going to get the height at the current pixel which will just be the same as the height that we already set within P but that isn't super important at the moment we're then going to compare the two right now they'll actually just be the same height so it doesn't matter it's going to skip it if H is higher than p on the next loop we're actually going to set in Shadow based on that however you see here we're checking if we are within the frame of the texture so what we want we want our shadow to be able to extend outward so we don't check that when we are doing that up here what we don't want is to have the height map outside of our current image affect the shadow in here if we're outside the current frame we set the shadow to zero cuz we don't want to Shadow if P if the height of the pixel we're currently on so let's say it's the pixel if the height we're detecting is one nothing will ever be able to cast a shadow on it so we just skip here is where we set P again we get the step Direction multiply it by the max step size and we determine how far to move by saying what is the difference between these two multiply by this and basically that's saying okay H is still lower than p but we're it's getting closer so we're going to take smaller steps because that likely means there's a slope that we're getting closer to here we are doing the emission textures so the way this works is there is a white pixel where you want emissions to happen at and we're basically adding the color onto that white giving us a color value higher than one on multiple channels which means that HDR detects it as glowing and that is what we see right here we'll look at that more in a second so we're taking the emission color which comes from the emission texture we're multiplying it with the glow color and adding it to the color so it all layers then we have our normal Shadows which are calculated via normal map which we have up here in our normal map but we can view it right here which one if you don't know how normal Maps work look down here real quick this is the color of flat this is the color of slanting more and more upward more and more left more and more down more and more right and everything in between so if you kind of look at this you can see oh that's okay yeah that's the direction each of these are facing that's how normal map M works it's basically telling the lights hey this is a flat surface but it actually faces this way so bounce this way then we're checking if we're outside the frame again because we don't want the normal map to show up outside the frame down here we're setting up our sign distance field system so sign distance Fields use light occluders to determine a distance from an object so we've cre I've created this triangle shape as you can see the shadow actually Fades and it's because we're multiplying by the distance from this shape there you go uh I'm going to have to adjust how this works because right now this really only works because we're we have the sun pointed in the same direction at all times then we have to actually use the shadow we're going to adjust in Shadow based on the side distance field information that we just calculated then we're going to multiply by the color shadow brightness and color white to adjust the actual color of this so if you notice this is slightly transparent so we're actually just layering the Shadow on top of the color I think if we get rid of this you'll see yeah itjust layers right on top of it you can also adjust the color by I make this all point4 yeah so it's a lot darker but you can just do that and it will assume that they're all the same cool if the color is mostly transparent we're really comparing to try and get it to say hey this is completely transparent however matching against zero with floats is not a good idea but we're going to set the shadow color to be a flat color then if Shadow color is close to zero we're going to go ahead and clamp it to zero on transparency that way we don't have like weird artifacting at the edges then we mix all those colors together we're going to add in the modulate color if necessary and then we actually can probably just remove that now yeah we mix in the modulate color which if it's set to White does nothing so that's that's the entire thing if we come over here to testing you'll see what this looks like with a viewport setup uh we can also turn off the directional light we can turn off the glow it's going to better look at just the pixel art so if you don't know sub view ports can be used to clamp everything to being exact pixels which is why even the shadow that is not pixel art as you can see is now clamped being like that we'll save this real quick there we go and then we can turn this back on and there we go yeah so that's pretty much the whole thing uh like I said I'll put the Shader code in the comments I will link to that video that I got inspiration from oh and keep an eye out for an announcement on some stuff coming up some game related stuff I'll have a great day check out this video see you in the next stream

Channel: OctagonalSoftware

Views: 11,858

Keywords: pixel art, shaders, godot, shadows, flat

Id: zi3IvZWvhB4

Length: 12min 33sec (753 seconds)

Published: Sun Feb 25 2024