I Try to Explain Sub Pixels in Animation

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

КОМЕНТАРІ • 342

  • @gabeskai
    @gabeskai Рік тому +1130

    90% sure UA-cam only recommended this to me because eevee was in it, but I have to say that was a wonderful explanation. This legitimately is tempting me to give pixel art a try

    • @nootall
      @nootall  Рік тому +81

      Lol, big up UA-cam algorithm.
      Thanks for the feedback!

    • @voxelheart
      @voxelheart Рік тому +12

      ​@nootall likewise, UA-cam recommended me this video because I was watching pokemon mods for minecraft, but as someone who has dabbled in Aesprite and pixel art before, this was a really nice watch!

    • @RaiuTheEevee
      @RaiuTheEevee Рік тому +3

      It's both for me. I'm an aspiring pixel artist, and I bet you can guess what my favorite Pokémon is, lol.

    • @psychicchicken5263
      @psychicchicken5263 Рік тому +2

      Same, except I actually do make pixel art, so it was worth watching the whole thing anyway lol

    • @bruhnah4life
      @bruhnah4life Рік тому +2

      For me i think its because im trying to make a pixel game and want to do the animation myself (its very hard)☠️

  • @leonardm490
    @leonardm490 Рік тому +749

    "This is something that's very hard for me to explain"
    Proceeds to explain and illustrate in the clearest way possible.
    Great video!

    • @nootall
      @nootall  Рік тому +70

      Ahaha, thanks, I'm glad to hear it👍
      I assure you that the raw footage would demonstrate just how much I struggled with this. We're talking 40 minutes of cut out ramblings and stuttering lol

    • @leonardm490
      @leonardm490 Рік тому +22

      @@nootall I believe it was ford that famously wrote "sorry I didn't have enough time to write you a shorter letter".
      It just goes to show how skilled you are and effort you put to cut those 40 minutes into this great video.
      Also yeah I can relate to the rambling part haha

  • @0cellusDS
    @0cellusDS Рік тому +528

    Hey guys! Did you know that when it comes to idling animations via subpixels, Vaporeon is the most compatible Pokémon? Not only does it feature many contrasting colours like Blue, Yellow and White which can blend into each other, it's impressive body shape and smooth shape makes it very expressive even while just standing still.

    • @nootall
      @nootall  Рік тому +136

      This sounds like copy pasta but I'm not sure

    • @FzeroVaporeon
      @FzeroVaporeon Рік тому +65

      ​@@nootallit's a copy pasta about bestiality originally. Here instead have one about science
      Sooooooooo I was playing Pokemon blue version the other day and was fighting one of the lesser trainers in the poison ninja gym, I just beat his arbok with mew's psychic (I named mew lil giegue), and then he sends out Sandslash, so I send out my Vaporeon, now the reason I did this is because on a chemical level, vaporeon is cooler than sandslash. Allow me to explain the science behind my hypothesis. In chemistry specific heat is the amount of energy required for one kilogram of a substance to be raised one degree Celsius. Now water's specific heat requires that it absorbs about 4200 joules or one kilocalorie(one nutritional Calorie) for one kilogram of water to be raised one degree Celsius, now sand is a heterogeneous mixture, however around %80 of sand is composed of the element silicon, silicon has a specific heat of 710. So it takes waayyy more energy to heat water to the same temperature as sand, water is also a liquid on most places on earth, which means its particles can move around and disperse energy more easily to cool down faster. This is why sand at the beach is hotter and the water is cooler. So basically vaporeon is made of water and everyone knows it so vaporeon is like water, and sandslash has sand in the name, and it is also ground type, the ground is sometimes made out of sand in some areas, also Sandslash can learn the move slash, and also sand attack, so it is safe to assume that to the same extent that Sandslash can slash, that it is also sand, so we can say that Sandslash is like sand. Putting this information together we can deduce that vaporeon is like water and sandslash is like sand, and by extension, that vaporeon is cooler than sandslash. Now Pokemon is sometimes like an anime sometimes, but in this particular battle, I had battle animations turned on, the root word of anime is animation, so at this particular moment Pokemon was like anime and in anime, mostly the cooler guys win. This is what I was thinking in my head when I switched from my mew to my vaporeon against Sandslash of the enemy. The enemy Sandslash got one free turn because I used my turn to switch, so sandslash gets like a bonus turn, and it used a slash attack which has a higher critical chance, and! It got a critical hit on my vaporeon! It wasn't good but it took like half of its vitality HP. Next turn! My Vaporeon out-fasted the enemy Sandslash, so it gets to first this time, I told it to use surf because surf is like the best water move probably. BUT THE SANDSLASH SURVIVED BY A SLIVER! SANDSLASH TURN IT IS NOW!! CRITICAL HIT SLASH AGAIN!!! VAPREON IS UNCONSCIOUS NOW!!!! It was rediculius because of all the science and logic I just used to prove beforehand why I should have one. However looking back now there might have been 2 reasons number 1 is even though in the animes the cooler guys win, it is known that guys with yellow hair also win a lot in the animes, needlessly to say the power of anime betrayed me . Sandslash has yellow hair I think Soo yeah. Number second reason is my vaporeon was level 27 but the Sandslash was level 33, in the Pokedex, Sandshrew, which is baby Sandslash is the 27th Pokemon numerically and numerically Eevee is number 133, but which is 33 plus 100. Now what is special about 100 is that that is the number of Voltorb, which is electrical, what is also electrical is the Pokemon "charjabug" introduced in Pokemon sun and moon, in a week which is 7 days, and in seven days the sun comes and goes seven times so that's why we call Pokemon from that game "gen 7 Pokemon" so anyways charjabug knows how to use the "volt switch" technique which attacks but also switches to a different pokemon, so if we cancel out the 100 of Voltorb out of 133 of Eevee, we get 33 which is the level of the enemy Sandslash, and my VAPREON was level 27 which is the number of Sandshrew, so that plus Voltorb's relation to electricity and by extension charjabug and its "volt switch" technique we can hypothesize that the "coolness" got mixed around especially because vaporeon is from Eevee, which has unstable DNA, and it was sent out just after mew, which has all the Pokemon DNA inside it, so it becomes obvious that this is what happened, and that the Sandslash I was fighting was also super Saiyan Naruto from the animes, But really I should have won

    • @pilchardheck
      @pilchardheck Рік тому +42

      @@nootallyou do NOT want to know

    • @nootall
      @nootall  Рік тому +76

      ​@@FzeroVaporeondear lord

    • @ButterfreeYummy
      @ButterfreeYummy Рік тому +4

  • @chizuru41
    @chizuru41 Рік тому +438

    Thank you so much for this video! I do animations on a 16x16 and 32x32 px canvas and this will help a lot of smoothing the animations in a really small canvas! Just understanding the simple idea makes this so much easier to learn!

    • @nootall
      @nootall  Рік тому +28

      Hey that's awesome, I'm glad to hear that 👍
      Thanks for sharing

    • @chizuru41
      @chizuru41 Рік тому +14

      @@nootall I didn't even know this exist in the first place! I know a lot about rules of animations and stuff but on pixel art it still feels choppy. But with this method I can see how I can make smoother animations!

    • @nootall
      @nootall  Рік тому +15

      @@chizuru41 Yeah it's definitely one of those more obscure techniques which wouldn't really be seen outside the realm of pixel art lol
      Hope it helps with choppiness!

  • @generalsub7
    @generalsub7 Рік тому +148

    The illusion of movement and color theory. Great video 🎉

    • @nootall
      @nootall  Рік тому +12

      Thank ya - glad you think so 👍

  • @ledemduso5827
    @ledemduso5827 Рік тому +98

    This is the first time I've come into contact with the process of creating pixel art and I now know what sub pixeling is. Just saying. Explained perfectly.
    Also: Stop it, UA-cam! I have enough hobbies that are just lying around and waiting for me to maybe pick them back up at some point!

  • @theoryoftheinnocent
    @theoryoftheinnocent 9 місяців тому +2

    Sounds pretty reminiscent of in-between frames for other animation styles. You've got the starting position and the ending position kinda like key frames, and then the use of coloration and pixels placed where they normally wouldn't be to help convey movement.
    Very nice video. Cool to learn something new about pixel art, even as someone who doesn't make any

  • @lightning4743
    @lightning4743 Рік тому +22

    I know for a fact the only reason UA-cam recommended this to me was bc it has Pokémon it in but this was actually a pretty cool tutorial and I never actually knew what anti-aliasing does, I always just turn it off in any game setting but I might have to check now (note: eeveeloutions are too cute)

    • @webpombo7765
      @webpombo7765 Рік тому +1

      Antialiasing generally makes things look smoother, if you notice some far away objects looking way too pixelated for your liking in a game, turn on antialiasing

  • @UliTroyo
    @UliTroyo Рік тому +102

    Pixel art is so meticulous. It looks great, but making tiny mosaics is also so much work!

    • @nootall
      @nootall  Рік тому +28

      It's funny you say that, the whole thing about pixel art that appeals to me is how imprecise it is. As someone with terrible dexterity, it's quite nice to not have to focus so much on the stroke of a pen.

    • @lucio-ohs8828
      @lucio-ohs8828 Рік тому +2

      ⁠@@nootallpixel art has its own set of skills, even if it doesn’t require the dexterity of typical high resolution/traditional art it’s still pretty hard to do well

  • @SnoFitzroy
    @SnoFitzroy Рік тому +103

    I love it when people eloquently explain something with accurate vocabulary. 99% of the time, "antialiasing" specifically means transparency or automated blending (see also: scaling in photoshop) but people who are not pixel artists constantly use it to refer to what you've called "Sub Pixelling," here, and I feel your term is far more accurate than calling it "antialiasing" because this technique is quite literally creating the appearance of more pixels than what is physically present.

    • @Nordlys
      @Nordlys Рік тому +16

      I think this is more accurately described as anti-aliasing anyway. It uses full pixels and blends colours to soften edges so the perceived lines don't adhere to each pixel.
      'Subpixel' sounds wrong to me since it is a term that describes a smaller element than the pixel (the individual RGB elements in panels). Subpixel rendering is kinda like anti-aliasing, but requires knowledge of the layout of subpixels which can vary between panels. It blends the RGB across pixels to create a 'new perceived pixel' between the two. You light up specific parts of two pixels: [RGB] [RGB] to get: RG[B RG]B.

    • @Biergartenparadoxon
      @Biergartenparadoxon Рік тому +12

      Technically speaking, "antialiasing" is the correct name. And no, antialiasing is not about transparency and blending. It is about "high frequency" information sampled on a lower frequency. Then information can alias as some other information. For example a diagonal line aliasing as a staircase. Antialiasing is done (in most cases) by applying a low-pass filter (aka smoothing in graphics but aliasing is a thing in sound and other stuff, too).
      Subpixeling is completly false since that is the thing @Nordlys explained. Thats the reason why sometimes a screenshot from text is shown with colored shadows on other devices or zoom-levels

    • @Squant
      @Squant Рік тому

      @@Biergartenparadoxon Personally, I think it has more in common with squashing & stretching techniques in traditional animation, since the purpose of antialiasing is to obscure the existence of individual pixels and this very much is not.

    • @intron9
      @intron9 11 місяців тому

      Well, to be precise, this is not about "subpixels". That term is used to refer to the individual R,G and B lights inside a pixel, in font rendering software like ClearType. This is simulated antialiasing.

  • @Yous0147
    @Yous0147 Рік тому +13

    Awesome video, nicely explained. As an aside "dark orange" is really just brown, which blew my mind when I was told this so I hope it gives you a small epiphany too, at least as a thanks for this.

    • @nootall
      @nootall  Рік тому +5

      Ahaha thanks - you have no idea how many times I was yelling "just call it brown!" while editing this lol.

  • @smile--
    @smile-- Рік тому +80

    A lot of people underestimitate how complicated pixel art is

  • @zeonino
    @zeonino Рік тому +13

    Nice video! Blending's a good word! The process of a whole of trying to blend from two "sharp" points like two different colors is called "interpolation" if you want to look for more info on it! Interpolation, in general is "filling in the steps to get from point A to point B". For pixel art, "color interpolation" is when you're smoothing out the transition from one color to another. Anti-aliasing is a bit of both, since pixels move around, you've got to blend the colors between them. There's a lot of math (and other explanations) out there on it if that sounds at all interesting!

  • @emmyuuSan
    @emmyuuSan Рік тому +24

    I actually tried doing pixel art animation just the other day and I ended up hating it, but now I know why! I’ll be using this method for my future work, thank you so much for the video!

    • @nootall
      @nootall  Рік тому +2

      You're very welcome, glad I could help 👍

  • @StandAloneSoul
    @StandAloneSoul Рік тому +3

    Omg! My artistry friend tried to explain this to me the other day. I think i get it! Now I can impress them with more capability of engaging in their favorite topic (animation). Thanks. :)

    • @nootall
      @nootall  Рік тому

      Great! Have fun flexing :)

  • @SMCwasTaken
    @SMCwasTaken Рік тому +1

    So this is what the DS Mario and Luigi games used for their sprites

  • @psychicchicken5263
    @psychicchicken5263 Рік тому +22

    I already use this a lot, but I think you explained it pretty well. Also, Flareon's right eye looks a little floppy imo, eye movement can be difficult to animate in pixel art.

  • @NotserpHrrib
    @NotserpHrrib Рік тому +6

    Great video! I’d never really thought about using anti-aliasing to make these smaller animations look less choppy, I’m eager to give it a try!

  • @jonathant6382
    @jonathant6382 11 місяців тому

    recently started getting into pixelart with aseprite and this makes so much sense. Could never figure out why smaller-scale animations always looked so choppy but this makes so much sense!

  • @Meteorite_Shower
    @Meteorite_Shower Рік тому +2

    This was super interesting! I've played about with sprites in the past, very rarely animated ones, but this was a concept I hadn't considered, and it's definitely something I'd like to keep in mind! Great job explaining it too.

  • @barbalalaika
    @barbalalaika Рік тому +1

    I don't do art. I think I got this recommended because I watch Pokemon videos. But I just need to say that I LOVE how you explained the process!! It was so easy to follow. You took your time with us, you went into literal detail with examples, and this warmed my heart because I come from a programming background where people just entitely forget how much of a newbie one can get. Never lose this. We need more 5-minute explanations of basic concepts!

    • @nootall
      @nootall  Рік тому

      Ah this comment was really nice to read, thank you! I'm glad to hear I didn't make things too complicated.
      And I completely agree with you on the whole programming thing (I have a dev background also). Experts can forget just how much beginners don't understand and end up overwhelming them.

  • @billord
    @billord Рік тому +4

    I think I've just learnt something that will stick in my brain forever. That was such a good explanation!

  • @geburu
    @geburu Рік тому +5

    No issues with the explanation! Another banger of a video 🤘🏼

    • @nootall
      @nootall  Рік тому +1

      Haha thanks for the reassurance brother 🙏

  • @SkaloTV
    @SkaloTV Рік тому

    I know absolutely nothing about any type of art but this video was so intriguing to me. Maybe cuz of the eevees, definitely cuz of you! I now have a deeper appreciation for pixel art, thank you and great video!

    • @nootall
      @nootall  Рік тому

      Hey thanks man, I'm glad to hear you found it interesting 👍

  • @dracozeon_
    @dracozeon_ Рік тому

    I could literally listen to you talk about anything for hours with that soft voice

  • @sagetarus1
    @sagetarus1 Рік тому +2

    This was a great explanation.
    I guess to give my student explanation vs teacher, it's kind of putting the animation in slow motion. You see details like motion blur (the blending) and phantom images (the pixels that will be removed, but stick around for now), and the whole thing takes longer than just 1 frame (in the slow motion frame of reference). I like yours a lot better though, really simple :)

  • @HaveNoLife
    @HaveNoLife Рік тому

    I got into pixel art via an old genre of UA-cam videos of mixing Pokemon sprites, long before I was ever in high school, I must have been around 8 or 9 at the time.
    I moved onto traditional art in high school by which point I had become fairly confident with desk materials, a lot of adults tried guiding me into an art career that I wasn't too big on pursuing. I was decent for someone without any knowledge or training in anything related to art but gave up before I got consistent or good.
    Fast forward to about five years ago and I decided to make a handful of Fakemon in a pixel art style and to my surprise they were convincing. I was proud of myself, it was the first time I had done anything artistic in that style for over a decade.
    Fast forward two years and I hadn't done anything since, I overheard a few friends complaining about how hard game dev was and how they could never pursue a career, particularly about how much time and talent it takes around pixel art.
    I was really mad hearing them say that so I bought the cheapest pixel editor and in about a day or two I pumped out some sprite animations and messaged them "SEE, LOOK HOW EASY IT IS, NOW GO DO IT YOURSELF".
    It was a small robot character with a cloak and astronaut helmet, I had done a few running cycles, idle and jumping animations.
    I decided to have his head act as a visual cue for the weight of the character, his body leaned into the choppy animation typically associated with pixel art but his cloak flowed smooth with sub pixel animation that made it look almost 3D.
    The animations showed how the gameplay was supposed to feel, floaty but with a decent amount of control and weight, the cape and silhouette selling the motion and giving great visual cues.
    I had no concept of sub pixel animation, all I knew was "cape = flowy" and I'd describe my process as pushing pixels around.
    I posted it online and got one comment "Wow, this sub-pixel animation is really good" and my ego wouldn't allow me to take the compliment seriously.
    Like when adults used to have opinions and make decisions about my talents when I was younger I didn't like that kind of attention from my art.
    I still don't know what kind of attention I want from my creative outlets, I know I want to make things like the things I think are cool and I want to make things with other people and for others to think the stuff I make is cool and that makes them want to go and make more things like the stuff I like.
    But the attention on me and my work just doesn't sit right with me.
    I'm tired af, good video

  • @adissentingopinion848
    @adissentingopinion848 11 місяців тому

    Each pixel is a tiny, tiny camera that captures all of the detail in a given area on your screen. If a black "thing" like an outline is meant to slowly pass through it, it will capture the blackness but not all of it at the same time. That blackness is mixed with whatever color the background is and then your get your blend.

  • @AndrewRKenny
    @AndrewRKenny Рік тому

    Very cool video and great explanation. I had some vague idea of what this might be about but I think you did quite a fine job of articulating it! I figured there might be some indications of like interstitial changes in lighting, but allowing the darker pixel on Eevee's leg to stick around for that one extra frame wasn't something I had ever thought about. Whenever I see people explaining these sorts of universal techniques in an art medium, it always makes me wonder who "figured it out" first.

  • @daphneschoenmaker8038
    @daphneschoenmaker8038 Рік тому

    First time in a loong time I actually hear useful pixel advice instead of the same tips for the 100 time, good job and thank you very much :)

    • @nootall
      @nootall  Рік тому

      Hahaha, thank you - I'm glad to hear it

  • @Louiessss
    @Louiessss Рік тому

    This technology is rarely recognized by pixel artists and it's great to see videos talking about those depth technologies. The Metal Slug series uses these technics a lot in their animation and is a great reference to learn and practice with.

  • @segrald
    @segrald Рік тому

    Well, that was eye-opening; it's really well explained. And those eevee-animations are lit!

    • @nootall
      @nootall  11 місяців тому

      Thanks! Glad to hear it

  • @ferrosplice8460
    @ferrosplice8460 Рік тому +4

    Such a high quality video. Keep this up and you'll blow up forsure

    • @nootall
      @nootall  Рік тому +3

      Thanks, I appreciate the kind words 🙏

  • @setpimus
    @setpimus Рік тому +1

    I absolutely did NOT expect to see Coromon in a video that randomly popped up on my feed about pixel animation 😂

  • @DefNotASpectre
    @DefNotASpectre Рік тому

    This is actually really helpful for pixel art in general, not just animation-

  • @flameduel
    @flameduel Рік тому

    IDK why UA-cam recommended this video, but now I know what Sub Pixeling is. It's giving me the impression of something *similar* to smear frames, but yea. Very good explanation, quick to the point, and you bring up the valid point of the difficulty of explaining what it is without just showing it in action ^^

    • @nootall
      @nootall  Рік тому +1

      Yep definitely a similar thing to smear frames! And for sure, without an example piece of work, explaining these kinds of concepts can feel pretty fruitless lol.

  • @erisuvt
    @erisuvt Рік тому +1

    Glad I stumbled upon this video, thank you UA-cam!
    I work with 32x32 and 64x64 sprites for my Pokémon Mystery Dungeon passion project and this will definitely be fun and useful to play around with!

    • @nootall
      @nootall  Рік тому

      Ahhh pmd, explorers of sky was my damn childhood 🥲
      By passion project, Is it a fan game or something else? (If I can ask)

  • @thegamedevcave
    @thegamedevcave Рік тому

    great quick overview of a very important technique!

  • @TacoCannon
    @TacoCannon Рік тому

    As hobby pixel artist this is a great video for me to watch, because although I already did this to an extent before, it helps to have a name and understand how it functions in a more technical way.

    • @nootall
      @nootall  Рік тому

      Awesome - glad to hear it was still useful in some way even though you're familiar with it 👍

  • @HaniiPuppy
    @HaniiPuppy Рік тому +1

    That's neat and all, but that's not what sub-pixels are, especially in relation to anti-aliasing. This is just using regular anti-aliasing selectively to achieve an effect.
    Pixels on a monitor are made up of three sub-pixels; one red, one green, and one blue. On a normal monitor, they're arranged as three vertical bands. (Green to the left, red in the centre, and blue on the right) The colour of a specific pixel is produced by varying the light-levels of each of these three bands. (e.g. to colour a pixel magenta, you'd have red and blue at 100% and green at 0%)
    Sub-pixelling is choosing colours to exploit the different horizontal positions of each vertical bar, to have a finer level of control horizontally than would be available if only working in whole pixels.This is where I thought you were going with this.
    e.g. to move a single pixel one pixel to the right in three steps:
    - You'd start off with your black pixel and white pixel
    - You'd change the black pixel to red (the left-most band is now lit, indicating the black thing isn't there) and the white pixel to cyan. (the left-most band is now unlit, indicating that the black thing is there.)
    - You'd change the black pixel to yellow (left/red and centre/green lit, blue unlit) and the white pixel to blue (left/red and centre/green unlit, blue lit)
    - You'd change the black pixel all-the-way white, and the white pixel all-the-way black.
    You can get finer perceived control through using the light levels of each individual subpixel as well. (That is, regular anti-aliasing on a subpixel level)
    This is mostly relevant in text rendering. Wikipedia has a page on "Subpixel Rendering" if you want to read more.

  • @quotetry8998
    @quotetry8998 Рік тому

    This video was SO HELPFUL!
    I've been working on pixel art sprites in 64x64 with Photoshop, sometimes higher.
    Viewed a lotta tutorials and such, but I never figured out how to get smoother anims with only 64 pixels of space to work with. Led to a lot of weird unecessary leg pixel movements and the like.
    This illusory subpixeling will help me a ton out in the future! Once again, _thank you so much for this!_

    • @nootall
      @nootall  Рік тому +1

      Hey no problem, glad to hear it was helpful :)
      If you're still having struggles with that, feel free to shoot me an email/DM and I can try to help 👍

    • @quotetry8998
      @quotetry8998 Рік тому

      @@nootall Appreciative of the gesture, friend! But I think now that I'm getting more of a hang on the practice (not perfect but decent enough) I'll be fine on my own. Thanks again for the offer, though!

    • @nootall
      @nootall  Рік тому

      @quotetry8998 no worries, I'm glad to hear it 👍

  • @gdmathguy
    @gdmathguy Рік тому

    Also, subpixels in gameplay are a result of a coordinate being able to have a value between 2 pixels, or more accurate between 2 predetermined columns and rows on the grid. To not draw something like that, games like celeste use a simple function like floor(x) to make it display on a normal pixel

  • @zeeraknasir6184
    @zeeraknasir6184 Рік тому

    As a person who has exactly 0 interest in pixel art, this was an amazing and informative video. Thankyou for existing my good sir.

    • @nootall
      @nootall  Рік тому

      Hey thank you for you comment sir 🍷, I'm glad to hear you think so!

  • @eythra1873
    @eythra1873 Рік тому +2

    I don't do pixel art nor animations but for some reason this was incredibly entertaining and I think I got the gist
    Also your art looks great

    • @nootall
      @nootall  Рік тому

      Ay that's great, glad you enjoyed it either way 👍

  • @thegoldenpixell
    @thegoldenpixell Рік тому +3

    Your channel is so underrated

    • @nootall
      @nootall  Рік тому

      Hey thanks- I appreciate it 👍

  • @illybee3
    @illybee3 Рік тому

    as someone who knows very little about pixel art animation, this explanation was perfectly understandable to me! very interesting concept, i love seeing how pixel artists work around the hurdles of a small canvas

    • @nootall
      @nootall  Рік тому +1

      Awesome I'm glad to hear it :)

  • @Absbor
    @Absbor Рік тому

    good explanation. i sprite (mini sprites like in your video shown) and draw alot. i mainly draw tho, so the concept of shading and highlighting came in handy when I tried out to pixel/sprite. this is exactly how you put in the depth into pixels and sprites. you can't just darkened it with a tool or purple everything it out and then blend it for a comic. the pixels are just too small. you have to use a combination between the base color and the outline.
    your video is the next step - a very important step to animating them.
    thank you. i'll keep this in mind, if i ever want to animate them (aka get an animation program fitting for my screen). i was only thinking of smoothing the frames out, instead of shading the entire being. meaning, I wanted to try to do a flat animation first. but I think in this case, i'd be more work instead.

  • @Metrocysh
    @Metrocysh Рік тому

    I had a rough idea about this! But it was nice seeing a video popping out there :) Great eeveelution animations! They really work greatly!
    I realized I never quite used subpixeling because I never got to work on a smooth and slow animation, but now I kinda want to try it outt
    Also heck yeah that animator is insane!

    • @nootall
      @nootall  Рік тому

      Thank you! And yeah I'd definitely recommend trying it out if the situation calls for it 👍
      One think I might add is that it can also be used for fast movements, for example, when it's slowing down towards the end or settling into a new position, you can use subpixeling as a way to add some ease-out or ease-in on a movement.

    • @Metrocysh
      @Metrocysh Рік тому

      @@nootall Yeah, I thought about it for easing! Though it heavily depends on the style I'm going for haha

  • @zicrog7701
    @zicrog7701 Рік тому

    Dope. Makes perfect sense to me basically add a frame with a pixel that is the child of the areas around it

    • @nootall
      @nootall  Рік тому

      Certainly a unique way of putting it, but I can see what you're saying and yep I think that works!

  • @pigcatapult
    @pigcatapult Рік тому

    I sort of knew about subpixeling, but now I feel like I understand it a lot better

  • @aspyse
    @aspyse Рік тому

    Love the explanation, though I really wanted to see it illustrated with the circle example you started with.

  • @DylanTheEye
    @DylanTheEye Рік тому +2

    thank you so much you explained it really well

    • @nootall
      @nootall  Рік тому

      No problem - I'm glad to hear it!

  • @DieToDice
    @DieToDice Рік тому

    I had a totally different idea for what sub pixeling meant when I clicked and now I have an insane new appreciation for pixel animations

    • @nootall
      @nootall  Рік тому

      Ay I'm glad to hear it :)

  • @leondumler8736
    @leondumler8736 Рік тому

    Honestly i always thought of it as layers overlapping as in your example with eevee's leg. good explanation

  • @ThatGamerDude9000
    @ThatGamerDude9000 Рік тому +4

    Maybe I am crazy, but I feel like "sub pixelling" and "half pixels" aren't very descriptive terms. What you said basically sounds like mult manual interpolation, but on the small scale. It sounds like the pixel art equivalent of smear frames or in betweens. You have two key frames that exist for longer frame periods, then you have poses in between that transition between the key frames for shorter periods of time.

    • @geronimonm823
      @geronimonm823 Рік тому +1

      There is smear frames in pixel art but it's a different thing. This is more like a technique for a certain aspect of smear frames.
      I'm not quite certain that I know what mult manual interpolation means but if it means what I think it means then it's a pretty good description. But nobody wants to say "mult manual interpolation" and "sub pixelling" while not super accurate gets the point across in a quite "art friendly" way.

    • @ThatGamerDude9000
      @ThatGamerDude9000 Рік тому +1

      @@geronimonm823 inserting multiple frames manually as mid points between poses (rather than having an algorithm mathematically evaluate in between frames through averages) Hypothetically the more midpoints you insert into the same span of time, the smoother the animation.
      I don't like the word sub pixelling because it seems to imply that there are building blocks smaller than pixels, when pixels are the base unit.

    • @geronimonm823
      @geronimonm823 Рік тому

      @@ThatGamerDude9000 That's what I thought it meant, thanks.
      Maybe in a more science oriented environment "sub pixelling" could be interpreted as such. But because this is a more artistic skill, names are more lax, they sound "artsy". Take "chiaroscuro" for example. You could call it something along the lines of "high contrast shading" but that doesn't sound very "artsy" and making it Italian sounds cooler and more "cultured".
      You also have to take into account that your average pixel artist won't know what the fuck interpolation means. On the other hand "sub pixelling" is very easy to remember (With "sub" being a common suffix, and every pixel artist presumably being able to understand or at the very least infer the meaning of "pixelling") and, while not very descriptive or immediately apparent, a short, simple explanation of the concept should be enough to connect the dots. "Sub pixelling" is a very "pixel art related" sounding term.
      On top of that, the technique, while not using smaller pixels (sub pixels), aims to emulate the effect of a higher resolution. So I think it's quite fitting.

  • @TahaJelani
    @TahaJelani Рік тому

    I was waiting for you to demonstrate with the circle tbh

  • @thogameskanaal
    @thogameskanaal Рік тому

    My mind immediately goes to Aladdin on the Sega Genesis. Truly a hidden gem video game animators shouldn't pass by a chance to play it and gush over. Simply pixel pureness.

  • @Thebes
    @Thebes Рік тому +1

    I already knew about subpixels, and I have done some pixel art stuff, but I never went passed a few pieces. Regardless, this is a great explanation of subpixels, and is a great introduction for those who want to elevate their art.

  • @GedanJ
    @GedanJ Рік тому

    I was watching this on mute with subtitles, before checking my discord and when i looked back i just got coromon jumpscared x')♡

    • @nootall
      @nootall  Рік тому

      But seriously my man Dan has got some of the cleanest stuff out there

  • @watercat1248
    @watercat1248 Рік тому +2

    I'm not pixel art guy but thank for the lesson
    I think this bending method work's in other type off animation as well

  • @soninhodev7851
    @soninhodev7851 Рік тому +1

    ha! i was wondering about the idle animation in super metroid... sub-pixeling heh? now that you explained it, i was reminded of other classic games that use it, like megaman x4, or kirby super star.

  • @Boogsy
    @Boogsy Рік тому

    Thank you! Awesome work! Very well explained.

    • @nootall
      @nootall  Рік тому

      Thanks - glad to hear you think so!

  • @Mrflordor
    @Mrflordor Рік тому +4

    nice video, again?! dude you keep making high wuality videos and your so underated. love the channel man :)

    • @nootall
      @nootall  Рік тому +2

      Hey I'm glad to hear you're liking them man, comments like these are great to read 👍

  • @digitalxcaffeine
    @digitalxcaffeine Рік тому

    I haven't seen one of your videos before but this was a fantastic explanation. If you ever do a part 2, I'd love to see an example of 2 animations side by side, but one has sub pixelling and the other does not. Or maybe take the the simple circle that was drawn in this video and add sub pixelling to it. It would be great to hear your thought process as you decide timing and what frames you use it on.

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

    A fun analogy would be, dancing like a robot, your trying to do regular movements, but your doing small little movements at a time of small details to get to that overall movement,

  • @fizzdoodle9666
    @fizzdoodle9666 11 місяців тому

    i always wondered what this technique is called. Suikoden 2 uses this technique in their sprites, especially when the characters are in critical hp/ low hp. Great job at explaining how it works.

  • @mobilematthew
    @mobilematthew Рік тому

    This made so muvh sense now i will forget most of it in like an hour but still

  • @readein
    @readein Рік тому +1

    Personally I think you did a good job of explaining it.

  • @cringies
    @cringies Рік тому

    you explained this much better than you think you did! made a ton of sense to me

    • @nootall
      @nootall  Рік тому

      Hey thanks for the feedback - glad to hear it :)

  • @zedekial777
    @zedekial777 Рік тому +1

    This is super cool and very interesting! Thank you

    • @nootall
      @nootall  Рік тому +1

      No problem, glad you think so!

  • @KRDsonic
    @KRDsonic Рік тому

    UA-cam randomly recommended me this, I assume because of pokemon, but also it's pretty cool information since I do some pixel art animating. Trying to make small movements is always a pain.

  • @cherico94
    @cherico94 Рік тому

    This is a very good video. You did a good job explaining this!

    • @nootall
      @nootall  Рік тому

      Hey thanks, I'm glad to hear it!

  • @ardosims
    @ardosims Рік тому +1

    Thank you for this super clear video! I've got what you wanted to explain in less than a minute. 👍

    • @nootall
      @nootall  Рік тому

      You're very welcome - I'm glad to hear it came across nicely 🙂

  • @djalexander968
    @djalexander968 11 місяців тому

    very well explained if you are as unconfident as you came off, ive had to tinker a bit with this and had already seen tutorials on anti-aliasing but you explained it better than they had tbh

    • @nootall
      @nootall  11 місяців тому +1

      Hey thanks man, I'm glad to hear you think so

  • @GabrielObolari
    @GabrielObolari Рік тому

    the explanation was very clear. congratulations

    • @nootall
      @nootall  Рік тому

      Thanks, I'm glad to hear it 👍

  • @7ANKOUCH
    @7ANKOUCH Рік тому +1

    I never thought id undrestand subpixeling in a 6 mins vid 🤩

    • @nootall
      @nootall  Рік тому

      Hope it helped 🙂

  • @sdegueldre
    @sdegueldre Рік тому

    This is "notional" subpixeling, but there is also *physical* subpixeling. Pixels have a certain layout on the physical screen, and if you know the pixel layout is for example red-green-blue horizontally (as is the case for most LCDs), you can actually light up or dim down specific parts of the pixel by using a color, and this gives you an effectively higher resolution, even allowing you to render lines "between" physical pixels. This is used all the time for text rendering for example, just take a screenshot of a youtube comment then zoom in on it really far and you'll see that text that looked white or black actually has weird tints (red and blue on most LCDs but could be very different on OLED screens).
    These are *actual* subpixels. The problem with using this kind of technique in pixel art is that you probably don't know what kind of screen it's going to be rendered on, and so if you use this kind of subpixeling to design pixel art, your art could look very off on other screens. It can be used when doing rendering in software (like with text) because you can query the hardware for the pixel layout (or just have a big table of layouts for various screens), but it can also be used by artists when they know what screens they are targetting, I remember hearing that some handheld titles used this technique because the screen was known to be an LCD. Also it obviously only works at 1-to-1 resolution, as I was saying for the text if you zoom in it will show some off-tints. With current screen resolutions, it's basically dead as a pixel art technique since pixels are so small that most pixel art is rendered at 2 or 3 to 1 resolution. You can look into "subpixel rendering" to learn more about it.

  • @Challacade
    @Challacade Рік тому

    Great video!!

  • @joebykaeby
    @joebykaeby Рік тому +1

    You tried really hard to make this seem difficult to understand, but “you can slow down the apparent speed of the animation by having pixels fade from one state to the next rather than blinking directly from state 1 to state 2” seems pretty intuitive to me

  • @mgostIH
    @mgostIH Рік тому

    This can be explained with some signal theory. An image is a 2D continuous signal, not a bunch of pixels, so movements should act on this smoother object and only be shown to the screen as pixels after a sampling step has happened.
    How you do this sampling leads to different quality, but generally doing an average of the colors for that grid value is better than just picking the value at that color (it's smoother).

  • @itsomegali5342
    @itsomegali5342 Рік тому

    no idea why this is in my recommend but i enjoyed the lesson thank you

    • @nootall
      @nootall  Рік тому

      Yeah that seems to be a common thing with this video lol - not sure what I did but the algorithm seemed to like it.
      But thanks for watching, glad you enjoyed it 👍

    • @itsomegali5342
      @itsomegali5342 Рік тому

      @@nootall if i had to bet on a theory. you reeled in pokemon fans with the thumbnail. enough that the algorithm picked up on it.

  • @LiteralmenteFadul
    @LiteralmenteFadul 11 місяців тому

    I really liked that one frame of a chicken drinking water

  • @devzozo
    @devzozo Рік тому

    Good explanation, thank you.

  • @d1fferen7
    @d1fferen7 Рік тому +1

    Thank you for the great tips!

    • @nootall
      @nootall  Рік тому

      You're very welcome!

  • @flophawk
    @flophawk Рік тому +15

    "a pixel is a pixel, you cant say its only a half"

    • @nootall
      @nootall  Рік тому +8

      They said that about the atom

    • @megaman4354
      @megaman4354 Рік тому +1

      ​​@@nootallso an atom is a real life pixel

    • @nootall
      @nootall  Рік тому +2

      @@megaman4354 ua-cam.com/video/S9RVS8cjNN0/v-deo.html

  • @Dr.W.Krueger
    @Dr.W.Krueger Рік тому

    sub-pixel animation, I remember doing that back in the Amiga days

  • @Insanastar
    @Insanastar Рік тому

    I think you explained it very well.

  • @Xbob42
    @Xbob42 Рік тому

    You explained and demonstrated that quite well, but when I think of the term "subpixel" I think of "smaller than a pixel," meanwhile this appears to be, as you said, more of blending. Or color transitioning. I ain't no big city artist, but "subpixel animation" gave me very different expectations.

  • @spoonsweet
    @spoonsweet Рік тому

    Thanks for this explanation! Great fun of a video!🎉

    • @nootall
      @nootall  Рік тому +1

      You're very welcome - glad you enjoyed it 👍

  • @HassaelMartinez
    @HassaelMartinez Рік тому

    I don't know a lot about pixel art but as per your explanation, I would say it's like the equivalent to smears in 2D animation or motion blur in 3D/live action.

    • @nootall
      @nootall  Рік тому

      Yeah smears is a good way of putting it! Same with motion blur, and "interpolation" which other people have said.

  • @intron9
    @intron9 Рік тому +1

    Well, to be precise, this is not "subpixels". That term is used to refer to the individual R,G and B lights inside a pixel, in font rendering software like ClearType. This is simulated antialiasing.

  • @D0Samp
    @D0Samp Рік тому

    Sadly, the outline is the limit unless you can assume a static background (not even with a specific color, just a rough brightness) or use alpha transparency. Your lil' eeveelutions look a bit funky compared to the larger examples because the inside part of the border essentially moves at twice the frame rate of the outside.

  • @SleepyFunkin
    @SleepyFunkin 11 місяців тому

    5:48
    it's here, it's there, it's everywhere...
    who you gonna call?
    your psychic friend fredbear :)

  • @farresalt4381
    @farresalt4381 Рік тому

    Hmmm, I wonder why I got this recommended...
    Probably because of my interest in animation, but I feel like there might be another reason. :D
    Good video.

    • @nootall
      @nootall  Рік тому +1

      It's within the last few days that I've learned "Eevee" is interestingly a whole niche by itself.

  • @empty_nam
    @empty_nam Рік тому

    i dont do pixel animation but this video was pretty entertaining to be honest, loved it

  • @wigglyfruit4708
    @wigglyfruit4708 Рік тому

    It’s like smear frames and tweens got shoved together for the pixel art equivalent of both

  • @user-un2vb8mr6e
    @user-un2vb8mr6e Рік тому

    Great video. I saw a video by AdamCYounis. I can't remember the specifics but he also goes to talk about different subpixel methods I recommend it

  • @kcinpthd2274
    @kcinpthd2274 Рік тому

    very interesting and explained Great video!

  • @grahamcruickshank2888
    @grahamcruickshank2888 Рік тому

    Nice video! Great anim tips

    • @nootall
      @nootall  Рік тому

      Thanks! I'm glad you think so 👍

  • @ZiRR0
    @ZiRR0 Рік тому

    that actually makes sense, thanks !

    • @nootall
      @nootall  Рік тому

      No problem - I'm glad to hear it 👍