Итак, я делаю RPG для HTML5 только для удовольствия. Карта - это <canvas> (ширина 512 пикселей, высота 352 пикселей - 16 плиток, 11 плиток сверху вниз). Я хочу знать, есть ли более эффективный способ рисовать <canvas>.
Вот как у меня это сейчас:
Как плитки загружаются и окрашиваются на карту
Карту окрашивают плитки (32x32) с помощью фрагмента Image(). Файлы изображений загружаются через простой цикл for и помещаются в массив с именем tiles[], чтобы его можно было использовать PAINTED при использовании 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);
}
Естественно, когда игрок начинает игру, он загружает карту, на которой они остановились. Но здесь, это все травяная карта.
В настоящее время на картах используются двумерные массивы. Вот пример карты.
[[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: Текущий идентификатор карты, на которой вы находитесь.
- leftID: Какой идентификатор
currentIDдля загрузки, когда вы выходите слева от текущей карты. - rightID: Какой идентификатор
currentIDдля загрузки, когда вы выходите справа текущая карта. - downID: Какой идентификатор
currentIDдля загрузки при выходе из него внизу текущей карты. - upID: Какой идентификатор
currentIDдля загрузки, когда вы выходите в верхней части текущей карты.
Что-то примечание: если либо leftID, rightID, upID, либо bottomID НЕ являются конкретными, это означает, что они являются 0. Это означает, что они не могут покинуть эту сторону карты. Это просто невидимая блокада.
Итак, как только человек выходит из карты, в зависимости от того, где они вышли... например, если они вышли в нижней части, bottomID будет загружен номер map и, таким образом, будет нарисован на карту.
Здесь представлен репрезентативный .GIF, который поможет вам лучше визуализировать:
Как вы можете видеть, рано или поздно со многими картами я буду иметь дело со многими идентификаторами. И это может стать немного запутанным и беспокойным.
Очевидными плюсами являются то, что он загружает 176 фрагментов за раз, обновляет небольшой холст размером 512x352 и обрабатывает одну карту во времени. Кон является то, что идентификаторы MAP при работе со многими картами могут иногда запутываться.
Мой вопрос
- Это эффективный способ хранения карт (учитывая использование плиток) или лучший способ обработки карт?
Я думал вдоль линии гигантской карты. Размер карты большой, и все это одно 2D-массив. Однако в окне просмотра все еще 512x352 пикселей.
Вот еще один .gif, который я сделал (для этого вопроса), чтобы помочь визуализировать:
Извините, если вы не можете понять мой английский. Пожалуйста, спросите все, что у вас есть проблемы с пониманием. Надеюсь, я дал понять. Спасибо.
