90% sure TH-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 likewise, TH-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!
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
@@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
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 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!
@@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!
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, TH-cam! I have enough hobbies that are just lying around and waiting for me to maybe pick them back up at some point!
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.
@@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
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
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.
@@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
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.
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.
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
@@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.
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.
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.
I know for a fact the only reason TH-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)
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
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!
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. :)
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!
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.
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.
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!
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.
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!
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.
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 :)
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
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!
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 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!
Glad I stumbled upon this video, thank you TH-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!
IDK why TH-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 ^^
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.
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.
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.
I got into pixel art via an old genre of TH-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
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!
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.
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.
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.
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.
@@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.
@@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.
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.
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.
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
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.
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.
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.
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.
TH-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.
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,
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
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
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.
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.
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 👍
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.
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).
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.
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.
I do want to point out this is not anti-aliasing. Anti-Aliasing is a specific rendering technique computers use to prevent pixely, jagged edges on objects being drawn to the screen. The animation technique of sub-pixeling can emulate anti-aliasing, but is done by hand, rather than algorithmically, which is where the distinction lies.
It was really well explained. For the circle example would you have "squished" the circle 1px horizontally for an in-between step or made a semi-transparent right border in-between step?
Thanks, glad to hear it! For the circle, I would probably do your second suggestion. So as it moves to the right, I think I'd add a slight inside border to the left side of the pixel. I'd need to experiment a bit to know for sure, but it would be something like that!
90% sure TH-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
Lol, big up TH-cam algorithm.
Thanks for the feedback!
@nootall likewise, TH-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!
It's both for me. I'm an aspiring pixel artist, and I bet you can guess what my favorite Pokémon is, lol.
Same, except I actually do make pixel art, so it was worth watching the whole thing anyway lol
For me i think its because im trying to make a pixel game and want to do the animation myself (its very hard)☠️
"This is something that's very hard for me to explain"
Proceeds to explain and illustrate in the clearest way possible.
Great video!
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
@@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
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!
Hey that's awesome, I'm glad to hear that 👍
Thanks for sharing
@@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!
@@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!
The illusion of movement and color theory. Great video 🎉
Thank ya - glad you think so 👍
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, TH-cam! I have enough hobbies that are just lying around and waiting for me to maybe pick them back up at some point!
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.
This sounds like copy pasta but I'm not sure
@@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
@@nootallyou do NOT want to know
@@FzeroVaporeondear lord
☹
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
Pixel art is so meticulous. It looks great, but making tiny mosaics is also so much work!
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.
@@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
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.
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.
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
@@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.
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.
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.
Ahaha thanks - you have no idea how many times I was yelling "just call it brown!" while editing this lol.
I know for a fact the only reason TH-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)
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
A lot of people underestimitate how complicated pixel art is
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!
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. :)
Great! Have fun flexing :)
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!
You're very welcome, glad I could help 👍
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!
I think I've just learnt something that will stick in my brain forever. That was such a good explanation!
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.
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.
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!
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.
Such a high quality video. Keep this up and you'll blow up forsure
Thanks, I appreciate the kind words 🙏
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!
No issues with the explanation! Another banger of a video 🤘🏼
Haha thanks for the reassurance brother 🙏
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.
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 :)
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 :)
Hahaha, thank you - I'm glad to hear it
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
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!
Hey thanks man, I'm glad to hear you found it interesting 👍
So this is what the DS Mario and Luigi games used for their sprites
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!_
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 👍
@@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!
@quotetry8998 no worries, I'm glad to hear it 👍
nice video, again?! dude you keep making high wuality videos and your so underated. love the channel man :)
Hey I'm glad to hear you're liking them man, comments like these are great to read 👍
Glad I stumbled upon this video, thank you TH-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!
Ahhh pmd, explorers of sky was my damn childhood 🥲
By passion project, Is it a fan game or something else? (If I can ask)
IDK why TH-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 ^^
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.
I absolutely did NOT expect to see Coromon in a video that randomly popped up on my feed about pixel animation 😂
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.
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.
great quick overview of a very important technique!
I got into pixel art via an old genre of TH-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
I could literally listen to you talk about anything for hours with that soft voice
😆
This is actually really helpful for pixel art in general, not just animation-
Well, that was eye-opening; it's really well explained. And those eevee-animations are lit!
Thanks! Glad to hear it
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!
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.
@@nootall Yeah, I thought about it for easing! Though it heavily depends on the style I'm going for haha
Love the explanation, though I really wanted to see it illustrated with the circle example you started with.
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.
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.
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.
@@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.
@@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.
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.
Awesome - glad to hear it was still useful in some way even though you're familiar with it 👍
This is a very good video. You did a good job explaining this!
Hey thanks, I'm glad to hear it!
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
Ay I'm glad to hear it :)
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.
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
Awesome I'm glad to hear it :)
Thank you! Awesome work! Very well explained.
Thanks - glad to hear you think so!
thank you so much you explained it really well
No problem - I'm glad to hear it!
I was waiting for you to demonstrate with the circle tbh
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.
Your channel is so underrated
Hey thanks- I appreciate it 👍
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.
This is super cool and very interesting! Thank you
No problem, glad you think so!
Honestly i always thought of it as layers overlapping as in your example with eevee's leg. good explanation
Personally I think you did a good job of explaining it.
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.
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
Ay that's great, glad you enjoyed it either way 👍
I sort of knew about subpixeling, but now I feel like I understand it a lot better
As a person who has exactly 0 interest in pixel art, this was an amazing and informative video. Thankyou for existing my good sir.
Hey thank you for you comment sir 🍷, I'm glad to hear you think so!
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.
Thank you for this super clear video! I've got what you wanted to explain in less than a minute. 👍
You're very welcome - I'm glad to hear it came across nicely 🙂
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
TH-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.
Dope. Makes perfect sense to me basically add a frame with a pixel that is the child of the areas around it
Certainly a unique way of putting it, but I can see what you're saying and yep I think that works!
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,
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
Hey thanks man, I'm glad to hear you think so
you explained this much better than you think you did! made a ton of sense to me
Hey thanks for the feedback - glad to hear it :)
Thank you for the great tips!
You're very welcome!
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
I was watching this on mute with subtitles, before checking my discord and when i looked back i just got coromon jumpscared x')♡
But seriously my man Dan has got some of the cleanest stuff out there
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.
This made so muvh sense now i will forget most of it in like an hour but still
the explanation was very clear. congratulations
Thanks, I'm glad to hear it 👍
I really liked that one frame of a chicken drinking water
🤐
"a pixel is a pixel, you cant say its only a half"
They said that about the atom
@@nootallso an atom is a real life pixel
@@megaman4354 th-cam.com/video/S9RVS8cjNN0/w-d-xo.html
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.
5:48
it's here, it's there, it's everywhere...
who you gonna call?
your psychic friend fredbear :)
Good explanation, thank you.
very interesting and explained Great video!
It’s like smear frames and tweens got shoved together for the pixel art equivalent of both
no idea why this is in my recommend but i enjoyed the lesson thank you
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 👍
@@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.
sub-pixel animation, I remember doing that back in the Amiga days
I think you explained it very well.
Nice video! Great anim tips
Thanks! I'm glad you think so 👍
I never thought id undrestand subpixeling in a 6 mins vid 🤩
Hope it helped 🙂
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.
Yeah smears is a good way of putting it! Same with motion blur, and "interpolation" which other people have said.
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).
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.
Great video!!
Thanks for this explanation! Great fun of a video!🎉
You're very welcome - glad you enjoyed it 👍
an old pokémon game remake with these lively sprites would be incredible
i dont do pixel animation but this video was pretty entertaining to be honest, loved it
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.
subpixeling is when you pixelate someone's picture on instagram without tagging them
I do want to point out this is not anti-aliasing. Anti-Aliasing is a specific rendering technique computers use to prevent pixely, jagged edges on objects being drawn to the screen. The animation technique of sub-pixeling can emulate anti-aliasing, but is done by hand, rather than algorithmically, which is where the distinction lies.
It was really well explained. For the circle example would you have "squished" the circle 1px horizontally for an in-between step or made a semi-transparent right border in-between step?
Thanks, glad to hear it!
For the circle, I would probably do your second suggestion. So as it moves to the right, I think I'd add a slight inside border to the left side of the pixel.
I'd need to experiment a bit to know for sure, but it would be something like that!