Управление текстовыми картами в двумерном массиве для рисования на холсте HTML5

Итак, я делаю RPG на HTML5 просто для удовольствия. Карта является<canvas> (Ширина 512 пикселей, высота 352 пикселя | 16 плиток в поперечнике, 11 плиток сверху вниз). Я хочу знать, есть ли более эффективный способ нарисовать<canvas>.

Вот как у меня это сейчас получается:

How tiles are loaded and painted on map

Карта рисуется плиткой (32x32) с использованиемImage() кусок. Файлы изображений загружаются через простойfor цикл и положить в массив под названиемtiles[] быть покрашенным при использованииdrawImage().

Сначала мы загружаем плитки ...

enter image description here

и вот как это делается:

// SET UP THE & DRAW THE MAP TILES
tiles = [];
var loadedImagesCount = 0;
for (x = 0; x <= NUM_OF_TILES; x++) {
  var imageObj = new Image(); // new instance for each image
  imageObj.src = "js/tiles/t" + x + ".png";
  imageObj.onload = function () {
    console.log("Added tile ... " + loadedImagesCount);
    loadedImagesCount++;
    if (loadedImagesCount == NUM_OF_TILES) {
      // Onces all tiles are loaded ...
      // We paint the map
      for (y = 0; y <= 15; y++) {
        for (x = 0; x <= 10; x++) {
          theX = x * 32;
          theY = y * 32;
          context.drawImage(tiles[5], theY, theX, 32, 32);
        }
      }
    }
  };
  tiles.push(imageObj);
}

Естественно, когда игрок начинает игру, он загружает карту, которую он в последний раз остановил. Но здесь, это карта всех трав.

Прямо сейчас, карты используют 2D-массивы. Вот пример карты.

[[4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 1, 1, 1, 1], 
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 11, 11, 11, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 1, 1, 1, 1, 1, 1, 1, 13, 13, 13, 13, 13, 1], 
[1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 1, 1]];

Я получаю разные карты, используя простойif состав. Как только 2d массив вышеreturnсоответствующий номер в каждом массиве будет окрашен в соответствии сImage() хранится внутриtile[], затемdrawImage() будет происходить и рисовать в соответствии сx а такжеy и раз это по32 рисовать на правильномx-y координат.

How multiple map switching occurs

В моей игре карты должны отслеживать пять вещей:currentID, leftID, rightID, upID, а такжеbottomID.

currentID: The current ID of the map you are on. leftID: What ID of currentID to load when you exit on the left of current map. rightID: What ID of currentID to load when you exit on the right of current map. downID: What ID of currentID to load when you exit on the bottom of current map. upID: What ID of currentID to load when you exit on the top of current map.

Что стоит отметить: если либоleftID, rightID, upID, или жеbottomID НЕ являются конкретными, это означает, что они0, Это означает, что они не могут покинуть эту сторону карты. Это просто невидимая блокада.

Таким образом, как только человек выходит из стороны карты, в зависимости от того, где он вышел ... например, если они вышли внизу,bottomID будет числоmap загрузить и, таким образом, быть нарисованным на карте.

Вот пример .GIF, который поможет вам лучше визуализировать:

enter image description here

Как вы можете видеть, рано или поздно, со многими картами, с которыми я буду иметь делоmany Идентификаторы. И это может стать немного запутанным и беспокойным.

Очевидным плюсом является то, что он загружает 176 плиток за раз, обновляет небольшой холст 512x352 и обрабатывает одну карту за раз. Дело в том, что идентификаторы MAP при работе со многими картами могут иногда сбивать с толку.

My question Is this an efficient way to store maps (given the usage of tiles), or is there a better way to handle maps?

Я думал по линии гигантской карты. Размер карты большой, и все это один двумерный массив. Однако область просмотра по-прежнему составляет 512x352 пикселей.

Вот еще один .gif, который я сделал (для этого вопроса), чтобы помочь визуализировать:

enter image description here

Извините, если вы не понимаете мой английский. Пожалуйста, спросите все, что у вас есть проблемы с пониманием. Надеюсь, я дал понять. Благодарю.

Ответы на вопрос(1)

Ваш ответ на вопрос