그래서 재미있게 HTML5 RPG를 만들고 있습니다. 지도는 <canvas>(512px 너비, 352px 높이 | 가로 16 타일, 위 아래 11 타일)입니다. 을 칠하는 더 효율적인 방법이 있는지 알고 싶습니다 <canvas>.
여기 내가 지금 가진 방법이 있습니다.
지도에서 타일을로드하고 페인트하는 방법
지도는 Image()조각을 사용하여 타일 (32x32)로 페인트됩니다 . 이미지 파일은 간단한 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 : 현재지도의 현재 ID입니다.
- leftID :
currentID현재지도의 왼쪽에서 나갈 때로드 할 ID입니다 . - rightID :
currentID현재지도의 오른쪽에서 나갈 때로드 할 ID입니다 . - downID :
currentID현재지도 하단에서 나갈 때로드 할 ID입니다 . - upID :
currentID현재지도 상단에서 나갈 때로드 할 ID입니다 .
참고로 뭔가 : 하나하면 leftID, rightID, upID, 또는 bottomID특정하지 않은 수단 것을 그들이 있습니다 0. 그것은 그들이지도의 측면을 떠날 수 없다는 것을 의미합니다. 그것은 단지 보이지 않는 봉쇄입니다.
그래서, 한 사람 한 번 그들은 바닥에 종료하는 경우가 예를 들어 ... 종료 위치에 따라지도의 측면을 종료, bottomID의 수는 것이다 map로드 따라서지도에 그려진 될 수있다.
보다 나은 시각화를 지원하는 표현형 .GIF는 다음과 같습니다.
보시다시피 조만간 많은지도로 많은 ID를 다룰 것 입니다. 그리고 그것은 약간 혼란스럽고 열렬 할 수 있습니다.
확실한 장점은 한 번에 176 개의 타일을로드하고 작은 512x352 캔버스를 새로 고치고 한 번에 하나의 맵을 처리한다는 것입니다. 많은지도를 다룰 때 MAP ID가 때때로 혼동 될 수 있다는 단점이 있습니다.
내 질문
- 이것은 타일을 사용하여 맵을 저장하는 효율적인 방법입니까, 아니면 맵을 처리하는 더 좋은 방법이 있습니까?
나는 거대한지도의 선을 따라 생각하고 있었다. 지도 크기는 크고 모두 하나의 2D 배열입니다. 그러나 뷰포트는 여전히 512x352 픽셀입니다.
시각화를 돕기 위해 (이 질문에 대해) 만든 또 다른 .gif가 있습니다.
내 영어를 이해할 수 없다면 죄송합니다. 이해하기 어려운 것이 있으면 문의하십시오. 잘만되면 나는 그것을 명확히했다. 감사.