如何在 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?
最佳答案
当您缓存 Sprite 时,您可以保存它在那一刻的外观。
你能解释一下为什么要缓存它吗?我能想到缓存它的唯一原因是应用过滤器。每次缓存它时,内容都会绘制到屏幕外的 Canvas 上,然后绘制在它的位置。如果您有复杂的内容(例如不会更改的容器或图形),那么这很有意义,但是对于 spritesheet,这意味着您正在创建一个新的位图来绘制位图。 spritesheet 本身是文件大小、网络和 GPU 优化的好方法,因此重新缓存它基本上会抵消所有这些好处。
如果您无论如何都想缓存,则需要重新缓存它,或者在每次更改时调用updateCache()
。这是使用股票代码的示例。
createjs.Ticker.on("tick", function() {
user.hero.updateCache();
// or
user.hero.cache(0,0,30,40)
}, this);
这是我不久前使用几种过滤器方法完成的快速演示。它提供了不断重新缓存的示例,以及缓存整个 Sprite 表以应用一次过滤器,然后将该缓存版本用于 Sprite 的示例。 http://jsfiddle.net/lannymcnie/NRH5X/
关于javascript - 在 EaselJS 中缓存 SpriteSheets,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24499486/