使用多个图像进行动画的easeljs sprite答案

【问题标题】：easeljs sprite using multiple images for animation使用多个图像进行动画的easeljs sprite
【发布时间】：2016-02-13 10:02:32
【问题描述】：

有没有人可以建议是否有办法为不同的动画加载不同的图像，例如。 “空闲”、“眩晕”、“射击”？

var data = new createjs.SpriteSheet({
    "images": ["images/Drones-Hovering-Loop-12fps.png"],
    "frames": {"regX": 0, "height": 262, "count": 25, "regY": 0, "width": 250},
    "animations": {
      "idle": [0, 24],
      "stun": [0, 0]
    },
    framerate: 24
  });
  drone = new createjs.Sprite(data, "idle");

【问题讨论】：

请注意，如果可以，您应该使用单个图像。这将在使用 GPU 的设备上性能更高。每当您更改图像时，您都可能会遇到在交换大图像时看到小停顿的情况。

标签： javascript createjs easeljs

【解决方案1】：

您可以通过提供扩展的frames 数组来实现这一点：

var data = new createjs.SpriteSheet({
  "images": ["images/Drones-Hovering-Loop-12fps.png", "image2.png"],
  "frames": [
    // x, y, width, height, imageIndex*, regX*, regY*
    [0, 0, 250, 262, 0, 0, 0],
    [0, 0, 250, 262, 1, 0, 0]
    //...
  ],
  "animations": {
    "idle": [0, 24],
    "stun": [0, 0]
  },
  framerate: 24
});
drone = new createjs.Sprite(data, "idle");

imageIndex（帧数组中的第 5 个元素）是您指定图像源所需的。在我的示例中，#0 是 images/Drones-Hovering-Loop-12fps.png，#1 是 image2.png

文档链接：http://createjs.com/docs/easeljs/classes/SpriteSheet.html

【讨论】：

谢谢，试过你的例子，但对我不起作用。精灵图像一直闪烁
如果您发布生成的代码，也许有人可以提供帮助
这是我在codepen codepen.io/derr/pen/zrXXGz中按照上面的例子
据我所知，它工作正常。您在不同的 spritesheets 上有 2 个精灵，动画显示了它们。虽然如果你只有 2 帧，你不应该在这里设置动画为 25 帧："idle":[0, 24]，改为"idle":[0,1]。
好的，现在我明白了。您需要为每个 spritesheet 提供一个单独的帧数组。我在你的 codepen 上用idle 动画做了一个例子：codepen.io/anon/pen/EPzLmw