Sprite Animation: How many frames for a sprite animations is too many frames ?

[Mike]

I'm going to build a cool animated game, simple mechanics and few game objects (around limit of 50) without counting particle effects if any.

 

The main goal a want to succeed is to make smooth animation.

 

All animation is going to be sprite/frame based, and still a lot of games use 3 to 4 frames for animating a character running left, or top

 

My main question is when frames are too many...

 

If i make 10 frame for walking left, 10 frame for walking to top, then 10 frames for walking to bottom, and 10 frame for a idle animation:

 

Then I've got to have 40 frames of character for the most basic animations.

 

Then lets consider: jump, duck, slide, lean and so on....

 

Also should I consider making a transitional frames from: jump to duck for example:

 

When player jumps, and the land he isn't landing straight to idle animation, but is a bit crouching then - if player press: "duck" instead of finishing the animation to stand up, and then make the player duck, i want to stop the animation on the 7 frame of jump animation and start playing jump-crouch to duck animation...

 

 

Because this is a wide description I'll search and throw some examples from the web which I rate as good spite animations... but also I''ll be vary happy if more people share their vision for in game animations, or some article they find useful... I'll update the topic with my own research too

 

 

Ahh also very important detail:

 

A character for my future game will have a average size ot 200 x 200 px - so I think this makes the need of more frames to make animation more smooth since if a characters is 50 x 50 px - art. then you can't make so many diferent body positions and so on.

[dev]

I'd say, your limit is two-fold:

- Artists limit. No artist wants to build 500 frame-animations, unless he's paid by the hour, in which case your budget is your limit.

- Memory, kind of straightforward. You'll have to keep in mind a few base devices (e.g. Iphone 4, Galaxy S3) and say, I want to support minimally these devices. Do some tests and you probably don't want to exceed 10mb. Also consider download times (on slower, mobile connections), 5mb is a lot (!) if you have a 50kb/s connection on the subway. But good compression goes a long way.

 

So the 10 frames for up, down, left, right + idle make 50 frames. At your resolution of 200x200 that's almost 8 megabytes, which is normally the memory budget for the entire game on mobile. For desktop, it's much less of a problem, but there's much less of a market there.

 

Then you'll have a minimum limit. This depends very much on your art-style. A gameboy game could get away with 2-3 frame walking animations, that art-style would still be acceptable today. That's because the art-style consistently asks the brain to fill in the gaps with their imagination. In graphics, less is often more. But if you pre-render 3d models, 2-frames look horrible, you give the brain a super detailed image but then ask it to ignore a lack of frames. So you can't say what a minimum is, some games require just 3 frames for walking, some 20.  So I'd adjust the art-style depending on your memory budget, 10mb on mobile doesn't allow much.

[Gio]

Agreed on most of the points above, however most devices can cope with 64Mb (or more) of uncompressed textures. Doing some tests on your target devices like Developoid said is very good practice. On the devices mentioned above (4S, S3) we got a game with over 100Mb of textures to work with no problems.

 

Bandwidth-wise, this is less of a problem as you will be compressing your textures, presumably using 8-bit PNG. 64Mb of uncompressed textures can easily be compressed into 4 or 5 megs (depending on your art style).

 

Again it does depend on your art style, but most people won't expect more than 15-20 frames of animation per second from a 2D game. More than that is probably too much IMO.

 

Having said that, I think you should look into "blending" your animation frames to make your animation look smoother, i.e. don't simply draw one frame or another, but rather draw one frame at X% opacity, and the next frame at (100 - X)% opacity. Unfortunately this isn't so simple, because most browsers (including Chrome and Firefox) tend to gamma-correct the global alpha of your canvas context, so if you draw at X% alpha and then at (100 - X)% alpha, the sum won't be 100%. So you have to de-gamma your alpha values before setting them.

 

At the end of the day, if does depend on the art style, but also on the particular animation that you're doing and the context of your game. Is the camera moving while the animation is playing? In this case you can lower the animation frame rate and no-one would notice. And so on...

 

With very detailed, pre-rendered 3D characters, we tend to use anywhere between 10 to 20 frames of animation per second with blending, depending on the context.