javascript - 使用 Canvas HTML 生成 map 网格和图像的问题

Question

我正在为我 future 的浏览器游戏制作一张带有 Canvas 的 map 。但是，我在图 block 和网格生成方面遇到一些问题。实际上，我的算法分为三个步骤:首先使用drawImage循环生成背景图 block (草，海，...)，然后使用循环生成顶层图 block (村庄，绿洲，...)再次绘制 Image，最后我用 moveTo/lineTo 循环生成网格。

为了向您说明这一切，我将向您展示我的算法:

redrawMapContent: function() {
    this.ctx = document.getElementById(this.id).getContext("2d");

    this.drawTilesMap(0, this.ctx);
    this.drawTilesMap(1, this.ctx);
    this.drawGridMap(this.ctx);
    camera.recenterOnMyCity();
},

drawTilesMap: function(layer, ctx) {
    var tileSize = map.getTileSize();
    var startCol = Math.floor(camera.x / tileSize);
    var startRow = Math.floor(camera.y / tileSize);
	    

    var endCol; var endRow;
    if (camera.width > tileSize * map.cols) endCol = startCol + map.cols - 1;
    else  endCol = startCol + (camera.width / tileSize);

    if (camera.height > tileSize * map.rows) endRow = startCol + map.rows - 1;
    else  endRow = startRow + (camera.height / tileSize);
	  
	    
    var offsetX = -camera.x + startCol * tileSize;
    var offsetY = -camera.y + startRow * tileSize;
      
    var imageTilesAtlas = new Image();
    imageTilesAtlas.onload = function() {
	    for (var c = startCol; c <= endCol; c++) {
		    for (var r = startRow; r <= endRow; r++) {
		         var tile = map.getTile(layer, c, r); 
		         var x = (c - startCol) * tileSize + offsetX;
		         var y = (r - startRow) * tileSize + offsetY;
		         if (tile !== 0) { // 0 => empty tile
		            ctx.drawImage(
		              imageTilesAtlas,
		              (tile - 1) * map.defaultTileSize, 
		              0, 
		              map.defaultTileSize, 
		              map.defaultTileSize, 
		              Math.round(x),  
		              Math.round(y), 
		              tileSize, 
		              tileSize 
		            );
		         }
		    }
	    }
    };
    imageTilesAtlas.src = this.tileAtlas;
},

drawGridMap: function (ctx) {
    var tileSize = map.getTileSize();
    var width = map.cols * tileSize;
    var height = map.rows * tileSize;
    var x, y;

    ctx.strokeStyle = "rgba(100,100,100,0.3)";

    for (var r = 0; r < map.rows; r++) {
	    x = - camera.x;
	    y = r * tileSize - camera.y;
	    ctx.beginPath();
	    ctx.moveTo(x, y);
	    ctx.lineTo(width, y);
	    ctx.stroke();
    }
    for (var c = 0; c < map.cols; c++) {
	    x = c * tileSize - camera.x;
	    y = - camera.y;
	    ctx.beginPath();
	    ctx.moveTo(x, y);
	    ctx.lineTo(x, height);
	    ctx.stroke();
    }
},

问题是有时只生成背景图 block 。而且，网格永远不会生成。 我不知道如何解决这个问题，我在控制台中没有错误，也没有任何错误。

感谢您的回答(对我的英语感到抱歉，我是法国人，这是我第一次在英语论坛上发帖)。

Answer 1

在使用此模式之前，我在加载图像时遇到了很多问题:

function loadImage(src, callback) {
    img = document.createElement('img');
    img.addEventListener('load', function() { callback(img); } , false);
    img.src = src;
}

function run(sprites) {
    tileAtlas = [];
    ctx.drawImage(img,0,0);
    var counter = 0;
    for (var y = 0; y < 10; y++){
         for (var x = 0; x < 10; x++){
              tileAtlas[counter] = ctx.getImageData(
                                   x * tileSize, 
                                   y * tileSize, 
                                   x * tileSize + tileSize, 
                                   y * tileSize + tileSize);
              counter++;
         }
     }


    init();
    loop();

}

loadImage("sprites.png", run);

我在这里得到它: http://codeincomplete.com/posts/javascript-game-foundations-loading-assets/ 我已经尝试过您使用的方法，但效果不太好。此方法为加载图像提供了时间。

就你的网格而言，我在 JSBIN 中查看了它，只要我用camera.x和tileSize替换虚拟值，它似乎就可以工作。也许相机有问题？将所有图 block 加载到图像对象的 TilesAtlas 数组中可能是更好的方法，每个图像都可以有一个与 TileAtlas 索引相对应的 id。这样您只需加载一次。

希望有帮助..