createJS缓存tilemap背景不渲染答案

【问题标题】：createJS caching tilemap background does not rendercreateJS缓存tilemap背景不渲染
【发布时间】：2014-03-17 15:17:41
【问题描述】：

如果我在创建地图后不缓存瓦片容器，我可以看到它们渲染到画布上：

function createWorld() {
    background = new createjs.Container();      

    for (var y = 0; y < mapWidth; y++) {
        for (var x = 0; x < mapHeight; x++) {
            var tile = new createjs.Bitmap('images/tile.png');
            tile.x = x * 28;
            tile.y = y * 30;
            background.addChild(tile);
        }
    }
    //background.cache(0, 0, mapWidth, mapHeight);
    stage.addChild(background); 
}

如果我缓存了 tile 子元素的背景容器，它就不会渲染

function createWorld() {
    background = new createjs.Container();      

    for (var y = 0; y < mapWidth; y++) {
        for (var x = 0; x < mapHeight; x++) {
            var tile = new createjs.Bitmap('images/tile.png');
            tile.x = x * 28;
            tile.y = y * 30;
            background.addChild(tile);
        }
    }
    background.cache(0, 0, mapWidth, mapHeight);
    stage.addChild(background); 
}

为什么？

【问题讨论】：

标签： html caching html5-canvas createjs

【解决方案1】：

这可能是因为即使在预加载的情况下，如果您使用路径创建图像，图像也可能无法同步使用。如果您不缓存它们，那么它们不会在阶段更新时立即显示 - 但如果您勾选阶段，它们可能会立即加载（它们只需要一帧左右）。

我建议您在内部预加载它们，或者使用类似 PreloadJS 的东西。然后将加载的实例传递给位图。

var img = document.createElement("img");
img.onload = draw;
img.src = "images/tile.png";

function draw() {
    // loop
    var bmp = new createjs.Bitmap(img); // Use a reference instead of a path
}

请注意，这也减少了开销，因为只创建了一个图像，并且所有位图共享对它的引用。

如果您的所有图块都相同，您可能需要查看Graphics.beginBitmapFill() 方法。 http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_beginBitmapFill

【讨论】：