createJS缓存tilemap背景不呈现

Question

如果我在创建地图后没有缓存切片容器，我可以看到它们呈现在画布上：

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); 
}

为什么？

Answer 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