Bonjour, je suis actuellement en train de créer une map en utilisant les canvas. Je me trouve confronter à un problème lorsque je veux dessiner chacune de mes tiles dans ce canvas. Mon algo est assez simple : je crée une balise canvas, je récupère le context et ensuite je fais appel à 3 fonctions : une qui fait génère les tiles en background, la deuxième qui génère les tiles au-dessus des tiles de background et la dernière qui créer une grille. Le problème est que seules les tiles de background sont générées et tout le reste n'apparaît pas sur la map. Voici mon code :
Code :
drawMapContent: function() {
this.ctx = document.getElementById(this.id).getContext("2d");
camera.constructCamera(map, this.width, this.height);
this.drawTilesMap(0, this.ctx); // je génère les tiles en background layer de la map
this.drawTilesMap(1, this.ctx); // je génère les tiles en top layer de la map
this.drawGridMap(this.ctx); // je génère la grille de la map
},
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;
// on précharge l'image de tous les tiles, une fois chargée on peut commencer à drawImage()
var imageTilesAtlas = new Image();
imageTilesAtlas.src = this.tileAtlas;
imageTilesAtlas.onload = function() {
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(
imageTilesAtlas, // image contenant les tiles
(tile - 1) * tileSize, // 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
);
}
}
}
};
camera.recenterOnMyCity();
},
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)"; // couleur et opacité du quadrillage
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();
}
},
