createJS caching tilemap background does not render

Question

If I don't cache the container of tiles after creating the map, I can see them rendered to the canvas:

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

If I do cache the background container of tile children, it won't render

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

Why?

Answer 1

This is probably because that even when preloaded, images may not be available synchronously if you use a path to create them. If you aren't caching them, then they wouldn't show up immediately when the stage is updated -- but if you ticked the stage, they might appear to load instantly (they just take a frame or so).

I recommend you preload them, either internally, or using something like PreloadJS. Then pass the loaded instance to the bitmaps instead.

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
}

Note that this also reduces overhead, since only one image is created, and all the Bitmaps share a reference to it.

If all your tiles are the same, you might want to look at the Graphics.beginBitmapFill() method. http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_beginBitmapFill