在EaselJS中缓存SpriteSheets

Question

如何在EaselJS中缓存SpriteSheets？我有一个Sprite对象，当我使用user.hero.cache(0, 0, 30, 40);时，它停止播放动画（可能是因为我只是缓存当前帧，而不是整个SpriteSheet图像）。那么如何缓存呢？

这是我的相关EaselJS代码：

data = {
    images: ["Graphics/hero.png"],
    frames: {
        width: 30,
        height: 40
    },
    animations: {
        stand: 0,
        run: [1, 2, "runLoop", 0.15],
        runLoop: [3, 7, true, 0.15],
        jump: [8, 10, "happy", 0.5],
        happy: 11,
        fall: 12,
        stopFalling: [13, 14, "stand", 0.2],
        almostFalling: [16, 19, true, 0.1]
    }
};
user.hero.spriteSheet = new createjs.SpriteSheet(data);
user.hero = new createjs.Sprite(user.hero.spriteSheet, "stand");
user.hero.name = "hero";
user.hero.x = user.hero.safeX = 40 * 3;
user.hero.y = user.hero.safeY = 0;
user.hero.offset = 4;
user.hero.regX = user.hero.offset + 2;
user.hero.regY = user.hero.offset;
user.hero.width = 30 - (user.hero.offset * 2) - 10;
user.hero.height = 40 - (user.hero.offset * 2);
user.hero.xvel = user.hero.yvel = 0;
user.hero.cache(0, 0, 30, 40); // <--- This is the problem.
movableObjContainer.addChild(user.hero);
movableObj.push(user.hero);

没有缓存：

使用缓存：

我也尝试过缓存data.image或user.hero.spriteSheet，但没有成功。 有没有办法在不影响动画的情况下缓存SpriteSheet？

Answer 1

当您缓存精灵时，您将保存它在该瞬间的显示方式。

你能解释为什么要缓存它吗？我可以考虑缓存它的唯一原因是应用过滤器。每次缓存它时，内容都会被绘制到一个离屏画布上，然后用它来代替它。如果您有复杂的内容（如容器或图形）不会发生变化，那么这很有意义，但是使用spritesheet，这意味着您要创建一个新的位图来绘制位图。 spritesheet本身是文件大小，网络和GPU优化的好方法，因此重新缓存它基本上否定了所有这些好处。

如果您想要缓存，则需要重新缓存它，或者每次更改时调用updateCache()。以下是使用股票代码的示例。

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

这是我使用一些过滤器方法做了一段时间的快速演示。它提供了一个常量重新缓存的示例，以及一个缓存整个spritesheet以应用过滤器一次的示例，然后该缓存版本用于精灵。 http://jsfiddle.net/lannymcnie/NRH5X/