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