javascript - 在 EaselJS 中缓存 SpriteSheets

标签 javascript caching html5-canvas easeljs sprite-sheet

如何在 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);

没有缓存:

without cache

带缓存:

with cache

我也尝试过缓存 data.imageuser.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/

相关文章:

javascript - 导航栏悬停效果

javascript - 没有从 appRouter 调用 Backbone Marionette Controller 方法

angularjs - AngularJS 在哪里存储缓存数据

apache - 为什么 Lighthouse 使我的缓存文件失败?

javascript - HTML Canvas : Multiple getContext plotting at same time

javascript - ngx-gauge 不显示接收到的数据

javascript - jQuery 动画 - 首次运行后不一致

python - Memcached 使用哪个 Python 模块?

javascript - 在 HTML Canvas 中单独旋转平铺图像

android - 移动版 Chrome HTML Canvas 宽度限制