How to import multiple images as one sprite in Createjs EaselJS?

Question

I have to multiple images merged as one sprite image. These images are not part of some animation, it's just different static images.

I need to load them somehow in Createjs/EaselJS but I don't know the template of json for spritesheet data.

All search results points to how to make sprite animation, but I don't need animation, just static images by id.

Can anyone provide an example how to achieve this?

Answer 1

Here is an example for your json file:

{
    "frames": [
        [0, 0, 120, 200],
        [140, 0, 350, 400]]
}

Every item in 'frames' describe one frame in your spite image. There are 4 values per each frame. First 2 stand for frame's position in the sprite. [0, 0] left-upper corner for frame #1 and [140, 0] for frame #2. Other 2 value describe frame size (120x200 and 350x400 in my case).

Load this json and your image into EaselJS and then instantiate as a Sprite. Like this:

var ssheet = new createjs.SpriteSheet(ss);  
var sprite = new createjs.Sprite(ssheet);

Don't use play method as it's not animation in your case. Just call gotoAndStop(0) for the first frame and gotoAndStop(1) for the second frame.

Now add your sprite to the stage.