Using Normal Maps is underrated with 2D game dev. Here's a brief video on implementing Normal Maps on to your 2D Sprites. Contact: bleedingtrollllc@gmail.com
Poll up on community tab on my channel - vote for what you want to see. It seems like most people voted for normals part 2, so the next part will be a little more complex including the following: - Normal maps on a 2d drawing - Explaining and visualizing normal maps using Blender 4.0 - Using higher detailed models to bake normals on a lower-res mesh - Using normal maps for animated sprites and for Sprite3D in Godot 4 I'd like to mention that Aseprite DOES have a built-in Normal Map color palette and wheel, which would be helpful for doing legitament normal maps instead of the quick and dirty way I did it in the video. This information was brought to me by @watcx and at a later date i'll do a more in-depth video that shows a more reasonable approach to creating normal maps for 2D art.
Dude, you are going to blow up if you keep making content like this. Like, there are other vids on the topic but your technique allows the most control.
Aseprite comes with a built in normal map color wheel that maps exactly to godot's normal mapping colors. The normal map color wheel used in the video is only a small portion of the available color range as well. It's under the color pallete options as "Normal map color wheel"
I didn't even think to check, thanks for letting me know. This was a brief little intro instead of the indepth dive I wanted to do, so I may do a follow up video somewhat soonish, I'll be sure to include that information and give you a shout out.
If you’re wondering about the normal map colors, the RGB Color channels are used to store the XYZ components of the normal vector for each pixel of the image
There IS interest for a video going into the complexities, absolutely! 🤚🤚 This is great, subscribed Also holy crap the idea of just hand-painting normal maps using a sphere as reference is SO cool haha. this is such a dope technique. Personally, since I don't use Godot, I would totally be interested in learning more specifics about how the lighting works, and how this interacts with the normal map.
I'll give it a shot... A "normal" is just a direction, similar to how a circle has a "tangent," it's the direction that points perpendicular from a surface directly away from it (in 2 dimensions its the direction 90 degrees away from the tangent). If you're at your desk right now, the normal of the top of the desk would point directly up into the sky. If you showed the normals on a sphere at various points it would start to look like a spikey hedgehog. It's just a direction. Normal vectors are useful for MATHs, particularly when something bounces off a surface and you want to know which direction it's heading in after the bounce. You could use this for physics if you have a bouncy ball bouncing around your scene, but the same principle applies to light when it bounces off a surface. If you imagine a laser pointer shining on a mirror, the laser comes in along one direction and travels off along another. A normal will tell you where the laser pointer is going after it shines on the mirror. In a similar way, you can use the same maths to tell you how much light the camera is receiving from a light source when it bounces off a 3d object. If a light source bounces off a surface directly into the camera then that part of the surface should be BRIGHT, but if it bounces off and heads away from the camera it should be DARK. Normals tell us how bright a surface is based on how much light the camera receives from it. So what are normal MAPS? Well, models are made up of tiny triangles, and because a triangle is a flat surface you only get 1 normal per triangle to play with. This is fine if your triangles are very small, but games often have low-poly models with hi-resolution textures and lots of little details. Being limited to 1 normal per triangle can make our object look chunky or blocky (great for stylised low poly graphics, bad for other things). If you want a small detail to look right like a belt buckle or the button on a shirt or the curvature of an eyelid you need to figure out a way of putting MORE NORMALS into your object without creating extra triangles that will make it slower to render. That's what a normal map is for, instead of calculating the normals for every single texel of the object at runtime or adding tons more triangles, we store the normal information in a texture and when light hits our belt buckle we know exactly what its normal should be even though it's a 2D detail on a 3D object. How do we do that when a texture stores colour information and we're looking for a direction in 3D space for our light to bounce off of? Conveniently a direction in 3D space consists of 3 parts, an x, y and z value. The colour of a pixel also consists of 3 parts, a red, green and blue value. Some smartypants figured out you can just "map" the x,y and z values to those r,g and b values and now you have directional information stored in an image. The colours will look a bit psychedelic of course, but we don't care about that because the colours are never seen by the player. And that's it, that's how a normal map works. And because we already use them for 3D lighting details on 2D textures there's no reason we can't use them for 3D lighting details on 2D sprites. It's the same principle, it's just a bit harder because we don't have a 3D model to work with, we need to guess what the normals are or come up with a fancy algorithm to do it for us.
@@DrEnzyme Really beautiful explanation, I appreciate it. In this specific example, are the light values on each pixel being calculated with respect to their normals + the simple 2D direction of the lightsource? Also, if the normal map is still using RGB, is it using 3 coordinates even tho it's only 2D? Is it simulating a 3D effect?
I've never seen any of your videos before but I just wanna say that this was an extremely useful tutorial for me and I feel like I've genuinely learned something incredibly useful. Thank you so much!
A quick look into it like this was perfect. I was using lights and was annoyed with how it affected the sprites looked. This makes it easier to know what to research and try out further.
It should be noted you can also construct normal maps individually per channel. This is how professionals do it as doing it this way makes it much easier to understand why you are actually putting down the pixels in a certain place.
Not worth the time. You will make more tangible progress learning to draw the normal maps per hand (not only for better normals but also in general, thinking about shapes and depth is a big biiig thing in art) The only way such a tool could theoretically work is if you have your texture and somewhat 3d model the rough shapes outward from the texture. This way a very accurate texture could be projected onto the base sprite. To my knowledge, nobody has attempted such a thing.
@raidev_ Yeah, there are automated solutions but I don't really use them for 2D pixel art so it remains to be seen how useful it'll be for animations. I'll test it out in my next video and hopefully it'll be a viable option for you if it's something you'd like to do but don't have the time for.
Also agree that you should have some 3d shit up next. As you said normal maps are pretty complex if your soley looking at the technichal aspects and doing a deep dive, but overall they are extremely easy to create otherwise. There are some interesting thinfs you could do as well such as creating handpainted textures which you could cover.
I tried normal maps on pixel art once, but without the skill to make a custom lighting engine it looked terrible. The problem is my style of pixel character art needs smooth normals and a small number of discrete shadow tones, which are both hard to achieve by hand.
"Those complexities don't really matter unless you're programming a rendering engine" Or making a custom shader, which many 2D games could do for stylization effects Or changing the way lighting works from the native default, which may lead to unexpected behavior if you don't know how normal maps work Also, not describing how they work to at least some baseline degree of specificity gimps the viewer out of learning how POWERFUL normal maps are. You DON'T have to use them just for lighting, depending on the nature of your game they could be use for many unique and interesting purposes. They're a great thing to check out in more detail- *gets blown up by the anti-intellectual bomb at **1:14*
but still i think that the original without shaders support look better,the one with shaders is like why should i waste time choosing the colors when the shaders will change the colors into that ugly color palette ,the one on the right is far more visually appealing to me,also for one texture it doesn't change much but if i do that on every single texture that would heavily impact the game performance,especially on big maps,but all this negative review for those shaders is based on me so don't think i am insulting and all that,i just prefer to have less performance impact,like that i can decorate the tilemap as much as i want without loosing much fps,the only way i would use that shaders support would be on effects like arcane spell and similar.
i'd say do a mix of both, pixel art with HEAVY normal maps look very jarring and contrasty, your first example of your sword is the worst offender. average out the normal levels so that the sprite reacts to the light, but doesn't self shadow so harshly
a normal map "maps" normals! Its that simple! A normal is a vector which is perpendicular to a plane. Its use in lighting is to signal to the renderer which direction a face is well, facing. In its most simple form the normals match the faces of the rendered object's geometry exactly, but often you want to make a mathematically flat face look less flat and thus a normal map can create more complex normal arrangements to simulate things like texture and bumps on the rendered objects surface. It gets a bit confusing in 2D because generally there is no need for a normal map at all, but taking advantage of how modern engines do 2D you can still leverage the lighting system, and thus normals even in 2D. This is not something I would have thought of, but I normally do 3D anyway. Cool video and technique though.
Is there any way I could use that point light texture? Trying to make my character, Morver, look 3D but I don't exactly have a point light texture (and aseprite doesn't have a clear gradient option for whatever reason). (I'm using RPG Maker, but decided to use Godot for testing purposes until I learn to do proper coding and port my game into it)
Yeah, I put my email in the description, if you shoot me an email then I can send you the light sprite. I'll send you the one that I used in the video and also a slightly higher resolution one.
I'll try to include this in the next video, but you would need to create a normal for each frame of the animated sprite - other people have mentioned that there are automated normal map creators, but I haven't tested any out to say I'd they work well.
But…. Do you then draw the sprite normal like always with shading or without shading? Because if you shade a sprite and then additionally make some 3dish light on top. That will add additional shading to the sprite which wasn’t maybe intended before by the artist…. Do you understand what I mean?
Yeah and…. You shade on object like for example the light is fixed from one side…. But now you put normal maps and the light comes from any direction but the sprite has already it’s shade… it would like weird?
hello. just new to aseprite and game dev. when u create your sprites u make it like 16x16/32x32 and scale 2x 3x in godot? or do u make it larger and use bigger pencil? (like 2 3 4px pen)
I make my sprites using 16/32px, and then in godot there are ways to make the pixel art scaled up by changing some settings/viewport size and it works fine.
this generally doesnt work (except for very specific scenarios) because its impossible to know the direction of a surface based on its colour. so in many cases, you would need to manually do it
The lighting on the sprite will still be dynamic even if the light is stationary, so similar to what you see in the video, but if the sprite was rotated instead of the light being moved. You can kind of see it at at the 6:30 timestamp onwards. Whenever I release a second video Ill try to catch it better.
@@BleedingTroll that makes sense that it still updates, but the directions in the normal map are kind of confusing. does the engine 'read' the normal map depending on the rotation, or do the colors not correspond to a fixed direction?
Sorry for the late response, I do not have much experience with the Godot 3D systems as I mostly use Unreal, but it does seem like this should work for sprite 3D, as long as you can set the texture to canvas texture, and then plug in a sprite for diffuse and the normal map in the normal map slot. I will showcase this in in the next video.
In my opinion, I have to agree with you for the most part which is why I'm trying to help it a little bit, but if you are interested I do have some videos about creating high quality 3D assets for indie games coming if that interest you.
I mean, it's cool and all, but it kinda destroys the whole feeling of pixel art and why I love it by turning it into something that it just isn't, and besides, not every game needs to be a Octopath Traveler, so I'll just keep doing pixel art the way I'm used to, so I get to preserve the 8 to 16 bit vibe that I tend to go for. However, I still think this technique is cool specially if again, you want to go for a different style of pixel art than what I do, I'm just saying that it doesn't really fit my preference. (Not to mention that I have the suspicion that this will make animating spritesheets even more tedious and time consuming than it already is.)
@costelinha1867 you are correct, like I mentioned near the end of the video, it largely depends the style that you want to go for - art direction trumps all in the end. There's nothing wrong with liking one style more than the other either.
@tjazpirnar ill give it a try and give an opinion on it in the more in depth video. Looking at their website it seems interesting, though we'll see how we'll it works with pixel art.
Poll up on community tab on my channel - vote for what you want to see.
It seems like most people voted for normals part 2, so the next part will be a little more complex including the following:
- Normal maps on a 2d drawing
- Explaining and visualizing normal maps using Blender 4.0
- Using higher detailed models to bake normals on a lower-res mesh
- Using normal maps for animated sprites and for Sprite3D in Godot 4
I'd like to mention that Aseprite DOES have a built-in Normal Map color palette and wheel, which would be helpful for doing legitament normal maps instead of the quick and dirty way I did it in the video.
This information was brought to me by @watcx and at a later date i'll do a more in-depth video that shows a more reasonable approach to creating normal maps for 2D art.
Dude, you are going to blow up if you keep making content like this. Like, there are other vids on the topic but your technique allows the most control.
Aseprite comes with a built in normal map color wheel that maps exactly to godot's normal mapping colors. The normal map color wheel used in the video is only a small portion of the available color range as well.
It's under the color pallete options as "Normal map color wheel"
I didn't even think to check, thanks for letting me know. This was a brief little intro instead of the indepth dive I wanted to do, so I may do a follow up video somewhat soonish, I'll be sure to include that information and give you a shout out.
woah!
The log actually looked so good with the normal map, it kind of surprised me how easy it was for you spriting it
If you’re wondering about the normal map colors, the RGB Color channels are used to store the XYZ components of the normal vector for each pixel of the image
I didn't know you could use a Normal map for 2D art! Nice video!
There IS interest for a video going into the complexities, absolutely! 🤚🤚
This is great, subscribed
Also holy crap the idea of just hand-painting normal maps using a sphere as reference is SO cool haha. this is such a dope technique. Personally, since I don't use Godot, I would totally be interested in learning more specifics about how the lighting works, and how this interacts with the normal map.
I'll give it a shot...
A "normal" is just a direction, similar to how a circle has a "tangent," it's the direction that points perpendicular from a surface directly away from it (in 2 dimensions its the direction 90 degrees away from the tangent). If you're at your desk right now, the normal of the top of the desk would point directly up into the sky. If you showed the normals on a sphere at various points it would start to look like a spikey hedgehog. It's just a direction.
Normal vectors are useful for MATHs, particularly when something bounces off a surface and you want to know which direction it's heading in after the bounce. You could use this for physics if you have a bouncy ball bouncing around your scene, but the same principle applies to light when it bounces off a surface. If you imagine a laser pointer shining on a mirror, the laser comes in along one direction and travels off along another. A normal will tell you where the laser pointer is going after it shines on the mirror. In a similar way, you can use the same maths to tell you how much light the camera is receiving from a light source when it bounces off a 3d object. If a light source bounces off a surface directly into the camera then that part of the surface should be BRIGHT, but if it bounces off and heads away from the camera it should be DARK. Normals tell us how bright a surface is based on how much light the camera receives from it.
So what are normal MAPS? Well, models are made up of tiny triangles, and because a triangle is a flat surface you only get 1 normal per triangle to play with. This is fine if your triangles are very small, but games often have low-poly models with hi-resolution textures and lots of little details. Being limited to 1 normal per triangle can make our object look chunky or blocky (great for stylised low poly graphics, bad for other things). If you want a small detail to look right like a belt buckle or the button on a shirt or the curvature of an eyelid you need to figure out a way of putting MORE NORMALS into your object without creating extra triangles that will make it slower to render. That's what a normal map is for, instead of calculating the normals for every single texel of the object at runtime or adding tons more triangles, we store the normal information in a texture and when light hits our belt buckle we know exactly what its normal should be even though it's a 2D detail on a 3D object.
How do we do that when a texture stores colour information and we're looking for a direction in 3D space for our light to bounce off of? Conveniently a direction in 3D space consists of 3 parts, an x, y and z value. The colour of a pixel also consists of 3 parts, a red, green and blue value. Some smartypants figured out you can just "map" the x,y and z values to those r,g and b values and now you have directional information stored in an image. The colours will look a bit psychedelic of course, but we don't care about that because the colours are never seen by the player.
And that's it, that's how a normal map works. And because we already use them for 3D lighting details on 2D textures there's no reason we can't use them for 3D lighting details on 2D sprites. It's the same principle, it's just a bit harder because we don't have a 3D model to work with, we need to guess what the normals are or come up with a fancy algorithm to do it for us.
@@DrEnzyme Really beautiful explanation, I appreciate it. In this specific example, are the light values on each pixel being calculated with respect to their normals + the simple 2D direction of the lightsource?
Also, if the normal map is still using RGB, is it using 3 coordinates even tho it's only 2D? Is it simulating a 3D effect?
Interesting, I've never touched any sort of lighting related stuff but this is tempting me to give it a try. It looks so good!
I’m always looking for new tip and tricks thanks for the new upload!!
Ayyyy, long time no see!! I've definitely missed your presence on here!
always great seeing your videos! good job!
Glad you like them!
Thanks for the simple tutorial, it really helped me!
Thanks for this beautiful tutorial!
Thank you for watching hopefully I can make more interesting tutorials soon.
I've never seen any of your videos before but I just wanna say that this was an extremely useful tutorial for me and I feel like I've genuinely learned something incredibly useful. Thank you so much!
Do you think you'll do more tutorials in the future?? Im definitely invested in seeing what else youre able to share.
That's the plan! Hoping to post a devlog about a 3D game I've been working on so I can post 3D tech videos afterwards too.
A quick look into it like this was perfect. I was using lights and was annoyed with how it affected the sprites looked. This makes it easier to know what to research and try out further.
really helpful!
Really great video man! I always wondered how to apply normal maps to pixel art, I didn't realise it was this easy!
I would not say instantly, but normal map lighting looks absolutely great
Great video!
It should be noted you can also construct normal maps individually per channel. This is how professionals do it as doing it this way makes it much easier to understand why you are actually putting down the pixels in a certain place.
There is also a tool named laigter, which can be helpful for normal-maps. Not perfect, but worth trying out.
Not worth the time. You will make more tangible progress learning to draw the normal maps per hand (not only for better normals but also in general, thinking about shapes and depth is a big biiig thing in art)
The only way such a tool could theoretically work is if you have your texture and somewhat 3d model the rough shapes outward from the texture. This way a very accurate texture could be projected onto the base sprite.
To my knowledge, nobody has attempted such a thing.
This looks pretty cool, but I can't imagine doing this for every single animation frame on my characters
@raidev_ Yeah, there are automated solutions but I don't really use them for 2D pixel art so it remains to be seen how useful it'll be for animations. I'll test it out in my next video and hopefully it'll be a viable option for you if it's something you'd like to do but don't have the time for.
Awesome video
Also agree that you should have some 3d shit up next.
As you said normal maps are pretty complex if your soley looking at the technichal aspects and doing a deep dive, but overall they are extremely easy to create otherwise. There are some interesting thinfs you could do as well such as creating handpainted textures which you could cover.
Cool. I have actually never seen normal maps used for 2D games
Great and helpful video. Looking forward to more like it. Sub'ed.
very cool, +1 new sub
Hand painting gives better results, although it's time-consuming.
i need to stop watching game dev tutorials with no intention of making a game. good video 👍
a very cool tip.
I tried normal maps on pixel art once, but without the skill to make a custom lighting engine it looked terrible. The problem is my style of pixel character art needs smooth normals and a small number of discrete shadow tones, which are both hard to achieve by hand.
it s awsome thank you!!!
"Those complexities don't really matter unless you're programming a rendering engine"
Or making a custom shader, which many 2D games could do for stylization effects
Or changing the way lighting works from the native default, which may lead to unexpected behavior if you don't know how normal maps work
Also, not describing how they work to at least some baseline degree of specificity gimps the viewer out of learning how POWERFUL normal maps are. You DON'T have to use them just for lighting, depending on the nature of your game they could be use for many unique and interesting purposes. They're a great thing to check out in more detail- *gets blown up by the anti-intellectual bomb at **1:14*
Do the normal maps work properly when rotating your sprite by default, or is there some setting to adjust for that?
but still i think that the original without shaders support look better,the one with shaders is like why should i waste time choosing the colors when the shaders will change the colors into that ugly color palette ,the one on the right is far more visually appealing to me,also for one texture it doesn't change much but if i do that on every single texture that would heavily impact the game performance,especially on big maps,but all this negative review for those shaders is based on me so don't think i am insulting and all that,i just prefer to have less performance impact,like that i can decorate the tilemap as much as i want without loosing much fps,the only way i would use that shaders support would be on effects like arcane spell and similar.
i'd say do a mix of both, pixel art with HEAVY normal maps look very jarring and contrasty, your first example of your sword is the worst offender. average out the normal levels so that the sprite reacts to the light, but doesn't self shadow so harshly
a normal map "maps" normals! Its that simple! A normal is a vector which is perpendicular to a plane. Its use in lighting is to signal to the renderer which direction a face is well, facing. In its most simple form the normals match the faces of the rendered object's geometry exactly, but often you want to make a mathematically flat face look less flat and thus a normal map can create more complex normal arrangements to simulate things like texture and bumps on the rendered objects surface. It gets a bit confusing in 2D because generally there is no need for a normal map at all, but taking advantage of how modern engines do 2D you can still leverage the lighting system, and thus normals even in 2D. This is not something I would have thought of, but I normally do 3D anyway. Cool video and technique though.
Is there any way I could use that point light texture? Trying to make my character, Morver, look 3D but I don't exactly have a point light texture (and aseprite doesn't have a clear gradient option for whatever reason). (I'm using RPG Maker, but decided to use Godot for testing purposes until I learn to do proper coding and port my game into it)
Yeah, I put my email in the description, if you shoot me an email then I can send you the light sprite. I'll send you the one that I used in the video and also a slightly higher resolution one.
um actaully... hilarious
How would you do this for animated sprites? Or even 2d animated png style animated objects/characters such as in Cult of Lamb?
I'll try to include this in the next video, but you would need to create a normal for each frame of the animated sprite - other people have mentioned that there are automated normal map creators, but I haven't tested any out to say I'd they work well.
But…. Do you then draw the sprite normal like always with shading or without shading? Because if you shade a sprite and then additionally make some 3dish light on top. That will add additional shading to the sprite which wasn’t maybe intended before by the artist…. Do you understand what I mean?
Yeah and…. You shade on object like for example the light is fixed from one side…. But now you put normal maps and the light comes from any direction but the sprite has already it’s shade… it would like weird?
generally with this you'd just want to draw some neutral detail shading, no directional lighting.
hello. just new to aseprite and game dev. when u create your sprites u make it like 16x16/32x32 and scale 2x 3x in godot? or do u make it larger and use bigger pencil? (like 2 3 4px pen)
I make my sprites using 16/32px, and then in godot there are ways to make the pixel art scaled up by changing some settings/viewport size and it works fine.
what if i want to add normal maps to a sprite with animations
um there are free software and asprite scrips who can convert you image into a normal map
this generally doesnt work (except for very specific scenarios) because its impossible to know the direction of a surface based on its colour. so in many cases, you would need to manually do it
What about height maps?
what happens when the sprite rotates? thanks!
The lighting on the sprite will still be dynamic even if the light is stationary, so similar to what you see in the video, but if the sprite was rotated instead of the light being moved. You can kind of see it at at the 6:30 timestamp onwards. Whenever I release a second video Ill try to catch it better.
@@BleedingTroll that makes sense that it still updates, but the directions in the normal map are kind of confusing. does the engine 'read' the normal map depending on the rotation, or do the colors not correspond to a fixed direction?
there are free software who can just convert an image into a normal map
What are they
is there any way to make this work with an tileset?
It SHOULD work with tilesets, though I'm still working on that aspect of it. Once I get it down I'll let you know
waow
can this be done with sprite3D?
Sorry for the late response, I do not have much experience with the Godot 3D systems as I mostly use Unreal, but it does seem like this should work for sprite 3D, as long as you can set the texture to canvas texture, and then plug in a sprite for diffuse and the normal map in the normal map slot. I will showcase this in in the next video.
At this point, 2D in general feels like shovelware.
In my opinion, I have to agree with you for the most part which is why I'm trying to help it a little bit, but if you are interested I do have some videos about creating high quality 3D assets for indie games coming if that interest you.
I mean, it's cool and all, but it kinda destroys the whole feeling of pixel art and why I love it by turning it into something that it just isn't, and besides, not every game needs to be a Octopath Traveler, so I'll just keep doing pixel art the way I'm used to, so I get to preserve the 8 to 16 bit vibe that I tend to go for. However, I still think this technique is cool specially if again, you want to go for a different style of pixel art than what I do, I'm just saying that it doesn't really fit my preference.
(Not to mention that I have the suspicion that this will make animating spritesheets even more tedious and time consuming than it already is.)
@costelinha1867 you are correct, like I mentioned near the end of the video, it largely depends the style that you want to go for - art direction trumps all in the end. There's nothing wrong with liking one style more than the other either.
an actual artist would never use this effect, it's ugly
aw poor baby 😢 not all “actual artists” use the same effects. people learn and adapt.
katana zero is a popular example of a pixel art game that uses normal maps effectively
First off, who do you think you are to gatekeep art, second, artists have and DO use this, it depends on their art style.
dead cells uses this technique, interestingly enough
@@tinyeragon7132 DeadCell's characters are 3D with post-process to make them look like pixelated sprite.
Materialize - by Bounding Box Software. You're welcome
@tjazpirnar ill give it a try and give an opinion on it in the more in depth video. Looking at their website it seems interesting, though we'll see how we'll it works with pixel art.