Wie man mehrzeiliges Sprite-Blatt in Craftyjs verwendet, ohne Rahmen manuell zu spezifizieren

Question

Ich habe gerade angefangen, mit craftyjs zu arbeiten und stolperte auf ein Problem.

Ich habe ein Sprite-Blatt, das zwei Zeilen für die gleiche Animation hat. Obere Reihe hat 4, Unterseite hat 3.

Ich kann nicht herausfinden, wie man es erhält, durch alle 7 Bilder zu spielen. Ich kann es durch die eine oder andere Reihe spielen lassen, aber nicht durch alle.

Dies ist die Hauptfunktion, die ich habe. Beachten Sie den auskommentierten Abschnitt. Ich kann es gut funktionieren, wenn ich jeden Frame explizit festlegen. Es ist nicht schlecht für diesen, da ich nur 7 von ihnen habe .... aber ich habe auch welche, die 100+ haben!

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); 
} 

Gibt es eine Möglichkeit, es durch alle Zeilen auf dem Sprite-Blatt gehen zu lassen, ohne die Frames manuell erstellen zu müssen?

Vielen Dank im Voraus!

Answer 1

Soweit ich weiß, gibt es in Crafty (v0.7.1) keine eingebaute Möglichkeit, dies zu tun.
Sie können jedoch eine Hilfsfunktion erstellen, die diese Wrap-Around-Rollen für Sie generiert.

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>