Pygame [보충]: 등축투영 타일의 좌표

이전의 등축투영 타일의 좌표 포스트는 코드를 기준으로 설명했고 배치하는 방식에 대한 설명이 꽤나 불성실해서 보충하는 포스트를 작성하였습니다.

규칙을 파악하기

각각 \( w_{tile} \) 는 타일셋 이미지의 너비, \( h_{tile} \)는 타일셋 이미지의 높이, \( w_{grid} \)는 배치할 격자의 너비, \( h_{grid} \)는 배치할 격자의 높이입니다. 아이디어를 얻기 위해 그림을 보며 수식으로 정리해봅니다.

$$ \begin{matrix} f_{x}(0, 0) = & 0 & f_{y}(0, 0) = & 0 \\ f_{x}(1, 0) = & - 0.5 w_{grid} & f_{y}(1, 0) = & 0.5 h_{grid} \\ f_{x}(0, 1) = & 0.5 w_{grid} & f_{y}(0, 1) = & 0.5 h_{grid} \end{matrix} $$

아직은 헷갈리니 조금 더 나열해봅니다.

$$ \begin{matrix} f_{x}(1, 1) = & 0 & f_{y}(1, 1) = & h_{grid} \\ f_{x}(2, 0) = & -w_{grid} & f_{y}(2, 0) = & h_{grid} \\ f_{x}(0, 2) = & w_{grid} & f_{y}(0, 2) = & h_{grid} \end{matrix} $$

이제 함수를 만들어봅니다.

$$ \begin{split} f_{x}(x_{i}, y_{i}) &= - 0.5 \medspace w_{grid} \medspace x_{i} + 0.5 \medspace w_{grid} \medspace y_{i} \\ f_{y}(x_{i}, y_{i}) &= 0.5 \medspace h_{grid} \medspace x_{i} + 0.5 \medspace h_{grid} \medspace y_{i} \end{split} $$

타일 배치 소스코드

앞서 만든 함수를 사용해 타일을 배치하는 메서드를 작성합니다.

def blit_to(self, surface: pygame.Surface):
    surface.fill(pygame.Color(0, 0, 0, 0))
    xrange, yrange = [range(i) for i in self.__map_size]
    iso_width, iso_height = [i / 2 for i in self.__grid_size]
    for _xi, _yi in itertools.product(xrange, yrange):
        tile = self.__tileset[self.__grid_map[_xi][_yi]]
        iso_x = -iso_width * _xi + iso_width * _yi
        iso_y = iso_height * _xi + iso_height * _yi
        surface.blit(tile, (iso_x, iso_y))

어제 만든 소스코드와 큰 차이는 없습니다. 다만, 위에서 구한 함수를 사용했다는 점을 강조하기 위해 몇가지 변수 변경이 있습니다.