0

I'm facing a problem while displaying my tiles with both html canvas and javascript.

I'm wondering me why the tiles are not at the same level... My code:

var map = [
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1],
  ];

var canvas = document.createElement("canvas");
canvas.setAttribute('width', '768px');
canvas.setAttribute('height', '768px');
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'https://opengameart.org/sites/default/files/basic_ground_tiles.png';
document.getElementById("content").appendChild(canvas);
var tile_width = 128;
var tile_height = 128;

img.onload = function() {
  for (i = 0; i < map.length; i++){
    for (j = map[i].length; j >= 0; j--){
      var x = (j * tile_width / 2) + (i * tile_width / 2);
      var y = (i * tile_height / 2) - (j * tile_height / 2);
      ctx.drawImage(img, 0, 0, 128, 128, x, y, 128, 128);
    }
  }
}

This is plugged to an html div with id "content". Thanks.

enter image description here Related to Drawing Isometric game worlds

EDIT: Now the problem looks like this:

enter image description here

How can I manage to do a full square?

christophedebatz
  • 184
  • 3
  • 16
  • 1
    Try setting `tile_height` to 64.. – Keith Jan 26 '18 at 10:30
  • Thanks a lot it do the thing. Now there is another problem, i edited my post! – christophedebatz Jan 26 '18 at 11:04
  • 1
    2 problems, -> `for (j = map[i].length; j >= 0; j--){` you need a `-1` on length. And your can just offset you `y` to bring the map down try just putting `+384` onto the `y`, as you map is drawn from the center left. – Keith Jan 26 '18 at 11:07
  • Thanks a lot @Keith it seems to works well now! – christophedebatz Jan 26 '18 at 11:10
  • 1
    No problem, just a note. Setting `tile_height` to 64 is only for the rendering section, to extract the correct sprite from the sprite sheet you will still want that to be 128. Just thought I'd mention as I assume your next task is to extract other sprites. A better approach might be to create a new variable called `render_height` and set this to half the `tile_height` – Keith Jan 26 '18 at 11:14
  • Yep, I understand what you mean :) I will proceed like you are saying. Thanks dude. – christophedebatz Jan 26 '18 at 13:10

0 Answers0