在 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 以应用过滤器一次，然后将该缓存版本用于 sprite 的示例。 http://jsfiddle.net/lannymcnie/NRH5X/