nobuarte
nobuarte
  • 2
  • 38 469
normal map for pixel art
support me 🤍
patreon.com/nobuarte
ko-fi.com/nobuarte
social
nobuarte
bio.link/nobuarte
normal map palette: ko-fi.com/s/f63b770290
video files: ko-fi.com/s/a135ab688a
00:00 - intro
00:11 - explanation about the video and normal map
1:04 - adding the normal map color palette
1:18 - color directions
1:40 - painting the directions
2:40 - painting the entire area to achieve depth
3:12 - directing the normals on the body
4:08 - testing how it will interact with the light
5:03 - details and highlights
6:28 - fixing and adding volume
7:23 - giving volume and finalizing the normal
8:00 - about animation
8:30 - project files and future
music version by @lumena-tan tysm!
www.youtube.com/@lumena-tan
tysm to everyone who helped me by giving their feedback on this video
Переглядів: 37 441

Відео

chilling Breeze bearable with youchilling Breeze bearable with you
chilling Breeze bearable with you
Переглядів 1,1 тис.8 місяців тому
art by nobuarte support me 🤍 patreon.com/nobuarte ko-fi.com/nobuarte music by harris heller paralyze the moment

КОМЕНТАРІ

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

    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.

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

    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.

  • @Mik-kv8xx
    @Mik-kv8xx 2 місяці тому

    Godlike tutorial you deserve 1m subs

  • @21CenturyBreakdownX
    @21CenturyBreakdownX 3 місяці тому

    Very neat. I wonder if, since there is logic to the methodology, if it could be scripted to automate the process somewhat.

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

    Very cool, but doesn't seem like a sustainable workflow for many sprite with animations to boot.

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

    Tutorial perfeito. Agora eu entendo como as cores dos normal maps funcionam (não só para pixel art).

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

    This the exact style I want to make my game, I just hope to actually make a game one day....

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

    oh it's nice to see how someone else thinks through handling restricting the palette of normals :D

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

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

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

    Это выглядит просто охуенно! 🥰

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

    i want to play as your robot detective man. i'm sure i'll eventually study this tutorial, too

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

    simplesmente sensacional meu mano!!

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

    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?

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

    It's incredible how much that does for the lighting even with 2d assets in 3d space. Beautiful.

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

    hand painting a normal map is madness, I love it

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

      but the results are SOOOOOO glorious.

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

    LOVE IT MAN

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

    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?

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

    Как же это круто, вы талантливы ))

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

    this is why ai cannot be a replacement for human artists. when is it gonna make something like this!?

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

    I need so hard this as a background gif

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

    Thanks for sharing!

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

    Nice 👍

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

    POG

  • @06howea1
    @06howea1 3 місяці тому

    cool video

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

    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

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

      thank u 🤍

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

    Might try using Substance painter to help streamline this process! you can paint with height and make even more detailed normals for your artwork!

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

      isn't that a 3d program?

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

      it would be interesting to find a way to make this process easier

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

    Really nice video!!!

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

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

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

    This is SO interesting, and helps me make sense on how this works. Simplifying it to 8-9 colors for pixel art is genius

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

    I have been adding normals to my 3D pixel art game and man it looks so nice

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

      Add a little pizzazz

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

    foda!

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

    this looks like a horrible, time consuming and boring process

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

    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!

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

      Aseprite*

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

    Insanely underrated. Please keep making pixel art tutorials and other videos.

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

      i'll definitely do that, i'm working on the next video, tysm ♥

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

    What a fuckin genious, how you minded for normal map in pixel art? Its adorable ❤

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

      i was inspired years ago by games like The Last Night and Replaced. They blend pixel art with normal maps too. btw TYSM

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

    This would be awesome in a game engine

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

      It's in Godot 4

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

    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.

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

      yeah, I was thinking that too

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

      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

  • @ryo-kai8587
    @ryo-kai8587 3 місяці тому

    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

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

      the work @lumena-tan did on this version is amazing ☕

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

    Damn, really impressive

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

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

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

      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

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

    Amazing production quality. Good use of your skillset and nice ascetic fit. Makes it clear how much work pixel art is though.

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

    thank you so much!! its such a clear explanation

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

    You deserve a like for the banger of a music selection alone. 😎👍

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

    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.

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

      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
      @AllExistence 3 місяці тому

      @@KryyssTV It would be stupid. In 3d you can simply export the normal pass.

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

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

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

      @@AllExistence Not sure if the process of making the sprite sheet will support that but it's worth a look.

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

      @@sampruden6684 No, that's wrong. He painted it by hand, of course he forgot about self shadowing. But, yeah, light will help.

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

    Are you using aseprite importer? To constantly get the results?

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

      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

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

    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

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

      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

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

      @@nobuarte thankyou!! That's really helpful!!

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

    Is- is this what happens when one uses 100% of their brain...?

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

    this is the coolest shit ever

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

    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

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

    Is generating normal maps from height maps possible instead or does it not give good quality for pixel art?

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

      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