2
\$\begingroup\$

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?

\$\endgroup\$
4
  • \$\begingroup\$ 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. \$\endgroup\$ Jul 28, 2012 at 4:05
  • \$\begingroup\$ Didn't think language was relevant, since I'm just after an explanation, but sure I'll add that to the question. \$\endgroup\$ Jul 28, 2012 at 4:07
  • \$\begingroup\$ You need to give us how you are animating the sprites as well. \$\endgroup\$ Jul 28, 2012 at 4:18
  • \$\begingroup\$ @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. \$\endgroup\$ Jul 28, 2012 at 4:23

2 Answers 2

4
\$\begingroup\$
  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]);
  ..
}
\$\endgroup\$
1
  • \$\begingroup\$ Putting the frame order in an array was a facepalm moment. Sometimes you miss the most obvious solutions because of the simplicity, thanks. =) \$\endgroup\$ Jul 28, 2012 at 7:06
2
\$\begingroup\$
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

\$\endgroup\$
2
  • \$\begingroup\$ 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? \$\endgroup\$ Jul 28, 2012 at 7:07
  • \$\begingroup\$ % is the modulo operator. And the jsFiddle is working fine, it's supposed to show the looping iterating process. \$\endgroup\$
    – Alayric
    Jul 28, 2012 at 7:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .