How to cache an image and use it later in EaselJS? - css-sprites

Question

I have a very basic sprite animation. How to cache an image and use it in the "images" part of the sprite sheet creation?
I tried with:
Image1= new Image(2779,1135)
Image1.src = "img/contur.png"
but I don't knwo how to include Image 1 in the "images" section.
stage = new createjs.Stage(document.getElementById("testCanvas"));
stage.clear();
var ss = new createjs.SpriteSheet({
"animations": {"run": [0, 50]},
"images": ["img/contur.png"],
"frames":
{
"height": 140,
"width": 231,
"regX": 0,
"regY": 0,
"count": 51
}
});
var grant = new createjs.Sprite(ss, "run");
stage.addChild(grant);
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);

Answer 1

If I understood correctly your question, you want to load the image prior to its usage in the spritesheet.
You have 2 ways to do this:
Add a callback on img.load:
img = new Image();
img.src = "img/contur.png";
img.onload = function(event) {
// you can create spritesheet here
}
Using PreloadJS (recommended):
loader = new createjs.LoadQueue(true);
loader.on('complete', function(event) {
// you can create spritesheet here
});
loader.loadManifest([{id:'imageX', src:'img/contur.png'}]);
if that is the case, you also need to run a web server (for example, using python: python -m SimpleHTTPServer 8088)
For both options, you just need to use the path to image (the browser will get the preloaded image automagically):
var ss = new createjs.SpriteSheet({
"animations": {"run": [0, 50]},
"images": ["img/contur.png"],
"frames": {
"height": 140,
"width": 231,
"regX": 0,
"regY": 0,
"count": 51
}
});
If you are using PreloadJS, you can specify the loaded image object by an alias (defined on manifest):
"images": [loader.getResult('imageX')],
...
NOTE: remember to call stage.update() after adding stuff to the stage or to animate the frames, otherwise it will simply show an empty canvas or a static image.