在 EaselJS 中缓存 SpriteSheets

Posted 2023-03-25

【中文标题】在 EaselJS 中缓存 SpriteSheets

【英文标题】：Cache SpriteSheets in EaselJS

【发布时间】：2014-08-21 09:03:06

【问题描述】：

如何？我有一个 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？

【参考方案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/

【讨论】：

但是我不能缓存源图像而不是实际帧吗？因为 spritesheet 实际上是一个图像，至少对于位图来说，缓存会大大提高性能。

我没有注意到您的 JSFiddle 已经回答了我的问题，并且您正在缓存位图，然后在 data2 对象中使用它。这种方法可以像缓存位图一样提高性能吗？

缓存位图只是一个好主意，如果你以某种方式改变它。每个滴答声缓存一个精灵会对性能产生巨大影响，而且几乎没有任何好处。

您确定缓存位图只有在您更改后才是一个好主意？当我不使用缓存时，即使对于未更改的位图，也会产生 huuuuge 性能影响。然后当我使用缓存时，性能问题就消失了。我不知道这对于 SpriteSheets 是否也是如此 - 然后我目前正在使用您的小提琴中的第二种方法来缓存未更改的位图，然后在 SpriteSheet 中使用它。你认为这是错误的吗？

如果你缓存一个位图而不改变它，你只是在创建一个新的位图，但在画布上而不是在图像标签上。原来的仍然在内存中，而新的既在内存中，又被推送到 GPU。