안녕하세요. 저는 벌써 몇년째 겜을 만드는 icefill이라는 사람입니다. 이미 만든 게임 홍보는 해야겠는데 쉽지가 않네요. 한달 전쯤에 몇몇 갤을 돌면서 홍보를 했는데 이번에는 명분이 부족합니다. 그래서 이번에 화면 회전기능을 구현한 김에 생각보다 어려웠던 높낮이가 있는 2D 쿼터뷰 겜을 만든 과정에 대해서 이야기 해보려 합니다. 얼마나 관심을 가져 줄지는 모르겠지만 조금이라도 게임 호보가 되었으면 좋겠네요. 그렇다고!
일단 그게 뭐냐? 원래는 2D 아이소메트릭 뷰라고 한다. 택틱스 SRPG게임에서는 전설적인 택틱스 오우거를 보자
(나무위키 펌)
이렇게 원근법이 적용되지 않은 탑뷰와 비슷하지만 배경 타일이 90도로 되어있지 않고 마름모마냥 45도 돌아가 있는 뷰를 말한다. 게임에서는 오래 전 부터 이런게임이 있었던 것 같은데 내가 알고 있는 제일 오래된 게임은 마블 매드니스란 구슬 굴리는 게임이다.
(위키피디아 펌)
높낮이가 있는 2D를 표현하는데 탑뷰에 비해서 더 높이를 잘 표현해주고 2D게임에서 3D 느낌을 줄 수 있는 이점이 있다. 그렇다면 내 게임에서 그런 이점 때문에 이 시점을 택했나? 그건 아니고 택틱스 오우거 따라하느라고 그랬다.
위키를 찾아보니까 진짜 아이소메트릭 뷰는 아래와 같이 모든 각이 120도가 되는 시점이라 하는데
(위키피디아 펌)
게임에서는 이걸 쓰지 않고
이런 시점을 쓴다(특히 옛날 게임에서는). 왜냐햐면 도트를 그릴때 각 선들이 오른쪽으로 2 만큼 이동시 위로 1 이동해서 균일하게 보이므로. 위의 진짜 아이소메트릭 뷰는 선이 삐뚤빼뚤해진다. 그래서 옛날 겜들은 다이메트릭 뷰라고 하는 위의 시점으로 했는 듯 싶다.
앞으로는 쓰기 편하게 쿼터뷰라고 하겠다.
0. 되도록이면 쿼터뷰는 피하는게 낫다.
일단 높낮이가 있으면 2D는 구현하기 힘들기 때문에 차라리 3D 배경을 쓰는 것이 편하다.
(파이날 판타지 택틱스, Rock paper scissors 펌)
2D로 구현하려면 일단 도트 찍기가 힘들고 (왜냐하면 정사각형으로 되어있는 도트로 비스듬한 그림을 그리기 힘들 뿐더러 입체적으로 그려야 하기 때문에...) 어떤게 앞에있는지 프로그램 적으로 판단하는 로직이 생각보다 힘들기 때문이다. 그니까 2D로 하지말고 3D 배경 해...
1. 2D 쿼터뷰 구현, 높이가 없으면
먼저 말하고 싶은건 2D로 이 시점을 구현하는데는 높낮이의 존재 여부에 따라 난이도가 급격하게 달라진다. 높낮이가 없으면 타일을 직각 배치에서 쿼터뷰로 변환하고 y좌표에 따라 정렬하면 된다. 구체적으로 보통은 배경 타일들이 있고 그 위에 캐릭터들이 있으니까 배경 타일을 다 그리고 캐릭터들을 그리면 된다. 생각해야 될건 직각 90도로 되어있는 타일을 쿼터뷰로 변환하는 것이다.
변환된 위치에서 Y가 작을수록 앞에 있게 되므로 그렇게 정렬하면 된다. 변환 수식은 복잡해 보일 수도 있지만 원래 좌표에서 xo 랑 yo 방향으로 얼만큼 이동하는지 비례해서 새 좌표로 얼마나 이동하는지 생각하면 알 수 있다.
https://clintbellanger.net/articles/isometric_math/ 그래서 이 사이트에 변환식이 있다. 가져다 쓰면 된다!
(똥겜 SFD)
내 첫 게임인데 높낮이 구현할 능력이 안되었기 때문에 높낮이는 없었다. 앞의 설명과 같이 바닥 타일이랑 벽을 먼저 그린 후에 캐릭터들을 그린다. 타일과 유닛은 따로 따로 y 가 작은 순으로 정렬했다. (타일은 안움직이니까 처음 한번만 순서에 따라 정렬 해 놓으면 된다.)
2. 높낮이가 있으면?
다시 한번 말하지만 높낮이가 있으면 꽤 복잡해 진다. 얼핏 생각하면 높이 좌표 하나 추가해서 y 가 작을수록, 같으면 y가 같으면 높이 z가 높으면 더 앞에 있으면 될 것 같다. 고정되어 있고 각 그림들이 타일만큼 떨어져 있으면 상관 없지만 움직이면 문제가 생긴다.
문제가 생기는 경우를 예를 들면
처음 설명한 방법으로 정렬하면 위의 그림과 같이 파란 인물이 타일을 이동하는 경우 저렇게 타일이 y좌표가 작으므로 바닥 타일에 파란 인물이 파뭍혀 버린다.
Y 대신에 높이 z를 우선으로 정렬하거나 y+z를 더한 값으로 정렬하거나 온갖 편법을 써도 특정 상황에서 오류가 생기게 된다. 다른 사람들은 어떻게 해결했는지 모르겠으나 온갖 방법중에 먹힌 방법은 아래의 사이트에 나온 방법이다.
http://shaunlebron.github.io/IsometricBlocks/
설명하기 힘들지만 간략하게 설명해보면 각각의 물체를 육면체라 가정하고 그 가장자리를 화면상으로 치환한 후에(육각형이 된다) 이 정보를 통해 화면상에서 겹치는지 계산 한 후에 겹치는 물체는 반드시 순서를 지키도록 그래프를 그린 후에 그 정보로 정렬하는 방법이다.
(해당 사이트에서 퍼옴)
*택틱스 오우거의 경우에는 배경 타일을 나눠서 캐릭터 앞에 있을 수 있는 타일 부분은 다른 레이어에 그리는 방법을 쓴 것 같다.
크롤 택틱스는 결국 높낮이가 있는 쿼터뷰를 구현했다.
지금 생각해보면 뭔가를 추가한다고 나은 게임이 되지 않는 것 같다. 괜히 높이를 추가해서 오히려 직관적이지 않고 복잡해 진 것 같다. 다키스트 던전은 반대로 2차원 격자 공간 대신에 유닛간의 1차원 위치로 변화시켜서 훨씬 더 전략적인 게임이 되었다. 제한이 명작을 만든다!
3. 회전
1의 좌표 변환을 이해하고 있으면 변환 할 때 기존 좌표의 방향을 어떻게 바꾸냐에 따라 다른 시점으로 보게 할 수 있다.
좌표 변환 공식 같은 걸 이용할 필요 없이 원좌표에서 얼마나 이동하느냐에 따라 새 좌표에서 얼마나 이동하는지 알아보고 계산하면 된다.
하지만 화면 회전을 할 때 마다 급작스럽게 화면이 바뀌기 때문에 게임 하는 사람들이 헷갈려 했다. 어짜피 2D니까 어쩔 수 없다고 생각했지만 트위터에서 어떤 사람이 구현한 걸 보고 따라하기로 마음먹었다.
물론 2D니까 3D같이 완벽환 회전은 불가능하지만 각 타일과 인물들의 좌표를 변환하면 그럴듯 하게 보이게 된다.
간단하게 설명하면 쿼터뷰에서 y 좌표가 반절로 축소되니까
일단 y좌표를 2배로 늘리고 -> 회전 중심을 원점이 되게 좌표를 이동한 후에 -> 회전 -> 좌표 다시 원대대로 복구하면 된다.
그렇게 하면
이렇게되는데
회전 중에 타일 사이가 멀어져서 어색해 보이므로 타일간의 거리를 조절해주면
이렇게된다.
https://youtu.be/dL6MAkCANjE?si=rqaRr5F3TQbkXnqn
Didn't know I can implement this!
youtu.be
그래서 2D 쿼터뷰로 해볼 건 다 해본 것 같다. 뭔가 도움이 될 만한 글을 쓰고 싶었는데 급격히 방전되는 체력으로 사두사미가 된 듯하다.
그리고..
크롤 택틱스가 스팀에서 세일합니다.
크롤 택틱스는 FTL, 택틱스 오우거, 다키스트 던전 등에서 영감을 받은 게임으로, 파티 중심의 턴제 전투와 로그라이크 방식의 던전 탐험 및 무작위 던전 생성을 결합한 작품입니다. 다양한 환경과의 상호작용, 함정 활용뿐만 아니라, 다채로운 스킬과 클래스도 제공합니다.
https://store.steampowered.com/app/1290750/Crawl_Tactics/
Crawl Tactics is a unique hybrid of tactical RPG and roguelike. Manage a party of adventurers and use the environment to your advantage to conquer the dungeon.
store.steampowered.com
읽어주셔서 감사합니다.
진짜 잘 만드셨네 ㄷㄷ... 혹시 인원 구성 여쭤봐도 될까요?
인원은 노예 한명입니다 ...
와 이런 스타일 넘무 좋고~
감사합니다!
화이팅
;(
제한이 명작을 만든다 라는 말이 인상 깊네요. 개발 과정의 고민을 엿볼 수 있는 좋은 일지(를 가장한 홍보) 감사합니다
감사합니다!!
와... 왜이리 고수이십니까... 찾으신 자료들도 보니 구글링 실력도 장난아닌신것 같습니다. - dc App
원래 백수는 구글 실력이 늘어납니다 하하
ㅅㅅㅌㅊ
:D
왕고수ㄷㄷ
감사합니다. 고수는 아니고 기간이 오래되다 보니 겜은 안팔리고 이것저것 하게 되네요..
미친 능력자 ㅎㄸㄸㄸㄷ
아닙니다 하하
저시절 픽셀감성 진짜 잘살렸네
칭찬 감사합니다!
몇 살이세요
헐.. 최고시다.. 곧 사서 해보겠습니다!
유니티로 만드시는 건가요? - dc App