Блог

Главная - Вопросы по программированию - Отображение tilemap в Javascript

Отображение tilemap в Javascript

#javascript #html5-canvas

#javascript #html5-холст

Вопрос:

Вот код, который я использую прямо сейчас, чтобы попытаться сгенерировать tilemap:

 // --- Javascript ---

window.onload = function (){
  var can = document.getElementById("canvas");
  var ctx = can.getContext('2d');
  var map = {
  cols: 8, //# of cols
  rows: 8, // # of rows
  tSize: 32, // tile size (32px x 32px)
  tiles: [
    [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, 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]
  ], // map
};

var tileAtlas = new Image();
tileAtlas.src = 'Tiles.png';
tileAtlas.onload = function () {
  for (var c = 0; c < map.cols; c  ) {
    for (var r = 0; r < map.rows; r  ) {
      if (map.tiles[c][r] !== 0) { // 0 is an empty tile
        ctx.drawImage(
          tileAtlas, // image
          map.tiles[c][r] * 32, // cut start x
          0, // cut start y
          map.tsize, // size of tiles for cut size x
          map.tsize, // size of tiles for cut size y
          c * map.tsize, // place tiles on canvas x
          r * map.tsize, // place tiles on canvas y
          map.tsize, // place height
          map.tsize // place width
        );
      }
    }
  }
}
}

вот таблица спрайтов

Предполагалось, что на нем будет отображаться сетка «травы» размером 8х8, но она была пустой, хотя консоль была чистой

Комментарии:

1. Что касается строки if (1 !== 0) { // 0 is an empty tile , это фактический код, который вы используете прямо сейчас, или была опечатка при копировании кода?

2. tsize и tSize — это не одно и то же.

3. извините, нет, это было для того, чтобы попробовать отладку, потому что все это не было пустым пространством, поэтому я просто сделал это всегда верным. это if(tiles[c][r] !== 0){ // 0 is an empty tile

4. Пожалуйста, отредактируйте свой код в вопросе, чтобы включить это исправление @Gamecocks20048

Ответ №1:

Вы неправильно написали tsize (против tSize ). Кроме того, выражение для второго аргумента кажется не тем, что вы хотите. Вы можете просто передать 0:

 ctx.drawImage(
    tileAtlas, // image
    0,
    0,
    map.tSize, // size of tiles for cut size x
    map.tSize, // size of tiles for cut size y
    c * map.tSize, // place tiles on canvas x
    r * map.tSize, // place tiles on canvas y
    map.tSize, // place height
    map.tSize // place width
);
  

 var can = document.getElementById("canvas");
var ctx = can.getContext('2d');
var map = {
    cols: 8, //# of cols
    rows: 8, // # of rows
    tSize: 32, // tile size (32px x 32px)
    tiles: [
        [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, 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]
    ], // map
};

var tileAtlas = new Image();
tileAtlas.src = 'https://i.stack.imgur.com/2JX3d.png';
tileAtlas.onload = function () {
    for (var c = 0; c < map.cols; c  ) {
        for (var r = 0; r < map.rows; r  ) {
            ctx.drawImage(
                tileAtlas, // image
                0, 
                0,
                map.tSize, // size of tiles for cut size x
                map.tSize, // size of tiles for cut size y
                c * map.tSize, // place tiles on canvas x
                r * map.tSize, // place tiles on canvas y
                map.tSize, // place height
                map.tSize // place width
            );

        }
    }
}  
 <canvas id="canvas" width="256px" height="256px"></canvas>

Комментарии:

1. Это очень близко к тому, что я искал, но я хочу только 1-й элемент, а не всю картинку, поэтому трава перед спрайтом грязи

2. Итак, затем передайте в качестве второго и третьего аргумента ноль. Обновленный ответ соответствующим образом.