CODEWITHSUNDEEP
javascriptcreatejseaseljs
Iverson
Iverson

Reputation: 179

easeljs sprite using multiple images for animation

Does anyone can advise if there is a way to load different images for different animation eg. "idle", "stun", "shoot"?

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

Upvotes: 2

Views: 1944

Answers (1)

zlumer
zlumer

Reputation: 7004

You can achieve this by providing an extended frames array:

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 (5th element in the frame array) is what you need to specify the image source. In my example #0 is images/Drones-Hovering-Loop-12fps.png and #1 is image2.png

Link to docs: http://createjs.com/docs/easeljs/classes/SpriteSheet.html

Upvotes: 3

Related Questions