Problems with the build grid and images for the map with canvas HTML

advertisements

I'm doing a map with canvas for my future browser game. But, I have a some problems with the tiles and grid generation. Actually, I have three steps in my algorithm: I first generate the background tiles (grass, sea, ...) with a loop of drawImage, then I generate the top layer tiles (villages, oasis, ...) with a loop of drawImage again and to finish I generate the grid with a loop of moveTo/lineTo.

To illustrate you all of this, I will show you my algorithm:

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();
    }
},

The problem is that sometimes there is only the background tiles which are generated. Moreover, the grid is never generated. I don't know how to resolve this, I have no error in the console and I don't anything wrong.

Thank you for your answers (and sorry for my English, I'm french and it's the first time I post on English forum).


I have had many problems loading images until i used this pattern:

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

I got it here: http://codeincomplete.com/posts/javascript-game-foundations-loading-assets/ I had tried the method you are using and it didn't quite work properly. This method gives time for loading the image.

As far as your grid, i looked at it in JSBIN and it seems to work as long as i substituted dummy values for camera.x and tileSize. Maybe there is a problem with the camera? Loading all of your tiles into a TilesAtlas array of image objects might be a better way to go, each image can have an id corresponding to the index of TileAtlas. This way you only load it once.

Hope it helps..