在EaselJS中缓存SpriteSheets [英] Cache SpriteSheets in EaselJS

问题描述

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

How can I cache SpriteSheets in EaselJS? I have a Sprite object and when I use user.hero.cache(0, 0, 30, 40); it stops playing animation (probably because I'm just caching the current frame, not the entire SpriteSheet image). So how can I cache it?

这是我相关的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而不损害其动画效果吗？

I've tried caching the data.image or user.hero.spriteSheet too, without success. Is there any way to cache the SpriteSheet without compromising its animations?

推荐答案

缓存Sprite时，您就是

When you cache the sprite, you are saving off how it looks at that instant.

您能解释一下为什么要缓存它吗？我能想到要缓存的唯一原因是应用过滤器。每次缓存它时，内容都会绘制到屏幕外的画布上，然后替换它。如果您具有不变的复杂内容（例如容器或图形），这很有意义，但是对于Spritesheet，则意味着您正在创建一个新的位图以绘制位图。 Spritesheet本身是进行文件大小，网络和GPU优化的好方法，因此重新缓存它基本上抵消了所有这些好处。

Can you explain why you want to cache it? The only reason I can think of to cache it would be to apply filters. Each time you cache it, the contents are drawn to an off-screen canvas, which is then drawn in place of it. This makes a lot of sense if you have complex content, like a container or graphics, which do not change, but with the spritesheet, it means you are creating a new bitmap to draw a bitmap. The spritesheet itself is a great way to be filesize, network, and GPU-optimzed, so re-caching it is basically negating all those benefits.

如果要缓存无论如何，您将需要重新缓存它，或在每次更改时调用 updateCache（）。这是一个使用股票代码的示例。

If you want to cache anyways, you will need to re-cache it, or call updateCache() every time it changes. Here is an example using the ticker.

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

这是我不久前使用几种过滤器方法进行的快速演示。它提供了一个常量重新缓存的示例，以及一个缓存整个Spritesheet一次应用过滤器，然后将该缓存版本用于Sprite的示例。
http://jsfiddle.net/lannymcnie/NRH5X/

Here is a quick demo I did a while back using a few approaches for filters. It provides an example of constant re-caching, as well as an example where the entire spritesheet is cached to apply the filter once, and then that cached version is used for the sprite. http://jsfiddle.net/lannymcnie/NRH5X/

这篇关于在EaselJS中缓存SpriteSheets的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！