Отже, я роблю HTML5 RPG просто для розваги. Карта - це <canvas>(ширина 512 пікселів, висота 352 пікселів | 16 плиток поперек, 11 плиток зверху вниз). Я хочу знати, чи існує більш ефективний спосіб фарбування <canvas>.
Ось як у мене це зараз.
Як завантажуються та малюються плитки на карті
Карта намальована плиткою (32х32) за допомогою 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);
}
Природно, коли гравець починає гру, він завантажує карту, яку він остаточно залишив. Але для цього це карта з усіма травами.
Зараз карти використовують 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: поточний ідентифікатор карти, на якій ви знаходитесь.
- leftID: Який ідентифікатор
currentIDзавантажувати, коли ви виходите зліва від поточної карти. - rightID: Ідентифікатор, який
currentIDпотрібно завантажити, коли ви виходите праворуч від поточної карти. - downID: ідентифікатор, який
currentIDпотрібно завантажити, коли ви виходите внизу поточної карти. - upID: Який ідентифікатор
currentIDпотрібно завантажити, коли ви виходите вгорі поточної карти.
Що - то Примітка: Якщо якась або leftID, rightID, upIDабо bottomIDне є специфічними, це означає , що вони є 0. Це означає, що вони не можуть залишити цю сторону карти. Це просто невидима блокада.
Отже, як тільки людина вийде на бік карти, залежно від місця виходу ... наприклад, якщо вона вийшла на дні, bottomIDбуде номер mapзавантажуваного і таким чином буде намальований на карті.
Ось представницький .GIF, який допоможе вам краще візуалізувати:
Як бачите, рано чи пізно з багатьма картами я матиму справу з багатьма посвідченнями. І це, можливо, може стати трохи заплутаним і неспокійним.
Очевидним плюсом є те, що він завантажує одночасно 176 плиток, оновлює невелике полотно 512x352 та обробляє одну карту за один раз. Суть полягає в тому, що ідентифікатори MAP при роботі з багатьма картами часом можуть заплутатися.
Моє запитання
- Це ефективний спосіб зберігання карт (враховуючи використання плиток), чи є кращий спосіб поводження з картами?
Я думав по лінії гігантської карти. Розмір карти великий, і все це один двовимірний масив. Проте огляд перегляду все ще має 512x352 пікселів.
Ось ще один .gif, який я зробив (для цього питання), щоб допомогти візуалізувати:
Вибачте, якщо ви не можете зрозуміти мою англійську. Будь ласка, запитайте все, що у вас є проблеми з розумінням. Сподіваюся, я дав зрозуміти. Дякую.