EaselJS位图没有显示 [英] EaselJS Bitmaps not showing
问题描述
我有一个问题，即位图他们似乎被创建并添加到舞台后要加载。你可以看到这一切code工作这里。你可以看一下控制台日志中我得到的日志语句（如下所示）。
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).
我在这里创建一个函数的位图（我知道这code正常工作 - 你没有读这一点，但注意game.update是如何设置为true末）
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;
}
我的问题就出在滴答功能，被称为60次。我只是想，如果事情被改变地图更新时（game.update ==真）。
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仅设置为true。正如你可以看到，如果你加载网站（这里再次链接），控制台日志显示所有阶段被更新之前被创建位图。这也显示在控制台打印语句。如果您在屏幕中心点击并拖动鼠标，就可以通过移动地图，从而改变game.update为true，妥善强制更新阶段强制更新。我想不通，为什么不对位图立即显示，因为它们是创建并添加到舞台后，才game.update被明确要求。位图的确有一个明显的特性，但默认值是true反正。
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.
推荐答案
我回答这在这里
<一href=\"http://community.createjs.com/discussions/easeljs/5440-bitmaps-not-showing-immediately-after-being-loaded\" rel=\"nofollow\">http://community.createjs.com/discussions/easeljs/5440-bitmaps-not-showing-immediately-after-being-loaded
简短的答案是，影像创建，但实际上没有加载。它们可以被添加到DOM与document.load（我认为是海报的解决方案）可以考虑，但更好的方法是正确preLOAD他们的文档加载后，使用类似preloadJS（ http://createjs.com/$p$ploadjs ）。
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).
这篇关于EaselJS位图没有显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
