javascript - EaselJS 位图未显示

Question

我遇到一个问题，位图在创建并添加到舞台后似乎正在加载。您可以看到所有这些代码都在工作 right here 。您可以查看控制台日志以获取我收到的日志语句(也如下所示)。

我在此处的函数中创建了位图(我知道这段代码工作正常——您不必阅读本文，但请注意最后如何将 game.update 设置为 true)。

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

我的问题在于tick函数，它每秒被调用60次。我只希望 map 在发生更改时更新(当 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 仅在创建所有位图后才设置为 true。正如您所看到的，如果您加载网站(here 又是链接)，控制台日志会显示在更新阶段之前要创建的所有位图。这也显示在控制台打印语句中。如果单击屏幕中心并拖动鼠标，则可以通过移动 map 来强制更新，这会将 game.update 更改为 true 并正确强制舞台更新。我不明白为什么位图没有立即显示，因为仅在创建位图并将其添加到舞台后才明确调用 game.update。位图确实有一个visible属性，但默认值无论如何都是true。

Answer 1

我在这里回答了这个问题 http://community.createjs.com/discussions/easeljs/5440-bitmaps-not-showing-immediately-after-being-loaded

简单的回答是，图像被创建，但并未实际加载。它们可以添加到 DOM 中，以便与 d​​ocument.load 一起考虑(我相信这是发布者的解决方案)，但更好的方法是在文档加载后正确预加载它们，使用类似 PreloadJS ( http://createjs.com/preloadjs ) 的东西。