Vì vậy, tôi đang tạo một game nhập vai HTML5 chỉ để giải trí. Bản đồ có <canvas>chiều rộng (chiều rộng 512px, chiều cao 352px | 16 ô trên, 11 ô từ trên xuống dưới). Tôi muốn biết nếu có một cách hiệu quả hơn để vẽ <canvas>.
Đây là cách tôi có nó ngay bây giờ.
Làm thế nào gạch được tải và vẽ trên bản đồ
Bản đồ đang được vẽ bằng gạch (32x32) bằng cách sử dụng Image()mảnh. Các tập tin hình ảnh được tải thông qua một forvòng lặp đơn giản và đưa vào một mảng được gọi tiles[]là SƠN khi sử dụng drawImage().
Đầu tiên, chúng tôi tải gạch ...
và đây là cách nó được thực hiện:
// 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);
}
Đương nhiên, khi người chơi bắt đầu trò chơi, nó sẽ tải bản đồ mà họ rời đi. Nhưng ở đây, nó là một bản đồ toàn cỏ.
Ngay bây giờ, các bản đồ sử dụng mảng 2D. Đây là một bản đồ ví dụ.
[[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]];
Tôi nhận được các bản đồ khác nhau bằng cách sử dụng một ifcấu trúc đơn giản . Khi mảng 2d ở trên là return, số tương ứng trong mỗi mảng sẽ được vẽ theo Image()lưu trữ bên trong tile[]. Sau đó drawImage()sẽ xảy ra và vẽ theo xvà yvà lần nó bằng cách 32vẽ trên x-ytọa độ chính xác .
Làm thế nào nhiều chuyển đổi bản đồ xảy ra
Với trò chơi của tôi, bản đồ có năm điều để theo dõi: currentID, leftID, rightID, upID, và bottomID.
- currentID: ID hiện tại của bản đồ bạn đang ở.
- leftID: ID nào
currentIDsẽ tải khi bạn thoát bên trái bản đồ hiện tại. - rightID: ID nào
currentIDsẽ tải khi bạn thoát ở bên phải bản đồ hiện tại. - downID: ID nào
currentIDsẽ tải khi bạn thoát ở dưới cùng của bản đồ hiện tại. - upID: ID nào
currentIDsẽ tải khi bạn thoát trên đỉnh bản đồ hiện tại.
Một cái gì đó để lưu ý: Nếu một trong hai leftID, rightID, upID, hoặc bottomIDlà KHÔNG cụ thể, điều đó có nghĩa họ là một 0. Điều đó có nghĩa là họ không thể rời khỏi phía đó của bản đồ. Nó chỉ đơn thuần là một cuộc phong tỏa vô hình.
Vì vậy, một khi một người thoát ra một bên của bản đồ, tùy thuộc vào nơi họ thoát ra ... ví dụ nếu họ thoát ra ở phía dưới, bottomIDsố lượng maptải sẽ được vẽ và do đó sẽ được vẽ trên bản đồ.
Đây là một .GIF mang tính đại diện để giúp bạn hình dung rõ hơn:
Như bạn có thể thấy, sớm hay muộn, với nhiều bản đồ tôi sẽ xử lý nhiều ID. Và điều đó có thể có thể có một chút bối rối và bận rộn.
Ưu điểm rõ ràng là nó tải 176 gạch cùng một lúc, làm mới một khung vẽ nhỏ 512x352 và xử lý một bản đồ tại một thời điểm. Mặt trái là các id MAP, khi xử lý nhiều bản đồ, đôi khi có thể gây nhầm lẫn.
Câu hỏi của tôi
- Đây có phải là một cách hiệu quả để lưu trữ bản đồ (được sử dụng cho các ô), hoặc có cách nào tốt hơn để xử lý bản đồ?
Tôi đã suy nghĩ dọc theo dòng của một bản đồ khổng lồ. Kích thước bản đồ là lớn và tất cả chỉ là một mảng 2D. Chế độ xem, tuy nhiên, vẫn là 512x352 pixel.
Đây là một .gif khác tôi đã thực hiện (cho câu hỏi này) để giúp trực quan hóa:
Xin lỗi nếu bạn không thể hiểu tiếng Anh của tôi. Hãy hỏi bất cứ điều gì bạn gặp khó khăn để hiểu. Hy vọng, tôi đã làm cho nó rõ ràng. Cảm ơn.