如何缓存图像并稍后在 EaselJS 中使用？

Posted 2023-03-25

【中文标题】如何缓存图像并稍后在 EaselJS 中使用？

【英文标题】：How to cache an image and use it later in EaselJS?

【发布时间】：2014-12-11 19:23:02

【问题描述】：

我有一个非常基本的精灵动画。如何缓存图像并在精灵表创建的“图像”部分使用它？ 我试过了：

Image1= new Image(2779,1135)
Image1.src = "img/contur.png"   

但我不知道如何在“图片”部分包含图片 1。

stage = new createjs.Stage(document.getElementById("testCanvas")); stage.clear();

var ss = new createjs.SpriteSheet(
    "animations": "run": [0, 50],
    "images": ["img/contur.png"],
    "frames":
        
        "height": 140,
        "width": 231,
        "regX": 0,
        "regY": 0,
        "count": 51
        
    );

var grant = new createjs.Sprite(ss, "run");

stage.addChild(grant);
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);

【参考方案1】：

如果我对您的问题的理解正确，您希望在图片在 spritesheet 中使用之前加载它。

您有两种方法可以做到这一点：

在img.load上添加回调：

img = new Image();
img.src = "img/contur.png";
img.onload = function(event) 
    // you can create spritesheet here

使用 PreloadJS（推荐）：

loader   = new createjs.LoadQueue(true);
loader.on('complete', function(event) 
    // you can create spritesheet here
);
loader.loadManifest([id:'imageX', src:'img/contur.png']);

如果是这样的话，你还需要运行一个web服务器（例如，使用python：python -m SimpleHTTPServer 8088）

对于这两个选项，您只需要使用图像的路径（浏览器会自动获取预加载的图像）：

var ss = new createjs.SpriteSheet(
    "animations": "run": [0, 50],
    "images": ["img/contur.png"],
    "frames": 
        "height": 140,
        "width": 231,
        "regX": 0,
        "regY": 0,
        "count": 51
    
);

如果您使用的是 PreloadJS，您可以通过别名（定义在清单上）指定加载的图像对象：

"images": [loader.getResult('imageX')],
...

注意：记得在向舞台添加东西或动画帧后调用stage.update()，否则它只会显示空白画布或静态图像。

【讨论】：

非常感谢您的回复。实际上，图像已加载（当我开始游戏时），但在显示在画布上之前（用户完成 lvl 之后）它仍然停留几秒钟。在第二个完成的 lvl 上，它会立即出现。 EaselJS 内部是否需要另一个缓存？

我有一个更大的精灵可以在更大的屏幕上工作。如何缩小 spritesheet 以适应画布区域？