Normal Maps for Pixel Art

hi everyone and welcome to my tutorial on creating normal maps for pixel art first a quick explanation of the different kinds of images we can use in game graphics first we have a color map this is just a normal color image like a photograph then we have an albedo map this is a color image without any lighting so no shadows or highlights then we have normal maps normal maps are images where each pixel represents a surface direction then we have height maps sometimes called depth maps these are images where each pixel represents a height and then we have specular Maps specular maps are images defining how shiny each pixel is there are many other image formats like occlusion maps emission metalness roughness etc but we won't be looking at those now normal Maps main use in games is for affecting the way an object is lit to fake surface details although primarily used in 3d games they can also be used in 2d games to simulate 3d surfaces bear in mind that normal maps are best used in games where you have dynamic moving lights but can be used without them there are five main methods that I know of for creating normal maps one converting a height map into a normal map to processing several images lit from different directions free generating from shape for hand drawing the normal map and five baking them from a free D program I'll go over them briefly now so we'll start with converting a height map into a normal map there are several programs that will generate a normal map from a height map such as X normal crazy bump the excellent materialize just to name a few all of which work very well for LA textures but these conversions don't work well at all for pixel art to understand why let's see how this conversion works here we see a little 4 pixel slice through our apple stalk we have the color pixels the height pixels and what we want are normal pixels to look like in the height map each pixel represents a height and in our normal map each pixel represents a surface angle let's have a little think about one of these pixels this red pixel here so here we can see that pixels color its height value and what we want our normal value to look like now hopefully you can see here there is no way we can turn this single height value into anang and angle we have no way of knowing what angle this pixel is meant to be the color doesn't tell us anything either so how do these conversion programs take this height map pixel and convert it into a normal pixel all these programs can do is guess based upon the neighboring pixels what the normals might be for large structures this actually works quite well but when you have fine detail like that you get in pixel art it tends to make smooth blobby normals also it's worth mentioning that it's actually quite difficult to draw depth Maps accurately especially when it comes to slopes and curves there is another process that I strongly recommend against using and that's generating a height map from a color map this depending on the image is a really bad idea this is because in general the color of the pixels in an image has nothing to do with a height look at this checkered ball example when we generate normal map from this image we get this result but if this is meant to be a sphere what we really wanted is this result so I'll show the process briefly I'll be using this little test pixel art to demonstrate the process it's got like a blob of rocky blobs let's say some kind of metal grille a crystal shape and maybe some kind of space helmet so for the height map method we want to draw pixels for every pixel in the image and we want to use brighter pixels to represent higher pixels in the height map so you will end up with an image something like this if you wondered what I was talking about when saying that drawing slopes and curves was difficult in a height map getting these colors on this crystal face to be the right angle is really kind of guesswork and quite difficult to get right and here's the result of sending that height map into one of those programs to convert you can see that the blobby rocks have come out quite well but the vent and the crystal are not very well defined and a bit soft and blobby looking and it's had a real problem trying to do that space helmet bubble next we'll have a look using several lit images to create a normal map if you take your pixel image and draw four different images that simulate the pixels being lit from the top the bottom and the left and the right you can use that to create a normal map here are the four images I drew for that particular pixel art from the top from the bottom from the left and the right you can see that for example this crystal face is lit up from the left hand side but not from the right top or bottom as you can imagine this is quite a time-consuming operation and again some of these can be quite difficult to draw there is some pay for software that will do this process for you automatically but I thought it would be nice to show you doing it in the free program creature so I have my four images loaded in and I also have a little normal map reference images I created in blender just for a little bit more information about how a normal map works if we go to the channels we can have a look at the red and green Channel separately if we look at the red Channel the red Channel stores the horizontal angle information so if we look at let's say the circle on the right it's bright white and white represents an angle pointing directly to the right and black as we see on the other side represents the angle pointing directly to the left similarly on the green channel this represents vertical information so on a top of our circle we have white which represents a angle pointing straight up and black at the bottom of it is an angle pointing straight down so let's manually combine these four images into one normal map underneath our top image I'm going to create a new layer and I'm going to fill this with a very specific color the color is red 128 green 128 and blue 255 this represents a flat surface in a normal map with no angle so I'm just going to fill with foreground color and if I hide this top layer there's our starting point then for this top image we need to adjust the brightness so that the black is middle gray to do this we'll use a levels adjustment and take our output levels up to 128 there we go next let's take our bottom image select it all copy it and paste it on top of our top image so again we'll adjust this layers levels so that the lower output level is 128 and then for the underneath we need to invert this layer then just change this layer to overlay and we have our vertical representation I'm going to flatten this layer down and move on to the horizontal information so we'll find our left image and copy that on top of our top image so again we'll adjust the levels 228 and as this is from the left we all need to invert it then we get our right image copy it paste it on top adjust its levels and change its blending mode to overlay and we can flatten that down as well so now we have our base flat normal a horizontal and vertical so if I just disable that we go back to the vertical layer and now we need to change the blending mode of this layer to copy green green being vertical in a normal map then we'll rename our horizontal layer and change this to copy red there we go we've made a normal map as you can see this is a much cleaner image than our height map conversion although it did take quite a bit of work to make next we'll have a very quick look at generating normal maps from the shape of a sprite using the sprites alpha this is a process that uses this shape of the sprite to guess the internal normal map shape it tends to make very very babi shapes so isn't really that appropriate for pixel art but for completeness sake I thought I'd just quickly show you it here again in creature so I've got a little blobby shape I want to make a normal map for and we'll be using a special d'emic filter for this so we'll start G make and here it is already selected it's called illuminate 2d shape and the settings that you need to set this to our inputs type of single opaque shapes / transparency output type normal map set the guide color to black and then you can just tweak these settings to get the kind of shape you want like if I was to increase the bump map you get a much stronger bump map or you can smooth it out by increasing this movement but if you do it too much you'll lose smaller shapes in fact that's still too smooth let's move that down a bit more there we go again I supply okay and we created a normal map so far the other processes I've mentioned don't give us a great deal of control over each pixel of the finished normal map drawing the normal map by hand on the other hand gives us total control over each pixel just like drawing the colors of the pixel art you can use any paint program to make them and the process is actually quite simple all you do is you have a reference image like this one here which I'll provide and the link will be in the description and you use that to sample the colors for the correct direction of each pixel you want so for our little piece of test pixel art here I'll create a new layer and then for the pixel I'm choosing to paint in the normal map I'll choose the correct color from the reference image to fill in that pixel as you can see this isn't too bad a process think I missed that pixel there that's better there we go there's a little space helmet done and after a few more minutes there's a little crystal and our little plate done notice I didn't do the blobby rock things it's just not the best process to use for that kind of organic brakesh ape so I'll leave it for these three parts one thing to know when hand drawing normal maps like this is that you shouldn't use any kind of image processing like blur as they won't respect the normal length and they'll get corrupted also don't be tempted to scale or rotate any parts of the normal map as it will corrupt the normal direction this I think is one of the better ways to create normal maps but again it's still quite time-consuming the final way I'll show you how to create normal maps is using a free D program like blender this is the most accurate way I know of creating normal maps and will produce the best results but it's also the most time consuming it's accurate because it's the only method where you're not guessing the surface angles as you'll be making the surface angle correctly in the free D program in this example we have our image loaded onto a 3d model if I change to a solid view you can see that I've actually modeled the shape of all the pixels in the free D model then all you need to do is use traditional 3d baking to create the normal map from this here's the result I get from blender baking very good the last thing I'd like to show you is the fact that you can combine several of these different techniques together I often find that is the best way to work and certain aspects I'll do hand-painted and other I may use the height map or the free D baking technique combining these two images together is easy in this case because these parts of the normal map don't overlap so doing it in a standard paint package is easy just mask out one area and paste it into the other if on the other hand you have two normal maps that you want to combine which overlap like these two images you'll have to use a program to combine them I use a program I created myself which I'll give away for free link should be in the description or you can find other ones online with this program I press load on image 1 and load normal map 2 it has a button to check for errors in the normal map you can see that these two do have small amounts of errors and to correct those you just click the normalize button to put it on that one and that one if I now show errors there are none the errors are just normals that aren't quite actually normal and then there's free methods to combine them but the best one is this angular method if you press that button you'll see it combines the two nicely and then you can just press the save and save out the combined image there we go thanks for watching I hope you found it helpful bye

Channel: ThePassiveAggressor

Views: 53,120

Keywords: NormalMap PixelArt Tutorial

Id: gUkY8ZoRfuQ

Length: 17min 10sec (1030 seconds)

Published: Sat Jan 05 2019

Reddit Comments

[u/LoveCanDmgUrHeart]

Using generated normal maps with Photoshop looks weird on pixel art. I found this tutorial really helpful to create my own normal map

[u/KHWarpax]

Saved to watch when needed. thanks for sharing.