간단한 맵 만드는 방법

2차원 배열을 사용하여 맵을 만들수 있습니다.


1. 맵 이미지 로드

 // 오른쪽 클릭해서 다운받으시면 됩니다.

넓이, 높이가 256px 이며, 한 타일의 넓이, 높이는 16px입니다.


1
2
3
4
5
6
7
8
9
10
var width, height, size
 
var image = new Image();
image.src = './map.png';
image.onload = function() {
    width = image.width;
    height = image.height;
    size = 16;
};
 
cs

2. 맵 데이터 준비

컴퓨터 좌표계에서 x, y좌표는 위와 같습니다.


맵 이미지를 컴퓨터좌표계로 적용해 보면 다음과 같습니다.

(tileSize= 16 입니다 32는 오타입니다.. )


이 이미지에 가상으로 1번부터 tileNumber를 붙여보겠습니다.

그러면 2차원 배열에 tileNumber를 너어주는 형식으로 가상의 맵데이터를 만들수 있습니다.

1
2
3
4
5
6
7
8
9
10
var mapData = [
    [4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
    [4, 1, 1, 1, 1, 1, 3, 3, 3, 4],
    [4, 1, 1, 1, 1, 1, 3, 3, 3, 4],
    [4, 1, 1, 1, 1, 1, 3, 3, 3, 4],
    [17, 17, 17, 17, 26, 27, 27, 28, 26, 26]
];
 
var row = mapData.length;     // 행
var col = mapData[0].length;  // 열
cs


3. getX, getY

이제 tileNumber를 이용하여, 이미지의 x, y좌표를 구해와야합니다.

간단한 공식은 다음과 같습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getX (tileNumber) {
    
    return (tileNum - 1) % (width / size);
 
}
 
function getY (tileNumber) {
    
    return Math.floor((tileNum - 1) * size / width);
 
}
 
 
console.log(getX(17) * size, getY(17) * size); // -> 0, 32
 
cs


4. 맵 그리기


canvas의 drawImage 메서드를 이용하여 그릴수 잇습니다.

https://www.w3.org/TR/2dcontext/#dom-context-2d-drawimage   <- 그림설명이 너무 좋으니 꼭한번 ..


완성된 소스는 다음과 같습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
 
var mapData = [
        [4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
        [4, 1, 1, 1, 1, 1, 3, 3, 3, 4],
        [4, 1, 1, 1, 1, 1, 3, 3, 3, 4],
        [4, 1, 1, 1, 1, 1, 3, 3, 3, 4],
        [17, 17, 17, 17, 26, 27, 27, 28, 26, 26]
    ];
 
    var row = mapData.length;    // 행
    var col = mapData[0].length;  // 열
 
 
    function Map(imgPath, data, size) {
        var self = this;
 
        this.img = new Image();
        this.img.src = imgPath;
        this.img.onload = function() {
            self.width = this.width;
            self.height = this.height;
            self.draw();
        };
 
        this.data = data;
 
        this.row = data.length;     // 행
        this.col = data[0].length;  // 열
 
        this.size = size;
 
        this.getX = function(tileNum) {
            return (tileNum - 1) % (this.width / this.size);
        };
 
        this.getY = function(tileNum) {
            return Math.floor((tileNum - 1) * this.size / this.width);
        };
 
        this.draw =  function() {
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
 
            for( var y = 0; y < this.row; ++y ) {
                for( var x = 0; x < this.col; ++x ) {
                    var tileNum = this.data[y][x];
                    context.drawImage(
                            this.img,
                            this.getX(tileNum) * this.size, this.getY(tileNum)  * this.size, this.size, this.size,
                            x * this.size, y * this.size, this.size , this.size
                    );
                }
            }
        }
    }
 
    var map = new Map('./map.png', mapData, 16);
cs