Управление текстовыми картами в двумерном массиве для рисования на холсте HTML5
Итак, я делаю RPG на HTML5 просто для удовольствия. Карта является<canvas>
(Ширина 512 пикселей, высота 352 пикселя | 16 плиток в поперечнике, 11 плиток сверху вниз). Я хочу знать, есть ли более эффективный способ нарисовать<canvas>
.
Вот как у меня это сейчас получается:
How tiles are loaded and painted on mapКарта рисуется плиткой (32x32) с использованиемImage()
кусок. Файлы изображений загружаются через простойfor
цикл и положить в массив под названиемtiles[]
быть покрашенным при использованииdrawImage()
.
Сначала мы загружаем плитки ...
и вот как это делается:
// 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
координат.
В моей игре карты должны отслеживать пять вещей:currentID
, leftID
, rightID
, upID
, а такжеbottomID
.
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, который поможет вам лучше визуализировать:
Как вы можете видеть, рано или поздно, со многими картами, с которыми я буду иметь дело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, который я сделал (для этого вопроса), чтобы помочь визуализировать:
Извините, если вы не понимаете мой английский. Пожалуйста, спросите все, что у вас есть проблемы с пониманием. Надеюсь, я дал понять. Благодарю.