1

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?

zur4ik
  • 6,072
  • 9
  • 52
  • 78
  • There is a pretty good overview of the format here: http://createjs.com/docs/easeljs/classes/SpriteSheet.html -- additionally, you can check out the samples in GitHub – Lanny Jan 25 '16 at 17:26

1 Answers1

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.

John Ashton
  • 34
  • 6
  • Thanks for answer. Is there any difference in performance if I use `sprite.gotoAndStop(0)` and simple `createjs.Bitmap(imageResource)` ? – zur4ik Jan 25 '16 at 11:14
  • 1
    Yes, if you use a bunch of Sprites that point to the same image, this helps the GPU, and will be much faster, especially when drawing a lot of content. – Lanny Jan 25 '16 at 16:11