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
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.
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)
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
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.
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!
(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.
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! 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
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
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
"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
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
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?
![[#2024MAMA] ROSÉ (로제), Bruno Mars - APT. | Mnet 241122 방송](http://i.ytimg.com/vi/dgGqD28J6aQ/mqdefault.jpg)
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
I have been adding normals to my 3D pixel art game and man it looks so nice
Add a little pizzazz
hand painting a normal map is madness, I love it
but the results are SOOOOOO glorious.
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.
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)
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 🤍
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*
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.
Great work, this will be very useful
tysm 🤍 if you need help, just let me know
this is the coolest shit ever
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.
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 👌
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.
This is so amazing and inspiring! Thank you.
i'm happy to hear that, tysm
This is SO interesting, and helps me make sense on how this works. Simplifying it to 8-9 colors for pixel art is genius
It's incredible how much that does for the lighting even with 2d assets in 3d space. Beautiful.
oh it's nice to see how someone else thinks through handling restricting the palette of normals :D
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
estava precisando MUITO deste tutorial
que bom que foi útil
cool video
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
subscribed :) you're doing great!
thank you ☕🤍
Tutorial perfeito. Agora eu entendo como as cores dos normal maps funcionam (não só para pixel art).
Awasome :o
tysm ☕
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 👍
This remember me the game "CLOUDPUNK" because the atmosphere. Amazing job !! Greetings from Brazil !
valeu é nois que voa
I need so hard this as a background gif
thank you!
☕
Amazing production quality. Good use of your skillset and nice ascetic fit. Makes it clear how much work pixel art is though.
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!
Godlike tutorial you deserve 1m subs
This would be awesome in a game engine
It's in Godot 4
thank you so much!! its such a clear explanation
Как же это круто, вы талантливы ))
You deserve a like for the banger of a music selection alone. 😎👍
This the exact style I want to make my game, I just hope to actually make a game one day....
Really nice video!!!
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
Very neat. I wonder if, since there is logic to the methodology, if it could be scripted to automate the process somewhat.
LOVE IT MAN
(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.
simplesmente sensacional meu mano!!
That's an interesting approach!
i want to play as your robot detective man. i'm sure i'll eventually study this tutorial, too
Thanks for sharing!
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
Is- is this what happens when one uses 100% of their brain...?
Holy shit. Amazing.
POG
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
muito obrigadooo!!!
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!!
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
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?
"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
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
this is why ai cannot be a replacement for human artists. when is it gonna make something like this!?
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
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?