How to use multiline sprite sheet in Craftyjs without specifying frames manually

Question

I've just started out using craftyjs and am running into a problem.

I have a sprite sheet that has two rows for the same animation. Top row has 4, bottom has 3.

I can't figure out how to get it to play through all 7 images. I can get it to play through one row or the other but not through them all.

This is the main function I have. Note the commented out section. I can get it to work fine if I explicitly set each frame. It's not too bad for this one since I only have 7 of them.... but I also have some that have 100+!

function talk(){
   var talker = Crafty.e('2D, Canvas, talk_start, SpriteAnimation');
   /*
    .reel('talk', 1000 ,[ 
       [0,0],[1,0],[2,0],[3,0],
       [0,1],[1,1],[2,1]
     ])
   */
   talker.reel('talk', 1000, 0, 0, 6);
   talker.animate('talk', -1);
}

Is there any way to make it go through all rows on the sprite sheet without having to manually create the frames?

Thanks in advance!

Answer 1

As far as I am aware there is no built-in way in Crafty (v0.7.1) to do this.
However, you can make a helper function that will generate these wrap-around reels for you.

function generateReel(fromX, fromY, frameCount, sizeX) {
  var out = [], i;

  if (frameCount >= 0) {
    for (i = 0; i < frameCount; ++i) {
      out.push([fromX, fromY]);

      if (++fromX >= sizeX) {
        fromX = 0;
        fromY++;
      }
    }
  } else {
    for (i = 0; i > frameCount; --i) {
      out.push([fromX, fromY]);

      if (--fromX < 0) {
        fromX = sizeX - 1;
        fromY--;
      }
    }
  }

  return out;
}

document.getElementById('result1').textContent =
  "[[" + generateReel(0, 0, 7, 4).join("] [") + "]]";
document.getElementById('result2').textContent =
  "[[" + generateReel(2, 1, -7, 4).join("] [") + "]]";

<div>Result of generateReel(0, 0, 7, 4):</div>
<div id="result1"></div>
<div>Result of generateReel(2, 1, -7, 4):</div>
<div id="result2"></div>