Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
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. – Austin Brunkhorst Jul 28 '12 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. – justanotherhobbyist Jul 28 '12 at 4:07
You need to give us how you are animating the sprites as well. – Austin Brunkhorst Jul 28 '12 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. – justanotherhobbyist Jul 28 '12 at 4:23
up vote 4 down vote accepted
  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

  AnimStep = (AnimStep + 1) mod AnimLength; // Increase by 1 and reset to 0 at the end
share|improve this answer
Putting the frame order in an array was a facepalm moment. Sometimes you miss the most obvious solutions because of the simplicity, thanks. =) – justanotherhobbyist Jul 28 '12 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

share|improve this answer
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? – justanotherhobbyist Jul 28 '12 at 7:07
% is the modulo operator. And the jsFiddle is working fine, it's supposed to show the looping iterating process. – Alayric Jul 28 '12 at 7:19

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.