In this tutorial, I show how to create sharp normal maps for pixel art. Reference Image: drive.google.com/open?id=127i... NormalMapTool: drive.google.com/open?id=1llz...
Amazing tutorial! I have never ever, through hundreds of hours of tutorials, watched such as well put, thought through and no BS tutorial. Thank you for your time.
This is the best tutorial I think I've ever watched. Just, in general. It's so easy to follow along and it leaves you with everything you wanted to know and more without hurting your brain. Thank you for this :)
I wasn't looking for this specific but I was looking for a very sharp way to make normal maps for some scifi armor, and this tutorial apply perfectly, and so does the tool.
This is a good example of small channels sometimes having the best content. For 1 year, I didn't understand how to make normal maps or even how they work and why do they look like complicated polarized glasses, but this video made made me understand everything about normal maps I ever wished and even more!
This is simply *brilliant*, it's so simple but so brilliant :O Three dimensions, three colors channels, then using a color to represent an angle, it's just genius omg
Good video overall! Though I wanted to mention a caveat at 10:32 that creating a normal map through this process requires the Z component to be recalculated. Some of the normal vectors on the rocks are nearly white and normalization would make those vectors "flatter" than what was likely intended.
Have you ever heard of a program called Aseprite? It's a pixel-art focused program that has a built in normal map color picker (it's a little less inclusive than your provided image, but it does have a smooth half sphere option, and a "discrete" polygonal sphere option). It also supports on-canvas alpha picking/sampling! Just thought you might be interested given the pixel art videos recently, and the alpha picking feature video.
Krita has a wonderful Combine Normal Maps layer blend mode. I also made a Blender NodeGroup implementation of the same algorithm. ... it seems you've read that blog entry on combining normal maps, too!
Very interesting. I think I will try and take a 2d sprite and see if I can get this done. There are a few faster ways this can be done in photoshop so once I have the flow down maybe I can do an animation.
Thank you for this incredibly well explained video, it helpt me quite a lot! I hand drew the normalmap, not for pixel art but for a detailed somewhat realistic style. However, I used blending tools as gradients would have been just too clumsy otherwise... I didn't notice any corruption of the normalmap afterwards. Either the problems are too small for me to see or it did work after all?
Thank you for the video, I just downloaded Blender for the first time to try out baking normal maps. I am curious on your overall procedure with Blender. Did you import image as a plane and then manually model each pixel? When importing I get a blurred image rather than a sharp pixel image. Since I am so new to Blender, I will take some time to figure out a solution. If you have or seen some tutorials, that would be a tremendous help. Again thanks for the video, very informative!
If I remember correctly I just made a plane and added the texture, but "image as plane" would certainly help. To stop the blurring you need to disable texture filtering, see here: blender.stackexchange.com/questions/845/how-do-i-disable-texture-filtering
This is very nice, I would have loved seeing example sof how the different results and techniques look under a changing light setup. That way you could have shown the best and worst case scenario for each technique and help us visualize it more clearly. Otherwise great effort, great pacing & editing and very instructive
Thanks, yes with hindsight I should have definitly shown some results, Check out my "Experimenting with Specular Maps for Pixel Art" video get an idea of the kind of results you get.
Hey, this is a super great video! Can you care to list all of those types of textures that you said (and didn't said) in the video? And I mean *all* (even the ones you said as 'etc'). I'm kinda researching about them right now but I can't find a list of them, only on this video. Thanks! But yeah, as I was saying, this is a very comprehensive video about this topic. This was super great.
Thanks, glad you liked it. Other maps include: Emission, Metalness, Roughness, Occlusion, ID Maps, Detail, Translucency, Displacement ( they're only really limited by the renderer/shader your using)
Thanks for the effort to reply! I'm currently trying to make normal maps for my sprites and I'm trying the paint by hand method from your video and it was super helpful to me. Thanks again for the reply, and for the video!
Hi there, I've made my normal map and I now want to test them, do you maybe know of a way to do so easily without a game engine? I want to fully focus on graphics at the moment and I was hoping you'd know of a program to import normals and textures to, and possibly specular/metalness etca, and have my curser be a dynamic light source to check all is well.
I normally use Unity but it does take a little setting up, But Materialize is a good simple program you should be able to use to test them out in (boundingboxsoftware.com/materialize/)
Whew this was an incredibly quick reply! Thanks for that! Anyways, I found a workaround using Godot, it's quite easy to set up, but I'll check out materialize! Thanks! EDIT: do you by any chance know how to set up specular/metalness maps for 2D in Godot? EDIT2: Materialize comes out blurry, I'll mess around a little, but if you know a fix it'd be nice, thanks for all the help so far btw.
So lets say i have my pixel tiles designed (referencing to the dead cells game) now i also have the normal tiles how do i do the programming so the normal tiles are used within the pixel tiles?
Is this possible to do with vector art? For instance can a normal map be made in adobe animate cc which could scale with my base image. Planning to use vector art for my game and have not been able to find any resources regarding normal maps with vector art. It seems if I hand paint similar to your method of picking colors from a reference, then I might be able to build normal maps within a vector based program?
What if instead of setting the blue channel to flat fill during the combining of 4 images, you used the height map itself for representing blueness? After all, blue is representing how the shape is lit perpendicularly, so the convex shapes will be lit more on their flat top rather than near the angled base.
I'm not sure that would work. The colour that I fill the blue channel with represents a normal that points straight up, its then combined with the left and right "colours" to make the final vector. But what you can do is replace the blue channel at the end of this process with other information, like a specular map. Then in a shader you can recalculate the Z component of the normal.
I'm curious if anyone has thoughts.. For an animation of a char running in an angled down view perspective(ie stardew valley, graveyard keeper), I want to create normals for every frame. The problem is that due to the perspective of the camera, light that comes from above the character should barely light the character up because the light is behind the character from our perspective. Programs that generate normals break this perspective by including too many pixels lit from the top. I need the normals to be somewhat consistent due to this being an animation. I've tried painting light from 4 angles on 4 different images, then merging them into a normal map with software, which is great, but it's pretty much impossible to make consistent per frame. Any thoughts on what I could do to accomplish this? Is there software to generate normals on a sprite where I can change the perspective to include very few pixels being lit from the top?
@@ThePassiveAggressor I researched quite a bit more yesterday and found out that Sprite DLight is able to generate normal maps for a sprite sheet(so that helps with the consistency issue), but the key thing is that they have a feature to rotate about the x, y, or z of the normals. I'm pretty sure that means if I rotate it about the x axis, I can get the desired effect of reducing the amount of pixels lit from the top for the whole animation. Still researching for other methods and I'm curious if you have any other thoughts, but this seemed like a decent place to start. I'm surprised by the lack of normal map generating tools tbh - everything is 6 plus years old haha. Great video 👍
By any chance is there a process name or plugin that does the Normalize feature that your program uses. Because this is an insanely useful tool for video game modding and squeezing out additional details in DXT5 compressed normals for Valve games.
Sadly there isn't at the moment, but its something I could probably do if I can find some spare time. What would be the most useful to you do you think? an exe that would take an input and output filename?
The workflow with the tool atm is fine. I tend to just keep it up and load in map 1 then hit normalize and export the result. only thing I could think that would improve workflow is add a drag-and-drop feature and maybe TGA support. But in reality a few extra secs won't kill anyone in my opinion. Now if there was a conversion project that needed to batch edit several normals then I could see how such a feature would be heavily needed. But as for now it works great and has made me more curious on wanting to understand normal maps more
Nice video. Normal map generator can't generate nothing from the colored texture because it's not how it works. It can generate normals from height map..
Only one question left: Isn't pixel art exclusively used in to make 2D graphics? And aren't normal maps exclusively used to make 3D surfaces? In other words, what are pixel art normal maps used for? Can they be used to add a depth effect to 2D retro games like Super Mario Bros?
There's not a Copy Color option for layers in Gimp. What you can do is use Colours/Composition/Decompose & Recompose which let you work on individual RGB channels as grayscale layers. You could alternatively start with a grayscale image and build up the red / green / blue layers then use Colours/Composition/Compose to combine them into a colour image.
So confused. Are we assuming the pixels are going to be on a vertical plane, then? What if the image is meant to be horizontal? Maybe it's distance from a perpendicular point?
Thats a good question, I think its a matter of personal taste, some people like to create each pixel by hand. Out of interest what 3d pixel art software do you mean?
@@ThePassiveAggressor Well, I haven’t really done it myself so I don’t know any of the programs well. I’ve seen people using Crocotile, otherwise I’ve just seen the finished models on twitter! :)
![🔦Реалистичное 2D освещение с помощью карт нормалей [Tutorial] [Unity 3D]](http://i.ytimg.com/vi/J2lzJpAgmyM/mqdefault.jpg)
16:08 That's the biggest and most well-deserved flex I've ever seen. Good video, thanks!
Thanks :) glad you liked it
"To combine normal maps, I made a program which I will give away for free..."
i understand what you mean by this
because he actually gave it away for free
@Mohammad Caleb fucking cancer
@Mohammad Caleb scam lol
@Mohammad Caleb nerd
@Mohammad Caleb shut the fuck up you piece of shit.
Now this is what I call a complete tutorial. Literally no questions left to ask... Impressive!
Very glad you liked it :)
This is the best explanation of normal maps I've seen in a while.
Thanks, very glad you liked it :)
After years this is the first time I actually get the way normal maps can be made by hand! Thanks for this awesome tut!
Your very welcome, glad you found it helpful :)
This is very impressive, I never thought of making texture maps for 2d pixel art before
Glad you liked it :)
This is incredibly useful, thank you!
Your very welcome, glad you found it useful :)
This Is beautiful You explained everything very clearly, I haven't got any questions left!
Great, very glad you liked it :) thanks for the nice comment!
Amazing tutorial! I have never ever, through hundreds of hours of tutorials, watched such as well put, thought through and no BS tutorial. Thank you for your time.
Thanks, very glad you liked it :)
This is the best tutorial I think I've ever watched. Just, in general. It's so easy to follow along and it leaves you with everything you wanted to know and more without hurting your brain. Thank you for this :)
Your very welcome, thanks for the kind words :)
Many thanks for covering this for 2D artists much neglected but important topic with such detail.
Your very welcome, glad you liked it :)
I have some pixel art that I was considering making more interesting by making normal maps for them. This helped a ton. Thank you!
Great! glad it helped :)
Great visualization of what normal map does! So clear!
Thanks, glad you liked it :)
I wasn't looking for this specific but I was looking for a very sharp way to make normal maps for some scifi armor, and this tutorial apply perfectly, and so does the tool.
Great, I'm very glad it was helpful. cheers :)
Also thank you for the NormalMapTool, so intuitive and works perfectly, I use it quite often.
Great to know! wasn't sure if anyone would use it. Thanks :)
This is a good example of small channels sometimes having the best content. For 1 year, I didn't understand how to make normal maps or even how they work and why do they look like complicated polarized glasses, but this video made made me understand everything about normal maps I ever wished and even more!
Thanks for the nice comment, really glad it helped :)
This is simply *brilliant*, it's so simple but so brilliant :O Three dimensions, three colors channels, then using a color to represent an angle, it's just genius omg
Yeah, its really cool isn't it. There are other example of different channels being using for different things too :)
Very useful not only for pixel art, but for any normal map creating in general
Thanks! glad you found it useful :)
This is pure gold! Thanks sir!
Your very welcome :) these kind comment help me know it worth making more.
Thank you very much! This is a resource I've been looking for for a while.
your most welcome, glad you found it useful :)
Thanks mate. Really appreciate you making this!
Your very welcome, glad you liked it :)
Oh damn!!! I've messed around with normal maps before but never quite understood how they work, thank you for this tutorial!
Glad you found it useful :)
good video and thanks for that reference image
Your most welcome, glad you liked it :)
Very clear and nice tutorial!!
Thanks, glad you liked it :)
Amazing video! And Amazing work!
P.S. Your voice is so calm and suitable for teaching.
Thank you very much, glad you liked it :)
Awesome video, super helpful, thanks.
Glad you liked it, cheers :)
Truly thank you, kind sir, thank you so much! really complete and comprehensible, very helpful! thank you again and have a nice day
Thank you for the lovely comment, hope you have a great day too :)
Just glorious.
Thank you very much, glad you liked it :)
OMG, the best normal map explanation I've ever seen... working on TechArtist position for 2 years.
Thanks for the nice comment, glad you liked it :)
With the release of Minecraft RTX this just became extremely relevant!
oh interesting, now if only I had an RTX card :D
Good video overall! Though I wanted to mention a caveat at 10:32 that creating a normal map through this process requires the Z component to be recalculated. Some of the normal vectors on the rocks are nearly white and normalization would make those vectors "flatter" than what was likely intended.
This is a very good point, you'd want to send the result of that method through a re-normalising tool. thanks for the good comment :)
Perfect video mah dude really well done :D
Thanks, glad you liked it :)
@@ThePassiveAggressor No problem, again huge thanks for this
Have you ever heard of a program called Aseprite? It's a pixel-art focused program that has a built in normal map color picker (it's a little less inclusive than your provided image, but it does have a smooth half sphere option, and a "discrete" polygonal sphere option). It also supports on-canvas alpha picking/sampling! Just thought you might be interested given the pixel art videos recently, and the alpha picking feature video.
Aseprite is my favorite pixel art tool, I even helped a little with its development :) Cheers.
Krita has a wonderful Combine Normal Maps layer blend mode. I also made a Blender NodeGroup implementation of the same algorithm.
... it seems you've read that blog entry on combining normal maps, too!
oh, that's very interesting, thanks for the tip :)
Well done, thank you 🙏
Your very welcome, glad you liked it :)
You are awesome. Thank you!
Thank you for the lovely comment :)
Very helpful, thank you!
Thanks, glad you liked it :)
such a good video... thank you
Your very welcome, glad you liked it :)
Very interesting. I think I will try and take a 2d sprite and see if I can get this done. There are a few faster ways this can be done in photoshop so once I have the flow down maybe I can do an animation.
Cool, good luck :)
great explanation
Thanks :)
Great video
Thanks :)
Thank you for this incredibly well explained video, it helpt me quite a lot! I hand drew the normalmap, not for pixel art but for a detailed somewhat realistic style. However, I used blending tools as gradients would have been just too clumsy otherwise... I didn't notice any corruption of the normalmap afterwards. Either the problems are too small for me to see or it did work after all?
Thanks Jasmin, that sounds good to me! You should be able to tell if your normal map works once you put it ingame (or render it).
Thank you for the video, I just downloaded Blender for the first time to try out baking normal maps.
I am curious on your overall procedure with Blender.
Did you import image as a plane and then manually model each pixel?
When importing I get a blurred image rather than a sharp pixel image.
Since I am so new to Blender, I will take some time to figure out a solution. If you have or seen some tutorials, that would be a tremendous help.
Again thanks for the video, very informative!
If I remember correctly I just made a plane and added the texture, but "image as plane" would certainly help. To stop the blurring you need to disable texture filtering, see here: blender.stackexchange.com/questions/845/how-do-i-disable-texture-filtering
Thank you!
Your most welcome :)
Finaly i found this!
Glad you did :)
This is very nice, I would have loved seeing example sof how the different results and techniques look under a changing light setup.
That way you could have shown the best and worst case scenario for each technique and help us visualize it more clearly.
Otherwise great effort, great pacing & editing and very instructive
Thanks, yes that's a good point. This video shows it a little: ua-cam.com/video/EA_A8qhTh-8/v-deo.html
@@ThePassiveAggressor thanks, looks really good
Thanks!!!
your very welcome :)
awesome
Thanks :)
Great tutorial. Would have been nice to show the 3d result of the various methods.
Thanks, yes with hindsight I should have definitly shown some results, Check out my "Experimenting with Specular Maps for Pixel Art" video get an idea of the kind of results you get.
good job with this video
Thanks, glad you liked it
thanks x
your very welcome :)
To the OP: I’m thinking Z-Brush could be really useful too depending on the subject
I wouldn't be surprised, I don't own zbrush but from what I know its got good depth map tools.
At least in the top 20 tutorials in youtube history.
That's very kind, thank you, glad you liked it :)
What would be the photoshop equivalent for the "Copy Green" and "Copy Red" blend modes? or would it just be best to do this in Krita?
Its been a while since I used photoshop but you should be able to do it. you could just copy the green/blue channels out of the layers manually
Hey, this is a super great video!
Can you care to list all of those types of textures that you said (and didn't said) in the video? And I mean *all* (even the ones you said as 'etc').
I'm kinda researching about them right now but I can't find a list of them, only on this video.
Thanks!
But yeah, as I was saying, this is a very comprehensive video about this topic. This was super great.
Thanks, glad you liked it. Other maps include: Emission, Metalness, Roughness, Occlusion, ID Maps, Detail, Translucency, Displacement ( they're only really limited by the renderer/shader your using)
Thanks for the effort to reply!
I'm currently trying to make normal maps for my sprites and I'm trying the paint by hand method from your video and it was super helpful to me.
Thanks again for the reply, and for the video!
@@Erwiinstein Your very welcome, knowing these videos are helping is why I make them :)
Hi there, I've made my normal map and I now want to test them, do you maybe know of a way to do so easily without a game engine? I want to fully focus on graphics at the moment and I was hoping you'd know of a program to import normals and textures to, and possibly specular/metalness etca, and have my curser be a dynamic light source to check all is well.
I normally use Unity but it does take a little setting up, But Materialize is a good simple program you should be able to use to test them out in (boundingboxsoftware.com/materialize/)
Whew this was an incredibly quick reply! Thanks for that!
Anyways, I found a workaround using Godot, it's quite easy to set up, but I'll check out materialize! Thanks!
EDIT: do you by any chance know how to set up specular/metalness maps for 2D in Godot?
EDIT2: Materialize comes out blurry, I'll mess around a little, but if you know a fix it'd be nice, thanks for all the help so far btw.
So lets say i have my pixel tiles designed (referencing to the dead cells game) now i also have the normal tiles how do i do the programming so the normal tiles are used within the pixel tiles?
You'd need to create a material (using a shader that supports normal maps), assign your images maps to it, and use that material on your tiles
TheParasone just get Godot it comes with this functionality built in
Is this possible to do with vector art? For instance can a normal map be made in adobe animate cc which could scale with my base image. Planning to use vector art for my game and have not been able to find any resources regarding normal maps with vector art. It seems if I hand paint similar to your method of picking colors from a reference, then I might be able to build normal maps within a vector based program?
I haven't tried it but I see no reason why that shouldn't work. go for it :)
How did you maintain the sharp pixels in the Blender viewport? My sprite is at 64x64 resolution and when imported the pixelated edges are blurry.
For sharp pixel, turn off MipMaps in the User Preferences under System -> Opengl
@@ThePassiveAggressor Thanks!
What if instead of setting the blue channel to flat fill during the combining of 4 images, you used the height map itself for representing blueness? After all, blue is representing how the shape is lit perpendicularly, so the convex shapes will be lit more on their flat top rather than near the angled base.
I'm not sure that would work. The colour that I fill the blue channel with represents a normal that points straight up, its then combined with the left and right "colours" to make the final vector. But what you can do is replace the blue channel at the end of this process with other information, like a specular map. Then in a shader you can recalculate the Z component of the normal.
I'm curious if anyone has thoughts..
For an animation of a char running in an angled down view perspective(ie stardew valley, graveyard keeper), I want to create normals for every frame.
The problem is that due to the perspective of the camera, light that comes from above the character should barely light the character up because the light is behind the character from our perspective. Programs that generate normals break this perspective by including too many pixels lit from the top. I need the normals to be somewhat consistent due to this being an animation.
I've tried painting light from 4 angles on 4 different images, then merging them into a normal map with software, which is great, but it's pretty much impossible to make consistent per frame.
Any thoughts on what I could do to accomplish this? Is there software to generate normals on a sprite where I can change the perspective to include very few pixels being lit from the top?
That's a very good question, let me give that some thought.
@@ThePassiveAggressor I researched quite a bit more yesterday and found out that Sprite DLight is able to generate normal maps for a sprite sheet(so that helps with the consistency issue), but the key thing is that they have a feature to rotate about the x, y, or z of the normals. I'm pretty sure that means if I rotate it about the x axis, I can get the desired effect of reducing the amount of pixels lit from the top for the whole animation. Still researching for other methods and I'm curious if you have any other thoughts, but this seemed like a decent place to start. I'm surprised by the lack of normal map generating tools tbh - everything is 6 plus years old haha. Great video 👍
Yeah, but what do you do with pixel art normal maps?
Isn't it faster to just draw the angle information directly in the red and green channels when doing the manual 4 image method?
Yes, that would be faster as long as your use to using the correct colour to represent the desired angles
By any chance is there a process name or plugin that does the Normalize feature that your program uses. Because this is an insanely useful tool for video game modding and squeezing out additional details in DXT5 compressed normals for Valve games.
Sadly there isn't at the moment, but its something I could probably do if I can find some spare time. What would be the most useful to you do you think? an exe that would take an input and output filename?
The workflow with the tool atm is fine. I tend to just keep it up and load in map 1 then hit normalize and export the result. only thing I could think that would improve workflow is add a drag-and-drop feature and maybe TGA support. But in reality a few extra secs won't kill anyone in my opinion. Now if there was a conversion project that needed to batch edit several normals then I could see how such a feature would be heavily needed. But as for now it works great and has made me more curious on wanting to understand normal maps more
@@forgottenalex cool, I'm crazy busy at work at the moment, so finding time would have been tricky. Thanks :)
I love you
Aww, that's nice, glad you liked it :)
I am one of the folk who did a double take when he said red, as my monitor showed me brown.
yeah, it is kind of a brown apple isn't it :D
How did you do to get your black and white image with 4 different angle ?
I drew them by hand, somewhat time consuming
You mentioned that there is paid software that will create the top, bottom, left and right images. What software was that?
The one that comes to mind is www.spritelamp.com/
Nice video.
Normal map generator can't generate nothing from the colored texture because it's not how it works.
It can generate normals from height map..
Thanks, glad you liked it and yes generating normal maps from height maps will give much better results.
how did you used blender for normal map generation??
I modelled the geometry of the pixels, then baked the normal map to a texture. (there's lots of good normal map baking videos)
Hey, can I ask you, do you still have the source code for that tool? Would be nice to see how it's done.
I should have it somewhere, I'll see if I can dig it up. It just convert the RGB values into vectors, then does some simple angle calculations
Only one question left: Isn't pixel art exclusively used in to make 2D graphics? And aren't normal maps exclusively used to make 3D surfaces? In other words, what are pixel art normal maps used for? Can they be used to add a depth effect to 2D retro games like Super Mario Bros?
Yes you can use normal maps in 2D games. Have a look at this: ua-cam.com/video/EA_A8qhTh-8/v-deo.html
@@ThePassiveAggressor Wow!
:-)@@cube2fox
Why do you need to save resources for pixel art?
I’m not very experienced in pixel art so please don’t roast me
Does anyone know how to get that copy colour in gimp?
I haven't used Gimp but I image you could use the Color picker: docs.gimp.org/en/gimp-tool-color-picker.html
There's not a Copy Color option for layers in Gimp. What you can do is use Colours/Composition/Decompose & Recompose which let you work on individual RGB channels as grayscale layers. You could alternatively start with a grayscale image and build up the red / green / blue layers then use Colours/Composition/Compose to combine them into a colour image.
Height? Like... distance from the ground?
yes, just like that :)
So confused. Are we assuming the pixels are going to be on a vertical plane, then? What if the image is meant to be horizontal? Maybe it's distance from a perpendicular point?
But why would you want to make normal maps instead of just using some 3d pixel art software? Isn't it much easier and more costumizable that way?
Thats a good question, I think its a matter of personal taste, some people like to create each pixel by hand. Out of interest what 3d pixel art software do you mean?
@@ThePassiveAggressor Well, I haven’t really done it myself so I don’t know any of the programs well. I’ve seen people using Crocotile, otherwise I’ve just seen the finished models on twitter! :)
@@alevanderBatman Thanks for the info, I haven't heard of Crocotile, I'll have to check it out :)
why am i watching this at 3am
I will take that as a great compliment :)
Why use maps for pixel art?
Take a look at my "Experimenting with Specular Maps for Pixel Art" to see the result. I think its worth it :)
height maps == depth maps? what?
Yes, its just a different name for the same thing. silly huh :)
@@ThePassiveAggressor yeah caught me off guard
Hey. I came back again to this video months later to say a big thanks. This was really well explained and to the point. Kudos
Thanks, glad you liked it :)