EaselJS Bitmaps not showing

问题

I'm having an issue where bitmaps seem to be loading after they are created and added to the stage. You can see all this code working right here. You can look at the console log for the log statements I'm getting (also shown below).

I create the bitmaps in a function here (I know this code is working properly -- you don't have to read this but note how game.update is set to true at the end).

for (i = -r; i <= r; i++){
        var min = Math.max(-r, -r - i);
        var max = Math.min(r, r - i);

        for (j = min; j <= max; j++){
            k = -1 * (i + j);
            //var a =  length)Math.floor(Math.random() * t_imgs.;
            //var a = mountain;
            var a;
            if(game.grid[i][j].height == null){
                a = mountain;
            } else if (game.grid[i][j].height > .5){
                a = plain;
            } else{
                a = water;
            }
            var b = Math.floor(Math.random() * (game.t_imgs[a].length ));
            if(game.t_imgs[a][b] == null){
                console.log("NULL:", a, b);
            }
            bitmap = new createjs.Bitmap(game.t_imgs[a][b]);
            container.addChild(bitmap); 
            bitmap.regX = game.hexwidth/2;
            bitmap.regY = game.hexheight/2;
            bitmap.x =  game.xcenter + game.hexwidth * .75 * i;
            bitmap.y =  game.ycenter + game.hexheight * .5 * (j - k);
            game.grid[i][j].termap = bitmap;
        }
    }



    document.getElementById("loader").className = "";
    createjs.Ticker.addEventListener("tick", tick);

    console.log("finished loading images and creating bitmaps. Game update set to true");
    game.update = true;
}

My problem lies in the tick function, which is called 60 times a second. I only want the map to update if something is changed (when game.update == true).

function tick(event) {
            if(game.update == true){
                game.update = false;
                var i,j,k;
                var r = game.radius;
                for (i = -r; i <= r; i++){
                    var min = Math.max(-r, -r - i);
                    var max = Math.min(r, r - i);
                    for (j = min; j <= max; j++){
                        k = -1 * (i + j);
                        if(game.grid[i][j].termap != null){
                            game.grid[i][j].termap.x =  game.xcenter + game.hexwidth * .75 * i;
                            game.grid[i][j].termap.y =  game.ycenter + game.hexheight * .5 * (j - k);
                        } else {
                            console.log("A bitmap is null.");
                            game.update = true; //still needs to be updated
                        }
                    }
                }
            game.stage.update(event);
            console.log("UPDATED!");
            }
        }

game.update is only set to true after all the bitmaps are created. As you can see if you load the website, (here is the link again), the console log shows all the bitmaps to be created before the stage is updated. This is also shown in the console print statements. If you click in the center of the screen and drag your mouse, you can force an update by moving the map, which changes game.update to true and properly forces the stage to update. I can't figure out why the bitmaps aren't showing immediately, as the game.update is clearly called only after they are created and added to the stage. Bitmaps do have a visible property, but the default value is true anyways.

回答1:

I answered this here http://community.createjs.com/discussions/easeljs/5440-bitmaps-not-showing-immediately-after-being-loaded

The short answer is that the images are created, but not actually loaded. They can be added to the DOM to be considered with the document.load (which I believe was the poster's solution), but a better approach is to properly preload them after the document load, using something like PreloadJS (http://createjs.com/preloadjs).

来源：https://stackoverflow.com/questions/20670178/easeljs-bitmaps-not-showing