如何在 Craftyjs 中使用多行精灵表而不手动指定框架

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

本文关键字：框架 精灵 Craftyjs      更新时间：2023-09-26

我刚刚开始使用craftyjs，遇到了一个问题。

我有一个精灵表，其中有两行用于相同的动画。顶行有 4 个，下排有 3 个。

我不知道如何让它播放所有 7 张图像。我可以让它通过一排或另一行播放，但不能全部播放。

这是我的主要功能。请注意注释掉的部分。如果我明确设置每一帧，我可以让它正常工作。这对这个来说还不错，因为我只有 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);
}

有没有办法让它遍历精灵表上的所有行，而无需手动创建框架？

提前感谢！

据

我所知，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>

相关文章：