IMPROVE Your 2D Game INSTANTLY With Normal Maps!

Поділитися
Вставка
  • Опубліковано 22 лис 2024

КОМЕНТАРІ • 92

  • @BleedingTroll
    @BleedingTroll  4 місяці тому +39

    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.

    • @LM-cc7qz
      @LM-cc7qz 3 місяці тому

      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.

  • @watcx
    @watcx 4 місяці тому +122

    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"

    • @BleedingTroll
      @BleedingTroll  4 місяці тому +25

      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.

    • @Kitty_Cosmic
      @Kitty_Cosmic 4 місяці тому +1

      woah!

  • @FireJojoBoy
    @FireJojoBoy 4 місяці тому +69

    The log actually looked so good with the normal map, it kind of surprised me how easy it was for you spriting it

  • @BudgiePanic
    @BudgiePanic 3 місяці тому +8

    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

  • @JimmyGeschwind
    @JimmyGeschwind 3 місяці тому +4

    I didn't know you could use a Normal map for 2D art! Nice video!

  • @SeanStClair-cr9jl
    @SeanStClair-cr9jl 4 місяці тому +18

    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.

    • @DrEnzyme
      @DrEnzyme 4 місяці тому +2

      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.

    • @SeanStClair-cr9jl
      @SeanStClair-cr9jl 4 місяці тому +2

      @@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?

  • @ViktorSarge
    @ViktorSarge 4 місяці тому +2

    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.

  • @psychicchicken5263
    @psychicchicken5263 4 місяці тому +4

    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!

  • @OriFunTime
    @OriFunTime 4 місяці тому +2

    Thanks for the simple tutorial, it really helped me!

  • @jeremy2122
    @jeremy2122 4 місяці тому +3

    Thanks for this beautiful tutorial!

    • @BleedingTroll
      @BleedingTroll  4 місяці тому

      Thank you for watching hopefully I can make more interesting tutorials soon.

  • @shablam0
    @shablam0 4 місяці тому +1

    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!

  • @okay_cam
    @okay_cam 4 місяці тому +1

    Really great video man! I always wondered how to apply normal maps to pixel art, I didn't realise it was this easy!

  • @ggpeachy
    @ggpeachy 4 місяці тому +6

    always great seeing your videos! good job!

  • @morphingindisguise
    @morphingindisguise 3 місяці тому +1

    Great video!

  • @okosan858
    @okosan858 4 місяці тому +7

    Ayyyy, long time no see!! I've definitely missed your presence on here!

  • @Tovvali
    @Tovvali 4 місяці тому +4

    I’m always looking for new tip and tricks thanks for the new upload!!

  • @kleybook
    @kleybook 4 місяці тому +1

    really helpful!

  • @cheesybrik
    @cheesybrik 4 місяці тому +1

    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.

  • @Noccai
    @Noccai 4 місяці тому +1

    Awesome video

  • @queblegamedevelopment4143
    @queblegamedevelopment4143 Місяць тому

    Great video!
    Subscribed.

  • @Cnastret
    @Cnastret 4 місяці тому

    Cool. I have actually never seen normal maps used for 2D games

  • @c0t1
    @c0t1 2 місяці тому

    Great and helpful video. Looking forward to more like it. Sub'ed.

  • @raidev_
    @raidev_ 4 місяці тому +2

    This looks pretty cool, but I can't imagine doing this for every single animation frame on my characters

    • @BleedingTroll
      @BleedingTroll  4 місяці тому +1

      @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.

  • @savannasims816
    @savannasims816 4 місяці тому +3

    Do you think you'll do more tutorials in the future?? Im definitely invested in seeing what else youre able to share.

    • @BleedingTroll
      @BleedingTroll  4 місяці тому +1

      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.

  • @ZB_95
    @ZB_95 4 місяці тому +1

    very cool, +1 new sub

  • @Harshimet
    @Harshimet 4 місяці тому +1

    it s awsome thank you!!!

  • @AstroTechGuy
    @AstroTechGuy 4 місяці тому +1

    There is also a tool named laigter, which can be helpful for normal-maps. Not perfect, but worth trying out.

    • @hiiambarney4489
      @hiiambarney4489 2 місяці тому

      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.

  • @Toldoven
    @Toldoven Місяць тому +1

    "INSTANTLY" is a strong word for having to manually draw a normal map for every single texture in the game lol

  • @maxelized
    @maxelized 4 місяці тому +2

    I would not say instantly, but normal map lighting looks absolutely great

  • @Ralke1
    @Ralke1 4 місяці тому +1

    a very cool tip.

  • @hasanshafy_
    @hasanshafy_ 2 місяці тому

    Hand painting gives better results, although it's time-consuming.

  • @keithwinget6521
    @keithwinget6521 3 місяці тому +1

    Do the normal maps work properly when rotating your sprite by default, or is there some setting to adjust for that?

  • @CathodeRayKobold
    @CathodeRayKobold 4 місяці тому

    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.

  • @WhoisMyut
    @WhoisMyut 3 місяці тому

    i need to stop watching game dev tutorials with no intention of making a game. good video 👍

  • @kryptiaxx
    @kryptiaxx Місяць тому

    hey! couldn’t help but see one of your files said [college name] - do you guys host game jams there? I’m a part of a Game Dev club at another close college and was wondering haha

  • @LaynaStambaugh
    @LaynaStambaugh 4 місяці тому

    "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*

  • @lilboigreasy
    @lilboigreasy 4 місяці тому +5

    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.

  • @andrewsamoil6259
    @andrewsamoil6259 2 місяці тому

    um actaully... hilarious

  • @thiagocampos5162
    @thiagocampos5162 2 місяці тому

    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)

    • @BleedingTroll
      @BleedingTroll  2 місяці тому +1

      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.

  • @fly7188
    @fly7188 4 місяці тому

    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.

  • @CyanFlake
    @CyanFlake 4 місяці тому

    How would you do this for animated sprites? Or even 2d animated png style animated objects/characters such as in Cult of Lamb?

    • @BleedingTroll
      @BleedingTroll  4 місяці тому

      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.

  • @AmaroqStarwind
    @AmaroqStarwind 3 місяці тому

    What about height maps?

  • @lunastifaliamusic
    @lunastifaliamusic 4 місяці тому

    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)

    • @BleedingTroll
      @BleedingTroll  4 місяці тому

      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.

  • @Reavenk
    @Reavenk 29 днів тому

    Love how you skipped the clickbait and got straight to the point that it happens "INSTANTLY". It's practically free, with no time and labor commitment, and no overhead. No technical intuition needs to be learned, no commitment to creating an entirely new channel of assets, just INSTANTLY.

  • @lukabrasi001
    @lukabrasi001 4 місяці тому

    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

  • @FortbloxNET
    @FortbloxNET 4 місяці тому

    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?

    • @FortbloxNET
      @FortbloxNET 4 місяці тому

      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?

    • @adora_was_taken
      @adora_was_taken 4 місяці тому

      generally with this you'd just want to draw some neutral detail shading, no directional lighting.

  • @kelvin4593
    @kelvin4593 2 місяці тому

    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.

  • @johnjohnson3681
    @johnjohnson3681 4 місяці тому

    waow

  • @SaturnoEdu
    @SaturnoEdu 3 місяці тому

    is there any way to make this work with an tileset?

    • @BleedingTroll
      @BleedingTroll  3 місяці тому +1

      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

  • @purplelord8531
    @purplelord8531 4 місяці тому

    what happens when the sprite rotates? thanks!

    • @BleedingTroll
      @BleedingTroll  4 місяці тому +1

      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.

    • @purplelord8531
      @purplelord8531 4 місяці тому

      @@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?

  • @user-ky2ui5hl8s
    @user-ky2ui5hl8s 2 місяці тому

    what if i want to add normal maps to a sprite with animations

  • @davidbarkhausen7739
    @davidbarkhausen7739 4 місяці тому

    can this be done with sprite3D?

    • @BleedingTroll
      @BleedingTroll  4 місяці тому

      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.

  • @Manu-c5q
    @Manu-c5q 20 днів тому

    Death Road to Canada

  • @nohnohnoh
    @nohnohnoh 4 місяці тому +1

    um there are free software and asprite scrips who can convert you image into a normal map

    • @okay_cam
      @okay_cam 4 місяці тому +2

      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

  • @chaosmachines934
    @chaosmachines934 4 місяці тому

    there are free software who can just convert an image into a normal map

    • @MrOnosa
      @MrOnosa 3 місяці тому

      What are they

  • @gamesthatiplay9083
    @gamesthatiplay9083 4 місяці тому

    At this point, 2D in general feels like shovelware.

    • @BleedingTroll
      @BleedingTroll  4 місяці тому

      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.

  • @costelinha1867
    @costelinha1867 4 місяці тому +1

    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.)

    • @BleedingTroll
      @BleedingTroll  4 місяці тому +1

      @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.

  • @ohiasdxfcghbljokasdjhnfvaw4ehr
    @ohiasdxfcghbljokasdjhnfvaw4ehr 4 місяці тому +1

    an actual artist would never use this effect, it's ugly

    • @BeingSarahJean
      @BeingSarahJean 4 місяці тому +9

      aw poor baby 😢 not all “actual artists” use the same effects. people learn and adapt.

    • @okay_cam
      @okay_cam 4 місяці тому +5

      katana zero is a popular example of a pixel art game that uses normal maps effectively

    • @costelinha1867
      @costelinha1867 4 місяці тому +5

      First off, who do you think you are to gatekeep art, second, artists have and DO use this, it depends on their art style.

    • @tinyeragon7132
      @tinyeragon7132 4 місяці тому +3

      dead cells uses this technique, interestingly enough

    • @SylvanFeanturi
      @SylvanFeanturi 4 місяці тому

      @@tinyeragon7132 DeadCell's characters are 3D with post-process to make them look like pixelated sprite.

  • @tjazpirnar
    @tjazpirnar 4 місяці тому

    Materialize - by Bounding Box Software. You're welcome

    • @BleedingTroll
      @BleedingTroll  4 місяці тому +1

      @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.