IMPROVE Your 2D Game INSTANTLY With Normal Maps!

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 พ.ย. 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 4 หลายเดือนก่อน

      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 4 หลายเดือนก่อน +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

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

  • @JimmyGeschwind
    @JimmyGeschwind 3 หลายเดือนก่อน +4

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

  • @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!

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

  • @okosan858
    @okosan858 4 หลายเดือนก่อน +7

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

  • @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!

  • @Tovvali
    @Tovvali 4 หลายเดือนก่อน +4

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

  • @Toldoven
    @Toldoven หลายเดือนก่อน +1

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

    • @kryptiaxx
      @kryptiaxx หลายเดือนก่อน

      wild to complain about a

    • @catcactus1234
      @catcactus1234 13 วันที่ผ่านมา +1

      @@kryptiaxx

  • @morphingindisguise
    @morphingindisguise 4 หลายเดือนก่อน +1

    Great video!

  • @ggpeachy
    @ggpeachy 4 หลายเดือนก่อน +6

    always great seeing your videos! good job!

    • @BleedingTroll
      @BleedingTroll  4 หลายเดือนก่อน +2

      Glad you like them!

  • @OriFunTime
    @OriFunTime 4 หลายเดือนก่อน +2

    Thanks for the simple tutorial, it really helped me!

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

  • @Noccai
    @Noccai 4 หลายเดือนก่อน +1

    Awesome video

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

  • @kleybook
    @kleybook 4 หลายเดือนก่อน +1

    really helpful!

  • @queblegamedevelopment4143
    @queblegamedevelopment4143 หลายเดือนก่อน

    Great video!
    Subscribed.

  • @maxelized
    @maxelized 4 หลายเดือนก่อน +2

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

  • @jeremy2122
    @jeremy2122 4 หลายเดือนก่อน +3

    Thanks for this beautiful tutorial!

    • @BleedingTroll
      @BleedingTroll  4 หลายเดือนก่อน

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

  • @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 3 หลายเดือนก่อน

      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.

  • @ZB_95
    @ZB_95 4 หลายเดือนก่อน +1

    very cool, +1 new sub

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

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

  • @Ralke1
    @Ralke1 4 หลายเดือนก่อน +1

    a very cool tip.

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

  • @Harshimet
    @Harshimet 4 หลายเดือนก่อน +1

    it s awsome thank you!!!

  • @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*

  • @hasanshafy_
    @hasanshafy_ 2 หลายเดือนก่อน

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

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

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

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

  • @WhoisMyut
    @WhoisMyut 4 หลายเดือนก่อน

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

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

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

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

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

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

  • @AmaroqStarwind
    @AmaroqStarwind 4 หลายเดือนก่อน

    What about height maps?

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

  • @andrewsamoil6259
    @andrewsamoil6259 2 หลายเดือนก่อน

    um actaully... hilarious

  • @Manu-c5q
    @Manu-c5q 24 วันที่ผ่านมา

    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

  • @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 3 หลายเดือนก่อน

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

    • @pixels_per_minute
      @pixels_per_minute หลายเดือนก่อน

      You'd have to animate the normal map as well.

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

  • @Reavenk
    @Reavenk หลายเดือนก่อน

    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.

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

  • @johnjohnson3681
    @johnjohnson3681 4 หลายเดือนก่อน

    waow

  • @chaosmachines934
    @chaosmachines934 4 หลายเดือนก่อน

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

    • @MrOnosa
      @MrOnosa 4 หลายเดือนก่อน

      What are they

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

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

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