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

我有一个非常基本的精灵动画。如何缓存图像并将其用于精灵图纸创建的“图像”部分？我试着用：如何缓存图像并稍后在EaselJS中使用它？

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

，但我不knwo如何将图像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);

来源

2014-10-16 Alex Stanese

如果我正确地理解了你的问题，你想要在图像使用之前加载图像。

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

添加的回调上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()或动画的FRAM es，否则它只会显示空的画布或静态图像。

来源

2014-10-16 17:52:23 renatopp

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

我也有一个更大的spritesheed在更大的屏幕上工作。我如何缩小spritesheet以适应画布区域？ – 2014-10-17 08:59:50

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

回答

相关问题