javascript - 使用多个图像进行动画的 easeljs sprite

Question

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

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

Answer 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