Javascript 在EaselJS中缓存精灵表

如何在画架中缓存精灵表？我有一个精灵对象，当我使用

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);

数据={
图像：[“Graphics/hero.png”]，
框架：{
宽度：30，
身高：40
},
动画：{
立场:0,，
运行：[1,2，“运行循环”，0.15]，
运行循环：[3,7，真，0.15]，
跳跃：[8,10，“快乐”，0.5]，
快乐:11,，
秋季:12,，
停止下降：[13,14，“站立”，0.2]，
几乎崩溃：[16,19，对，0.1]
}
};
user.hero.spriteSheet=新建createjs.spriteSheet（数据）；
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）；// 当您缓存精灵时，您正在保存它在该瞬间的外观

你能解释一下为什么要缓存它吗？我能想到的缓存它的唯一原因是应用过滤器。每次缓存它时，内容都会被绘制到屏幕外的画布上，然后绘制该画布来代替它。如果您有复杂的内容，如容器或图形，这些内容不会更改，但使用spritesheet，这非常有意义，这意味着您正在创建一个新位图来绘制位图。spritesheet本身是优化文件大小、网络和GPU的好方法，因此重新缓存它基本上否定了所有这些好处

如果要以任何方式进行缓存，则需要重新缓存它，或者每次更改时调用
updateCache（）
。下面是一个使用ticker的示例

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

这是我不久前使用几种过滤器方法做的一个快速演示。它提供了一个不断重新缓存的示例，以及一个将整个精灵表缓存一次以应用过滤器，然后将该缓存版本用于精灵的示例。
但是我不能缓存源图像而不是实际帧吗？因为spritesheet实际上是一个图像，至少对于位图来说，缓存可以大大提高性能。我没有注意到您的JSFIDLE对我的问题有答案，而您正在缓存位图，然后在
data2
对象中使用它。这种方法可以提高性能，就像缓存位图一样。缓存位图只是一个好主意，如果您以某种方式更改它。每次勾选缓存一个精灵都会对性能产生巨大影响，几乎没有任何好处。如果更改位图，是否确定缓存位图只是一个好主意？当我不使用缓存时，即使对于不变的位图，也会对HuuUge性能产生影响。当我使用缓存时，性能问题就会消失。我不知道这是否也适用于SpriteSheet-然后我正在使用fiddle中的第二种方法缓存未更改的位图，然后在SpriteSheet中使用它。你认为这是错误的吗？如果你缓存一个位图而不更改它，你只是在画布上制作一个新的位图，而不是在图像标签上。原始版本仍将在内存中，新版本既在内存中，也被推送到GPU。