[Unity] 클래시 로얄처럼 모바일 해상도 대응하는 방법

이번 글에서는 슈퍼셀의 유명한 게임 클래시 로얄 화면을 보면서 해상도 대응 방식을 분석 후, 유니티에서 그 해상도 대응 방식과 비슷하게 구현하려면 어떻게 해야 하는지 알아보겠습니다.

클래시 로얄 해상도 대응을 어떻게 하고 있을까?

당연하게도 저는 슈퍼셀에서 내부적으로 어떻게 클래시 로얄 해상도 대응을 하고 있는지 모릅니다. 하지만 유명한 게임이기에 해상도별 플레이 영상과 스크린샷을 쉽게 찾을 수 있기 때문에 대략 이렇겠구나 예상할 수 있었습니다. 태블릿 등 모바일 환경과 다른 곳에서는 클레시 로얄이 완전히 다른 UI를 사용하는 것 같았기에 모바일용 앱의 경우만 고려하였습니다. 

 

클래시 로얄 공식 유튜브 채널에 게임을 출시하면서 슈퍼셀에서 올린 영상이 있습니다. 지금의 전투 UI와 크게 다르지 않아 참고 사진으로 가져왔습니다. 아래 사진을 보면 제가 임의로 붉은 영역 A와 초록색 영역 B로 나누었습니다. 전장을 A 그리고 UI를 B로 구분하였습니다. 물론 따지고 들자면 A도 UI긴 하지만 저는 해상도 대응에 있어서 다르게 처리해야 할 두 가지로 구분했습니다. 그리고 굳이 클래시 로얄이 아니더라도 실시간 1:1 대전을 하는 종류의 다른 모바일 게임도 비슷하게 A, B로 나눌 수 있을 것입니다.

클래시 로얄 출시 당시 게임 플레이 화면 (출처 : 클래시 로얄 공식 유튜브 채널)

모바일 클래시 로얄 스크린샷(19.5:9)

영역 A와 같은 전투 화면을 구현할 때 아래와 같은 사항을 고려해야 합니다.

• 가로 세로 비율은 고정이어야 한다.
• 영역 A와 영역 B의 상하단 부분(특히 하단 B 카드 선택부분)은 서로 겹치지 않도록 배치해야 한다.

실시간 전투(혹은 싱글 플레이라고 하더라도)에서 게임의 핵심 요소라 볼 수 있는 전투 화면의 비율이 다르다면 플레이어마다 경험하는 게임의 밸런스나 난이도가 다르게 느껴지는 등의 문제가 발생할 수 있습니다. 조금 까다롭게 굴자면 다른 게임이 되어버린다고도 볼 수 있습니다. 위 두 사진에서도 A의 가로 세로 비율은 동일했습니다. 그리고 영역 A를 터치하여 유닛을 놓고 영역 A에서 유닛들이 싸우는 위 게임의 특성상 B는 A에 최대한 침범하지 않는 것이 좋습니다. 아래 사진에서 A를 침범하는 B들은 게임 상황을 안내하기 위해 잠깐 등장하고 사라집니다.

 

B영역의 경우 그 가로 세로 비율이 일정할 필요는 없습니다. 아래 모바일 화면 사진은 아이폰 상단 노치와 하단의 줄(홈 바)에 대응하기 위해 그 비율이 달라진 것을 볼 수 있습니다. 그리고 B의 경우 화면 비율이 달라짐에 따라 유동적으로 위치시켜야 합니다. 클래시 로얄이 출시할 당시의 스마트폰 화면 비율보다 지금의 스마트폰이 더욱 길쭉합니다. 초창기 클래시 로얄에서 중앙 우측에 있는 UI(크라운 개수)는 전장 밖에 고정되어 있었으나 지금은 앞서 말했듯 크라운 개수가 변할 때만(적 성을 부수었을 때) 잠깐 나왔다가 사라집니다.

상단 UI의 경우 플레이어가 사용 중인 기기의 해상도 비율과 관계 없이 적 정보는 왼쪽 위에, 남은 시간은 오른쪽 위에 붙어있는 것이 자연스럽습니다. 하단 UI의 경우에도 마찬가지로 해상도 비율과 관계없이 하단에 위치하면서 A와 겹치치 않으면 될 것입니다.

 

여담으로 클래시 로얄 해상도를 검색하던 중 유튜브에서 스마트 워치로 클래시 로얄을 플레이하는 영상도 볼 수 있었습니다. 슈퍼셀에서 워치를 고려하진 않았겠지만 해상도 대응이 되어 플레이가 가능하다는 것이 신기했습니다. 

 

유니티에서 클래시 로얄같이 해상도 대응 하기

아래 사진은 클래시 로얄과 비슷한 게임 화면을 구현한다고 했을 때 해상도별 기획이라고 하겠습니다. 중앙에 고정적으로 배치된 붉은색과 초록색 큰 네모가 영역 A에 해당하는 전투 영역입니다. 가장 아래 흰색 UI가 유저가 고르는 카드입니다. 나머지 흰 테두리에 작은 빨강 파랑 네모는 각각 UI입니다.

여러 해상도에서 다음과 같이 게임 오브젝트들이 배치되기를 원한다.

아래는 유니티 hierachy 구성이고 오른쪽과 사진과 같이 캔버스의 해상도 비율을 1:1인 곳에서 작업한다고 가정하겠습니다.

먼저 Canvas 설정부터 살펴보면 Screen Match Mode를 Height로 해두었습니다. 클래시 로얄처럼 모바일 세로 모드만 지원하는 기획이라고 하였을 때 배경 이미지는 잘려도 문제가 없고, 세로로 긴 전투 화면을 항상 화면에 담아야 하기 때문에 높이 비율에 맞추어 작업하기 위해서입니다. 이 Canvas는 계층 구조상 가장 상위(씬 바로 아래)에 두겠습니다.

BackgroundImage의 경우 작업하는 Canvas를 꽉 채우게 해줍니다. 타일 맵이 아니라면 배경 이미지 원본 스프라이트가 작업하는 캔버스 크기와 같은 것이 좋습니다.

TopUI의 경우 요구되는 기획이 붉은색 푸른색 상자 모두 좌우로부터 10px씩 떨어지고(Canvas Scaler 기준) 위에서 10px이 떨어지는 것이라고 가정하겠습니다. 비슷하게 BottomUI의 경우 좌우로부터 10px씩 떨어지고 아래에서 64px이 떨어져야 합니다. 이 여유 간격은 사용자의 화면 비율과 관계없이 유지하기로 했으므로 부모인 캔버스의 가로 길이(스크린 가로 길이)를 유지하기 위해 stretch를 사용하는 것이 좋아 보입니다. 저는 아래와 같이 Rect Transform을 설정해주었습니다. 인스펙터에 픽셀 값을 기획에 따라 직관적으로 기입, 수정하기 위해서 Anchor Preset에서 pivot과 position도 각각 stretch top, stretch bottom으로 설정해두었습니다. Anchor Preset에 대해서는 이전 글에서 다루었으므로 넘어가겠습니다.

Battle Field의 경우 stretch를 하지 말고 고정 크기 값을 주어 가로 세로 비율이 변하지 않게 만들어야 합니다. Screen Match Mode를 높이로 했기 때문에 

손패 Hand의 경우 클래시로얄처럼 고정 가로 크기를 하려면 stretch를 주지 않으면 될 것입니다. 만약 화면 가로길이에 따라 퍼뜨려 놓는 기획이라면 stretch를 사용하면 될 것입니다.

 

씬에서 게임 오브젝트를 배치하는 작업을 할 때 해상도 대응을 잘 하려면 hierarchy 구성과 Rect Transform을 적절히 잘해야 합니다.