spritecreatejseaseljspreloadjs

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


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?


Solution

  • 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.