Cache Spritesheets In Easeljs

How can I cache SpriteSheets in EaselJS? I have a Sprite object and when I use user.hero.cache(0, 0, 30, 40); it stops playing animation (probably because I'm just caching the curr

Solution 1:

When you cache the sprite, you are saving off how it looks at that instant.

Can you explain why you want to cache it? The only reason I can think of to cache it would be to apply filters. Each time you cache it, the contents are drawn to an off-screen canvas, which is then drawn in place of it. This makes a lot of sense if you have complex content, like a container or graphics, which do not change, but with the spritesheet, it means you are creating a new bitmap to draw a bitmap. The spritesheet itself is a great way to be filesize, network, and GPU-optimzed, so re-caching it is basically negating all those benefits.

If you want to cache anyways, you will need to re-cache it, or call updateCache() every time it changes. Here is an example using the ticker.

createjs.Ticker.on("tick", function() {
    user.hero.updateCache();
    // or
    user.hero.cache(0,0,30,40) 
}, this);

Here is a quick demo I did a while back using a few approaches for filters. It provides an example of constant re-caching, as well as an example where the entire spritesheet is cached to apply the filter once, and then that cached version is used for the sprite. http://jsfiddle.net/lannymcnie/NRH5X/