我正在为我未来的浏览器游戏制作一张带有画布的地图。但是，我对瓷砖和网格生成有一些问题。实际上，我在算法中有三个步骤：我首先使用drawImage循环生成背景图块（草，海，...），然后生成带有循环的顶层图块（村庄，绿洲，...）再次使用drawImage并完成我使用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();
}
},
问题在于，有时只会生成背景图块。而且，从不生成网格。 我不知道如何解决这个问题，我在控制台中没有错误，我没有任何错误。
感谢您的回答（对不起我的英语，我是法国人，这是我第一次在英语论坛上发帖）。
答案 0 :(得分：0)
在使用此模式之前，我在加载图像方面遇到了很多问题：
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替换了虚拟值，它似乎就可以工作。也许相机有问题？将所有切片加载到TilesAtlas图像对象数组中可能是更好的方法，每个图像都可以具有与TileAtlas索引相对应的id。这样你只需加载一次。
希望有所帮助......
答案 1 :(得分：0)
感谢您的回答。我认为我用loadImage（）方法解决了我的tile生成问题：谢谢你。现在，我已经：
loadImage: function (src, ctx) {
img = document.createElement('img');
img.addEventListener('load', function() {
canvas.drawTilesMap(0, ctx, img); // je génère les tiles en background layer de la map
canvas.drawTilesMap(1, ctx, img); // je génère les tiles en top layer de la map
} , false);
img.src = src;
},
drawMapContent: function() {
this.ctx = document.getElementById(this.id).getContext("2d");
camera.constructCamera(this.width, this.height);
this.loadImage(this.tileAtlas, this.ctx);
this.drawGridMap(this.ctx, camera.x, camera.y); // je génère la grille de la map
camera.recenterOnMyCity();
},
drawTilesMap: function(layer, ctx) {
var tileSize = map.getTileSize();
var startCol = Math.floor(camera.x / tileSize);
var startRow = Math.floor(camera.y / tileSize);
/*********** On empêche l'algo de créer des cases juste pour combler la vue caméra ***********/
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;
for (var c = startCol; c <= endCol; c++) {
for (var r = startRow; r <= endRow; r++) {
var tile = map.getTile(layer, c, r); // recupère le type de case (0, 1, 2, 3, 4, 5 ou 6)
var x = (c - startCol) * tileSize + offsetX;
var y = (r - startRow) * tileSize + offsetY;
if (tile !== 0) { // 0 => empty tile
ctx.drawImage(
img, // image contenant les tiles
(tile - 1) * map.defaultTileSize, // x à partir duquel prendre l'image (pour sélectionner la bonne texture)
0, // y à partir duquel prendre l'image (pour sélectionner la bonne texture)
map.defaultTileSize, // source width
map.defaultTileSize, // source height
Math.round(x), // target x
Math.round(y), // target y
tileSize, // target width
tileSize // target height
);
}
}
}
},
drawGridMap: function (ctx, cameraX, cameraY) {
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)"; // couleur et opacité du quadrillage
for (var r = 0; r < map.rows; r++) {
x = - cameraX;
y = r * tileSize - cameraY;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(width, y);
ctx.stroke();
}
for (var c = 0; c < map.cols; c++) {
x = c * tileSize - cameraX;
y = - cameraY;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, height);
ctx.stroke();
}
},
当你说要在tilesAtlas中加载瓷砖时，我真的不明白：当所有瓷砖都在这个数组中时，你怎么能画出不同的瓷砖？在所有索引上浏览此数组和drawImage（）？当你说这种方法会加载一次图像时，我认为如果你在地图上移动，你就必须改变这个数组的内容吗？
但是对于网格来说，它是如此奇怪，我监视的是没有问题：它从画布的一部分到画布的另一侧做了线条。你使用了camera.x和tileSize的值是什么？
感谢您的帮助。
答案 2 :(得分：0)
也许tilesAtlas令人困惑。我的想法是创建一个图像数组，让我们称之为Tiles。
Tiles [0]是砂砖的图像。瓷砖[1]是一个图像 草瓦。等。
你甚至可以拥有一个包含Tile属性的Tile类。然后在世界地图中，您可以在某处获得平铺数据。
世界[0] [0] = 0.世界[0] [1] = 1。
0表示砂砖。 1表示草瓦。