What frames per second for smooth pixel art animation?

I’ve been googling trying to find out what a good framerate is for a pixel art animation, but surprising not finding a whole lot of clear advice.

My 2d game is intended to run at 60fps and object positions will be at 60hz regardless of how often the sprite image frames swap out. But I am unsure what framerate to target the sprite frames at.

It seems if it runs at 60, then the sprite framerate (if constant) should divide exactly into that. This suggests 10 or 12 or 15 or 20 or 30 or 60.

I have found that anything less than 15 frames per second seems too choppy and this seemed to be what people around the web were saying. 15 seems a little on the slow or noticeable side, but I could also do some realtime interpolation or tweening. Also 20 sounds like a possible target, a bit smoother looking than 15. The next step up is 30. I want to be sure that the playback rate is very equidistant ie not like 24fps which would end up with frames showing for different durations and interfering with the intended animation. It seems 30 is the next “whole” number. But honestly the idea of creating 30 frames of animation for 1 second sounds like a lot, and it seemed people around the web felt this was ‘overkill’. I’ve seen a few nice animations ranging from 15 to 24fps.

12 = every 5th frame
15 = every 4th frame
20 = every 3rd frame
30 = every 2nd frame

So I’m leaning towards either 15 or 20.
Any advice?

 

2D animation is almost never so regular. Sure you have old stuff like Betty Boop, or more recently Cuphead where all the animation is done on “ones” (one drawn frame on animation for each frame of film, usually for a target of 24 fps), but most animation is done on at most twos, or 12fps, or even larger steps. Disney is somewhat famous for using fives or sixes at times you wouldn’t expect, but only for one or two animation frames then back to twos or threes.

This GDC talk for Skull Girls goes into this a bit talking about how their animation framerate isn’t constant, intentionally so.

Some more modern 2D games like the Rayman games are using interpolated skeletal animation with frame swaps such that the motion is a full 60 fps, but the sprites only change when needed. Again, not likely at a regular framerate.
This video goes into good detail on the topic.

So really it all depends on what you want it to look / feel like. There’s not really a correct answer.

 

Thanks, that's a good point. I figure if I target 15 or 20fps mainly, it can be every nth frame when I want that, or, if the timing needs to be a little more accurate, I then have 2 or 3 in-between frames in which to adjust the positioning of the frame flips. After all at best I can't flip any more accurately than at 1/60th of a second. For me 12fps is too slow.

I'm not planning to do the skeletal animation style as such, I prefer the use of more hand-drawn frames. But I am looking into using something like that, or morphing, to tween the frames.

Nice videos btw thanks.

 

If you will take a moment and find out how many fps the human eye can read, it might help your design. I would tell you that low number, but have forgotten what it is. Because the human eye is so slow, we are unable to see the scan lines displayed on a monitor screen.

An ideal FPS, would be just a little bit faster than the human eye.

 

I work in 32 bits, and 8 frames works well for a walking animation. I use 4 frames for an attack, and 4 for an idle. The game runs at 60 fps, with an animation speed of 12 fps.

 

Yah supposedly its 24fps but some people have also said the eye is able to tell the difference between much faster framerates than that.

 

There is no definite limit. It's way, way beyond 24fps, that's for sure. Don't know where that idea came from, since it's really the minimum that you can get away with, but only with some tricks (motion blur etc.). Anything beyond 150fps or so would be diminishing returns, especially since monitors that fast don't really exist (144Hz being commonly the high end currently). Speaking of 144Hz monitors, don't count on 60Hz. For sure the most common (for now), but not the only rate. (Also, scan lines went out with CRTs, not that they have anything to do with framerate. LED flickering would be more relevant.)

--Eric

 

At least on NTSC in the USA the ‘standard’ is 60hz, so hopefully it will be supported for a long time to come. But I can see a trend towards higher refreshes. 120hz is pretty nice.

I can’t really see creating 30fps animation frames by hand though... that’s a lot.

 

NTSC is dead; that also went out with CRTs. HDTV framerates in different regions have tended to stick with legacy framerates for those regions though.

--Eric

 

Somewhere between 30 hz and 80 hz for the average person, the upper limit is somewhere around 250 hz for some people under ideal situations... but that's getting into somewhat contrived situations. But scan lines are a little different than frames per second.

The real question isn't "how many fps the human eye can read", it's what is a rate that is comfortable to view motion at. We can start to perceive motion instead of just a slide show at somewhere between 5~15 fps with 15~16 hz starting to feel like continuous motion, though most can still perceive the individual frames.

24 fps is the frame rate many people are familiar with as it's the standard frame rate for film for roughly the last 90 years. However this standardization has almost nothing to do with it being some sort of "perfect" rate that humans can't perceive above. Early silent films were filmed at between 18 fps and 30 fps, with most closer to 20 fps. The variability came in part because cameras and projectors were hand cranked so the frame rate differed depending on who was operating the camera and how tired they were. It didn't help that directors often under or over cranked the camera (filmed at lower or higher frame rates) mid scene for different effects. Also often times early theaters would over crank the projection so a movie that would normally be intended for 18 fps or 20 fps would be played as fast as possible so they could get through more movies / audiences.

Sound changed that as it required the audio and picture matched. 24 fps was chosen because of economics, not because of it being some magic max frame rate. Film was expensive. Some studios were pushing for 30 fps or more, like Edison who's studio pushed for 48 fps. Edison claimed 48 fps was the minimum needed for smooth motion, and he was right. Everyone agreed and they ended up at 24 fps.

Because Edison was only partially correct.

In fact while film is 24 fps (frames per second), it was generally displayed at 72 hz (hertz, or flashes per second). This is done by displaying each frame of the film 3 times. Originally they were displayed at 48 hz which matched up with Edison's recommendation, but they quickly found going up to 72 hertz increased comfort even more. Today it's not uncommon for digital theaters to run at 120 or 144 hz, the later is the standard for many digitally projected 3d films.

Why? Because the human eye and brain can perceive much higher flicker rates than it takes to make smooth motion. This is why I started above talking about hz and not fps.

The 60 hz of NTSC and 50 hz of PAL have to do with those nation's power grids, and again have nothing to do with a maximum perceivable frame rate. More recent pushes with VR have shown that 90 fps and even 120 fps has benefits for perceived smoothness of motion.

Anything above 120 fps hasn't shown significant benefits for motion perception, with 144 hz monitors likely benefiting mainly from reduced latency.


So, again, it comes down to what you want it to look like. Many 2D games get away with quite low animation frame rates, but 30 or 60 fps camera and sprite motion. Like I mentioned before, Cuphead is animate at a constant 24 fps. Some other games out there, like Fancy Pants Adventures or Ori and the Blind Forrest, are animated at 30 fps and are noticeably smoother in appearance, but also a ton more work. Aladdin on the Genesis, famously one of the best animated games of the time as it was actually animated by Disney animators, has the main run cycle animated at roughly 12 fps with an extra frame or two when needed. Lion King, another contender for best looking, is 30 fps.

 

One thing I’ve realized is that I can’t really fixate on a single framerate. For example in my game the player has inertia and will run along the ground at varying speeds, so the running animation is going to have to move at different rates. With this in mind I guess the only way is to basically say, the animation is going to be designed for a possible 60hz rate “at most” and then just use whatever number of frames are needed. And for things which aren’t changing rates based on speed, they’ll get coded at whatever rate seems to be needed to look good, which I’m sure will differ per sprite and how it animates. I also decided to move the sprites at 60hz in-engine ie realtime and focus on in-place animation for the sprite frames so that all major “movements” are smooth even if the frames don’t flip.

 

I would actually suggest having more than one loop if your speed is variable. Two or possibly three might be necessary, along with a few frames for starting from zero motion. This might sound like a lot of work, and it is, but consider the walk / run likely to be the animation most frequently seen in the game.