Jadi, saya membuat HTML5 RPG hanya untuk bersenang-senang. Peta ini berukuran <canvas>
(lebar 512px, tinggi 352px | 16 ubin, 11 ubin dari atas ke bawah). Saya ingin tahu apakah ada cara yang lebih efisien untuk melukis <canvas>
.
Begini cara saya memilikinya sekarang.
Bagaimana ubin dimuat dan dicat di peta
Peta sedang dilukis oleh ubin (32x32) menggunakan Image()
potongan. File gambar dimuat melalui for
loop sederhana dan dimasukkan ke dalam array yang dipanggil tiles[]
untuk DILARANG menggunakan drawImage()
.
Pertama, kami memuat ubin ...
dan inilah cara ini dilakukan:
// 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);
}
Tentu saja, ketika seorang pemain memulai permainan, ia memuat peta yang terakhir mereka tinggalkan. Tapi untuk di sini, itu peta semua rumput.
Saat ini, peta menggunakan array 2D. Ini contoh peta.
[[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]];
Saya mendapatkan peta yang berbeda menggunakan if
struktur sederhana . Setelah array 2d di atas return
, nomor yang sesuai di setiap array akan dicat sesuai dengan yang Image()
tersimpan di dalamnya tile[]
. Kemudian drawImage()
akan muncul dan melukis sesuai dengan x
dan y
dan waktu itu dengan 32
melukis pada x-y
koordinat yang benar .
Bagaimana banyak perpindahan peta terjadi
Dengan permainan saya, peta memiliki lima hal yang dapat melacak: currentID
, leftID
, rightID
, upID
, dan bottomID
.
- currentID: ID saat ini dari peta tempat Anda berada.
- leftID: ID
currentID
untuk memuat apa saat Anda keluar di sebelah kiri peta saat ini. - rightID: ID
currentID
untuk memuat apa saat Anda keluar di kanan peta saat ini. - downID: ID
currentID
untuk memuat apa saat Anda keluar di bagian bawah peta saat ini. - upID: ID
currentID
untuk memuat apa saat Anda keluar di bagian atas peta saat ini.
Sesuatu untuk catatan: Jika salah leftID
, rightID
, upID
, atau bottomID
TIDAK tertentu, yang berarti mereka adalah 0
. Itu berarti mereka tidak dapat meninggalkan sisi peta itu. Ini hanyalah blokade yang tidak terlihat.
Jadi, begitu seseorang keluar dari sisi peta, tergantung di mana mereka keluar ... misalnya jika mereka keluar di bagian bawah, bottomID
akankah jumlah map
memuatnya dan dengan demikian akan dilukis di peta.
Berikut ini .GIF representasional untuk membantu Anda memvisualisasikan dengan lebih baik:
Seperti yang Anda lihat, cepat atau lambat, dengan banyak peta saya akan berurusan dengan banyak ID. Dan itu mungkin bisa sedikit membingungkan dan sibuk.
Kelebihan yang jelas adalah bahwa ia memuat 176 ubin sekaligus, menyegarkan kanvas 512x352 kecil, dan menangani satu peta sekaligus. Yang menipu adalah id MAP, ketika berhadapan dengan banyak peta, terkadang membingungkan.
Pertanyaan saya
- Apakah ini cara yang efisien untuk menyimpan peta (mengingat penggunaan ubin), atau apakah ada cara yang lebih baik untuk menangani peta?
Saya berpikir sepanjang garis peta raksasa. Ukuran peta besar dan semuanya adalah satu array 2D. Viewport, bagaimanapun, masih 512x352 piksel.
Berikut ini .gif yang saya buat (untuk pertanyaan ini) untuk membantu memvisualisasikan:
Maaf jika Anda tidak dapat mengerti bahasa Inggris saya. Silakan tanyakan apa pun yang Anda punya kesulitan untuk mengerti. Semoga, saya membuatnya jelas. Terima kasih.