Okay, so not only is the concept and execution immediately cool, but realizing I'm listening to an 8-bit version of Persona 5's Beneath the Mask just made it even better
One tip I would like to add: If you absolutely *need* to go in-between the colors of the palette or beyond, have the RGB color picker up. Adjusting R will adjust the horizontal direction of the normal, and adjusting G will adjust the vertical direction of the normal. The value 127 serves as a center value ([127,127,255] is the middle color in the palette), zero is far left/down, and 255 is far right/up. I do not recommend adjusting B unless you know what you're doing. Remember to keep a balanced and consistent level of detail.
If anyone really wants to know how to calculate the blue channel B from the red and green channels R and G: r = (R - 127.5) / 127.5 g = (G - 127.5) / 127.5 R and G are from 0 to 255 while r and g are from -1 to 1. L = sqrt(r² + g²) If L is greater than 1, divide r and g respectively by L (these will be their new values) and recalculate L (which will be 1). b = sqrt(1 - L²) B = round(b × 127.5 + 127.5) That is your value for B. And in case you had to recalculate r and g, you also need to recalculate R and G: R = round(r × 127.5 + 127.5) G = round(g × 127.5 + 127.5)
If you need to create your own normal map palette, Aseprite has a normal map colour wheel: press the button with three lines above the palette, then choose the normal map colour wheel to switch to it. Normal maps are so cool! It looks like magic!
Here's the trick for ya: Draw 3 b/w layers over the image: 1. Lit from the right 2. Lit from the top. 3. Lit from the front. Multiply them by Red, Green and Blue respectively. Blend (Add) together. Set bg as that bluish bg color.(0.5R,0.5G,1.0B) The combination is your normal map.
Could this be perhaps done if sprites are being generated from a 3D model in Blender? I'm thinking that perhaps rendering a mesh with a pure white material with lights placed as you suggest to create three normal mapped sprite sheets which are then blended into one using GIMP.
@@AllExistence Actually it's a pretty good trick to capture self shadowing. Note how the video's result doesn't have the screen left inside of the jacket catch the light coming from screen right. A pure normal map export and quantisation wouldn't get that shadowing, but a normal map generated from lighting would. Technically at that point you probably don't want normalised normals, but that's getting into the weeds.
Once you get to watch how a 7 second animation is made, you feel immense respect for the artist. I certainly do. People usually scroll away from a "cool" animation and don't realize how much effort was put into it. Someday I hope to make something like this on my own. Bravo, my friend!!
i was thinking about normal maps for pixel art for some time but Your video showed this method the best way possible. Amazing, simple and very informative video
Amazing breakdown! I've played around with automatic normal map generators, but as you've mentioned the results are often not that great. Drawing them by hand seemed really daunting, but this makes it seem achievable with some time and effort.
(apologies in advance for the comedically long paragraph, i may have gotten ahead of myself.. still deserved tho) this is so insanely cool and brought normal maps from “eh i’ll probably do that eventually for a gimmick when i improve enough” to “hell yeah i wanna get good enough to start using this stuff more often” for me. as a pixel artist for.. about a year i think? i’m genuinely flabbergasted by how much potential this medium has for Cool Shit™️ and am glad the community has people like you to make guides like this public. god knows how you have under 1k subscribers but i’m sure you’ll grow a following sooner rather than later.
Thank you so much. This is a much more approachable way to make normal maps rather than having auto generated ones or just eyeballing it until it looks okay. I will definitely make use of this in my game
damn this video came in clutch, started making lighting for my pixel art game today and dynamic lighting using normal maps looks awesome, thank you for this tutorial!
THIS! I have been trying to build myself an art style for a simple 2d platformer i'm working on in godot. Trouble is 2D and normal maps have some unwanted effects. I'm gonna jump right in and try adding my art as sprites on a 3d plane to see if this works. Thanks for the insight
Surely this could be automated with some kind of plug-in for something like GIMP to avoid how it'd be impractical to manually edit over 800 frames of sprite animation on a typical character.
You can apply animation logic methods to normals in this case too. For example, in very fast frames, you don't need such detailed outlines. In some cases, you can just use the volumes and test with less detail. Normal maps are an extra step, they're worth the effort for characters with more screen time, unlike NPCs, for example
This is insanely good! Could you consider doing a video on how to effectively use a small color palette? I wanna try and make my own normal maps but ill probably screw them up, lol
this is super sweet tutorial!. Ton of work for animated sprites but I think it's worth it for the results in the end. Not related to the tutorial but I am curious about how you did the wind on the leaves. Is that hand animated? or was there some other technique
thanks ☕ about the tree animations i made in after effecters, there is an old tutorial by art of sullivain that explains about it, here it is: www.artstation.com/artwork/qyKrn I followed the same logic with an extra layer for the normal map to have interaction with the light on the tree too
If the height maps have a smooth gradient I believe it would generate the same automated normal map generators as at the beginning of the video, i think boundingboxsoftware can do that but cant try by myself on macOs
"personagem"??? "iluminação"??????????????? *BRASIL-SIL-SIL-SIL* nmrl, bom tutorial 👍não faço pixel art, mas é interessante ver como as pessoas fazem arte (e to tentando aprender blender em geral, ent isso já ajuda um pouco)
Valeu , futuramente eu devo abordar alguns detalhes sobre o blender, mas abordando de uma forma mais geral que dê pra ser aplicavel independente do software que é usado tlgd
just saving in png, and for animations png sequence since some software does not accept sprite sheet, blender with some plugins instantly updates the change when you save from aseprite
I wonder if you could go a step further and make an "occlusion map" to catch those areas like the inside of the jacket that should have light blocked from certain directions, even if their normal logically points that way?
Okay, so not only is the concept and execution immediately cool, but realizing I'm listening to an 8-bit version of Persona 5's Beneath the Mask just made it even better
the work @lumena-tan did on this version is amazing ☕
This is such a gem of a tutorial
hand painting a normal map is madness, I love it
but the results are SOOOOOO glorious.
I have been adding normals to my 3D pixel art game and man it looks so nice
Add a little pizzazz
One tip I would like to add:
If you absolutely *need* to go in-between the colors of the palette or beyond, have the RGB color picker up.
Adjusting R will adjust the horizontal direction of the normal, and adjusting G will adjust the vertical direction of the normal.
The value 127 serves as a center value ([127,127,255] is the middle color in the palette), zero is far left/down, and 255 is far right/up.
I do not recommend adjusting B unless you know what you're doing. Remember to keep a balanced and consistent level of detail.
If anyone really wants to know how to calculate the blue channel B from the red and green channels R and G:
r = (R - 127.5) / 127.5
g = (G - 127.5) / 127.5
R and G are from 0 to 255 while r and g are from -1 to 1.
L = sqrt(r² + g²)
If L is greater than 1, divide r and g respectively by L (these will be their new values) and recalculate L (which will be 1).
b = sqrt(1 - L²)
B = round(b × 127.5 + 127.5)
That is your value for B. And in case you had to recalculate r and g, you also need to recalculate R and G:
R = round(r × 127.5 + 127.5)
G = round(g × 127.5 + 127.5)
If you need to create your own normal map palette, Aseprite has a normal map colour wheel: press the button with three lines above the palette, then choose the normal map colour wheel to switch to it. Normal maps are so cool! It looks like magic!
Aseprite*
Here's the trick for ya:
Draw 3 b/w layers over the image:
1. Lit from the right
2. Lit from the top.
3. Lit from the front.
Multiply them by Red, Green and Blue respectively.
Blend (Add) together. Set bg as that bluish bg color.(0.5R,0.5G,1.0B)
The combination is your normal map.
Could this be perhaps done if sprites are being generated from a 3D model in Blender? I'm thinking that perhaps rendering a mesh with a pure white material with lights placed as you suggest to create three normal mapped sprite sheets which are then blended into one using GIMP.
@@KryyssTV It would be stupid. In 3d you can simply export the normal pass.
@@AllExistence Actually it's a pretty good trick to capture self shadowing. Note how the video's result doesn't have the screen left inside of the jacket catch the light coming from screen right. A pure normal map export and quantisation wouldn't get that shadowing, but a normal map generated from lighting would. Technically at that point you probably don't want normalised normals, but that's getting into the weeds.
@@AllExistence Not sure if the process of making the sprite sheet will support that but it's worth a look.
@@sampruden6684 No, that's wrong. He painted it by hand, of course he forgot about self shadowing. But, yeah, light will help.
Once you get to watch how a 7 second animation is made, you feel immense respect for the artist. I certainly do. People usually scroll away from a "cool" animation and don't realize how much effort was put into it.
Someday I hope to make something like this on my own.
Bravo, my friend!!
i was thinking about normal maps for pixel art for some time but Your video showed this method the best way possible. Amazing, simple and very informative video
thank u 🤍
Hey thanks a lot for this! I've been puzzled by normal maps on pixel art for years
i'm glad its helpfull ☕
legitimately one of the best pixel art i've seen.
I find this actually helpful. It's a great idea to simplify the normal map to such a simple palette. Gonna actually give it a go.
Amazing breakdown!
I've played around with automatic normal map generators, but as you've mentioned the results are often not that great.
Drawing them by hand seemed really daunting, but this makes it seem achievable with some time and effort.
cool video
oh it's nice to see how someone else thinks through handling restricting the palette of normals :D
estava precisando MUITO deste tutorial
que bom que foi útil
this is the coolest shit ever
Great work, this will be very useful
tysm 🤍 if you need help, just let me know
Awasome :o
tysm ☕
This is so amazing and inspiring! Thank you.
i'm happy to hear that, tysm
Damn, really impressive
I love how I search for something very specific when making my game and now everyone is giving me updated tutorials. Keep up the awesome work 👌
This remember me the game "CLOUDPUNK" because the atmosphere. Amazing job !! Greetings from Brazil !
valeu é nois que voa
subscribed :) you're doing great!
thank you ☕🤍
This is SO interesting, and helps me make sense on how this works. Simplifying it to 8-9 colors for pixel art is genius
Might try using Substance painter to help streamline this process! you can paint with height and make even more detailed normals for your artwork!
isn't that a 3d program?
it would be interesting to find a way to make this process easier
Godlike tutorial you deserve 1m subs
Tutorial perfeito. Agora eu entendo como as cores dos normal maps funcionam (não só para pixel art).
Как же это круто, вы талантливы ))
thank you!
☕
It's incredible how much that does for the lighting even with 2d assets in 3d space. Beautiful.
Insanely underrated. Please keep making pixel art tutorials and other videos.
i'll definitely do that, i'm working on the next video, tysm ♥
Nice 👍
(apologies in advance for the comedically long paragraph, i may have gotten ahead of myself.. still deserved tho)
this is so insanely cool and brought normal maps from “eh i’ll probably do that eventually for a gimmick when i improve enough” to “hell yeah i wanna get good enough to start using this stuff more often” for me. as a pixel artist for.. about a year i think? i’m genuinely flabbergasted by how much potential this medium has for Cool Shit™️ and am glad the community has people like you to make guides like this public. god knows how you have under 1k subscribers but i’m sure you’ll grow a following sooner rather than later.
Thank you so much. This is a much more approachable way to make normal maps rather than having auto generated ones or just eyeballing it until it looks okay. I will definitely make use of this in my game
LOVE IT MAN
Really nice video!!!
simplesmente sensacional meu mano!!
I need so hard this as a background gif
Thanks for sharing!
What a fuckin genious, how you minded for normal map in pixel art? Its adorable ❤
i was inspired years ago by games like The Last Night and Replaced. They blend pixel art with normal maps too. btw TYSM
damn this video came in clutch, started making lighting for my pixel art game today and dynamic lighting using normal maps looks awesome, thank you for this tutorial!
thank you so much!! its such a clear explanation
Amazing production quality. Good use of your skillset and nice ascetic fit. Makes it clear how much work pixel art is though.
TYSM
This would be awesome in a game engine
It's in Godot 4
That's an interesting approach!
Is- is this what happens when one uses 100% of their brain...?
i want to play as your robot detective man. i'm sure i'll eventually study this tutorial, too
This the exact style I want to make my game, I just hope to actually make a game one day....
muito obrigadooo!!!
You deserve a like for the banger of a music selection alone. 😎👍
Very neat. I wonder if, since there is logic to the methodology, if it could be scripted to automate the process somewhat.
Holy shit. Amazing.
THIS!
I have been trying to build myself an art style for a simple 2d platformer i'm working on in godot.
Trouble is 2D and normal maps have some unwanted effects.
I'm gonna jump right in and try adding my art as sprites on a 3d plane to see if this works.
Thanks for the insight
POG
Surely this could be automated with some kind of plug-in for something like GIMP to avoid how it'd be impractical to manually edit over 800 frames of sprite animation on a typical character.
yeah, I was thinking that too
You can apply animation logic methods to normals in this case too. For example, in very fast frames, you don't need such detailed outlines. In some cases, you can just use the volumes and test with less detail. Normal maps are an extra step, they're worth the effort for characters with more screen time, unlike NPCs, for example
This is insanely good! Could you consider doing a video on how to effectively use a small color palette? I wanna try and make my own normal maps but ill probably screw them up, lol
this is super sweet tutorial!. Ton of work for animated sprites but I think it's worth it for the results in the end. Not related to the tutorial but I am curious about how you did the wind on the leaves. Is that hand animated? or was there some other technique
thanks ☕ about the tree animations i made in after effecters, there is an old tutorial by art of sullivain that explains about it, here it is: www.artstation.com/artwork/qyKrn
I followed the same logic with an extra layer for the normal map to have interaction with the light on the tree too
@@nobuarte thankyou!! That's really helpful!!
Is generating normal maps from height maps possible instead or does it not give good quality for pixel art?
If the height maps have a smooth gradient I believe it would generate the same automated normal map generators as at the beginning of the video, i think boundingboxsoftware can do that but cant try by myself on macOs
"personagem"??? "iluminação"??????????????? *BRASIL-SIL-SIL-SIL*
nmrl, bom tutorial 👍não faço pixel art, mas é interessante ver como as pessoas fazem arte (e to tentando aprender blender em geral, ent isso já ajuda um pouco)
Valeu , futuramente eu devo abordar alguns detalhes sobre o blender, mas abordando de uma forma mais geral que dê pra ser aplicavel independente do software que é usado tlgd
Are you using aseprite importer? To constantly get the results?
just saving in png, and for animations png sequence since some software does not accept sprite sheet, blender with some plugins instantly updates the change when you save from aseprite
Very cool vid! What if we wanted to do it with a non pixel art 2d game, where the sprites are hand drawn like in Hollow Knight?
this is why ai cannot be a replacement for human artists. when is it gonna make something like this!?
Is there a way to automate this process?
as they showed the automatic ones prolly wont look as good
Very cool, but doesn't seem like a sustainable workflow for many sprite with animations to boot.
Это выглядит просто охуенно! 🥰
Insta sub ❤️
tysm!! ❤
this looks like a horrible, time consuming and boring process
I wonder if you could go a step further and make an "occlusion map" to catch those areas like the inside of the jacket that should have light blocked from certain directions, even if their normal logically points that way?