Create a Sprite from image array

Question

An Image array created from series of calls to toDataUrl() metod of the canvas. Now I need to create a SpriteSheet out of it.

How do I do that?

var imgUrl = canvas.toDataURL();
var image = new Image();
image.src = imgUrl;
arr.push(image);

I've read EaselJS docs on SpriteSheet here. But there is no such methods or examples how to create it in runtime.

Answer 1

Take a look at the SpriteSheetBuilder: http://createjs.com/Docs/EaselJS/classes/SpriteSheetBuilder.html

There are also some examples here: https://github.com/CreateJS/EaselJS/tree/master/examples

Keep in mind that you have to include SpriteSheetBuilder separately as it is not part of the "core"-library (https://github.com/CreateJS/EaselJS/issues/593).

Edit: Example of how to use the normal SpriteSheet with image-instances... Just pass them to the data-object and calculate your frames before.

var data = {
    images: arr, //pass your array with images
    frames: (...)
};
var spriteSheet = new createjs.SpriteSheet(data);