フレームを手作業で指定せずにCraftyjsでマルチラインスプライトシートを使う方法

Question

私はcraftyjsを使い始めたばかりで、問題が発生しています。

私は同じアニメーションに対して2つの行を持つスプライトシートを持っています。一番上の行には4、下には3があります。

7つの画像すべてを再生する方法を理解できません。私はそれを1つの行または他の行を介して再生することができますが、すべてを介して再生することはできません。

これは私の主な機能です。コメントアウトされたセクションに注意してください。明示的に各フレームを設定すると、正常に動作するようになります。私はそれらのうちの7つしか持っていないので、これはあまりにも悪いことではありません....しかし、私も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); 
} 

手動でフレームを作成することなくスプライトシートのすべての行を通過させる方法はありますか？

ありがとうございます！

Answer 1

私が知っている限り、これを行うにはCrafty（v0.7.1）に組み込まれた方法はありません。
しかし、これらのラップアラウンドリールを生成するヘルパー機能を作成することができます。

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>