[Project_MTS] 개발 일지 - 6 [Node기반 맵 생성 R&D 및 개선]

Node기반 맵 생성 개선

이전에 구현한 Node 기반 맵 생성

현재는 각 노드들이 다음 Layer중 랜덤하게 하나를 선택해 줄을 잇다보니 연결되지 않았음에도 줄이 연결되며, 줄이 자신으로부터 가까운 위치가 아닌 먼 위치까지 이동하면서 연결되다보니 줄이 꼬이는 이미지가 보이는데, 이를 개선하고자 한다.

슬레이 더 스파이어의 맵 이미지 [이미지 출처 : https://www.thisisgame.com/articles/79776]

왜 이렇게 개선하는가?

해당 이미지를 보면 각 노드들은 서로 연결되어 있으며, 다음 Layer에서 자신의 위치와 가까운 노드와 연결되는 구조로 동작하고 있다.
이를 통해 연결 선이 꼬이지 않고, 모든 노드가 최소 1개의 연결을 가지는 구조가 유지된다는 것을 확인할 수 있다.

첫 번째 개선 : 모든 노드는 최소 1개 이상의 다음 Layer 노드와 반드시 연결

모든 노드는 기본 연결을 보장한다. 아직, 마지막 노드는 최소 1개 이상의 노드 연결은 보장하지 않는다. 

GenerateConnections 과정에서 연결되지 않은 노드를 찾아 다음 Layer의 랜덤 노드와 강제로 연결하여 고립된 노드가 발생하지 않도록 보정한다. 

개선 후 고립된 노드는 발견되지 않는 모습을 볼 수 있다.

각 Layer 간 연결 생성 이후, 다음 Layer의 노드 중 하나라도 연결되지 않은(incoming이 없는) 노드를 찾아 이전 Layer의 랜덤 노드와 강제로 연결하여 모든 노드가 최소 1개의 연결을 가지도록 보장한다.

연결보정 메서드의 내부 로직

두 번째 개선 : 마지막 Boss 노드 고정 및 Layer 생성 구조 개선

슬더스 맵 이미지 출처 : https://m.blog.naver.com/obscuredjosh/221187221090

세 번째 개선 : 노드 연결 최적화와 위치 랜덤 오프셋 적용

기존 연결 방식이 너무 단조롭다보니 사다리 느낌이 많이 났다 그래서 오프셋을 통해 각 노드들의 위치를 랜덤하게 조정했고 노드 위치에 랜덤 offset을 추가해 맵이 조금 더 자연스럽게 보이도록 수정했다.

새로 발생한 문제

offset 적용 이후 기존 index 순서와 실제 화면상의 위치가 달라지면서 연결선이 교차하는 문제가 발생했다.

해결 방법

Layer 내부 노드를 x 위치 기준으로 정렬하고, 모든 연결 로직을 거리기반이 아닌 동일한 index 흐름 기반으로 통일했다.

index 흐름 기반 노드 연결

맵을 생성하는 GenerateMap 로직 내부에서, offset이 적용된 모든 노드들은 현재 Layer 리스트에 저장된다.
이후 List 내부에서 x축 위치를 기준으로 노드 순서를 다시 정렬한다.

offset 적용 이후에는 노드의 실제 위치와 생성 순서가 서로 달라질 수 있기 때문에, 정렬 과정을 통해 Layer 내부의 index 흐름을 다시 맞춰준다.
이를 통해 노드 연결 시 연결선이 꼬이거나 교차하는 현상을 방지할 수 있었다.

결과

랜덤성을 유지하면서도 연결선이 과하게 꼬이지 않는 자연스러운 맵 구조를 만들 수 있었다.

---

원래는 거리 기반 연결 방식으로 구현하려 했으나, 각 노드들이 지니고 있는 index를 활용한 연결 방식으로도 구현해보고자 했다.
하지만 구현 과정에서 노드 간 연결선이 교차하는 문제와, offset 적용 이후 발생하는 순서 꼬임 현상 등 다양한 문제들을 마주하게 되었다.
생각했던 방식대로 구현하는 과정에서 예상하지 못한 문제들이 계속 발생했고, 그만큼 구현에도 많은 시간이 소요되었다.
UI를 포함해 실질적으로 모든 기능을 구현한 것은 아니지만, 직접 구조를 고민하고 문제를 해결해 나가며 슬레이 더 스파이어와 유사한 형태의 맵 생성 구조를 구현할 수 있었다는 점에서 큰 성취감을 느낄 수 있었다. 

---

참고

https://sangeun00.tistory.com/295

#4 슬레이 더 스파이어 방식 스테이지 랜덤 생성

https://korehobby.tistory.com/entry/%EB%AA%A8%ED%97%98%EC%9D%98-%EC%84%9C-%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%80-3-%EC%8A%AC%EB%8D%94%EC%8A%AC-%EA%B0%90%EC%84%B1%EC%9D%98-%EB%8D%98%EC%A0%84%EB%A7%B5

모험의 서 개발일지: 3 - 슬더슬 감성의 던전맵