# How do I render an animation where some frames appear twice?

I am animating a sprite. The sprite has 7 different frames, but the animation is 10 frames long. This is because 3 of the original frames appear twice in the animation:

3 -> 4 -> 5 -> 6 -> 4 -> 3 -> 2 -> 1 -> 0 -> 2


Frames 2, 3 and 4 appear twice. This avoids having to store duplicate frames in the spritesheet.

How can I render the animation in this sequence with repeated frames?

• We can't really help you because we don't know what language or animation engine you may be using. I would use an array of integers to decide the animation frame sequence but that might not be an option depending on the language/engine you're using. Jul 28, 2012 at 4:05
• Didn't think language was relevant, since I'm just after an explanation, but sure I'll add that to the question. Jul 28, 2012 at 4:07
• You need to give us how you are animating the sprites as well. Jul 28, 2012 at 4:18
• @AustinBrunkhorst I'm not animating yet? The whole point of this question is to understand HOW I should animate this? How can I go through the frames in the order I want to. Jul 28, 2012 at 4:23

1. Record your animation sequence into an array;
2. Remember the step you show at this frame;
3. When next frame is coming, make the step increase, if step becomes more than animation length - set it to 0 again;
4. Now you have looped animation.

AnimStep: Byte; // Currently displayed animation frame
AnimSprite: array [3, 4, 5, 6, 4, 3, 2, 1, 0, 2]; // Array of frame ids in a loop
AnimLength: Byte; // total array length

Render
{
..
AnimStep = (AnimStep + 1) mod AnimLength; // Increase by 1 and reset to 0 at the end
RenderSprite(AnimSprite[AnimStep]);
..
}

• Putting the frame order in an array was a facepalm moment. Sometimes you miss the most obvious solutions because of the simplicity, thanks. =) Jul 28, 2012 at 7:06
var animationSequence = [3, 4, 5, 6, 4, 3, 2, 1, 0, 2];
var currentFrame = 0;
var totalFrames = animationSequence.length;

// to advance a frame which will wrap round once it reaches the end
currentFrame = (currentFrame + 1) % totalFrames;

// to get current frame
var animationFrameToPlot = animationSequence[currentFrame];


An example to see it working in jsFiddle

• can't get the fiddle to work, it just shows a bunch of numbers. +1 for putting the frame number in array though. Can't believe it didn't cross my mind. Also, what does '%' do in JS? Jul 28, 2012 at 7:07
• % is the modulo operator. And the jsFiddle is working fine, it's supposed to show the looping iterating process. Jul 28, 2012 at 7:19