[유니티 활용] UI 편 - 해상도 대응 자원 표시 UI 만들기

이번 글에서는 여러 모바일 게임의 상단에서 쉽게 볼 수 있는 지원 표시 UI를 다양한 해상도에 대응할 수 있는 형태로 만들어 보도록 하겠습니다.

 

먼저 Asset Store 에서 무료로 받을 수 있는 "Cute Cartoon Mobile GUI" 에셋을 다운로드 해주세요. 

* 에셋 스토어의 사용법은 "[유니티 기초] 에셋 스토어 (Asset Store) 사용" 편을 참고해 주세요.

* 프로젝트의 기본 환경은 플랫폼 = Android, Resolution = 1920x1080 portrait 입니다.

 

▶ 결과물 미리 보기

모바일 게임에서 흔하게 볼 수 있는 자원 표시 UI 입니다. 단, 이 글에서는 버튼 동작 구현까지 진행하지는 않고 위에서 언급한 것과 같이 다양한 해상도에서 최대한 비슷한 모양이 유지되도록 UI 를 만드는 방법에 대해서만 진행합니다.

 

 

▶ 준비 작업

1. Canvas 를 만들고 빈 객체를 Canvas 의 자식 객체로 생성하고 이름을 AutoLayout 으로 변경합니다.
2. AutoLayout 에 Vertical Layout Group 컴포넌트를 추가하고 Control Child Size 의 Width / Height 를 체크합니다.
3. AutoLayout 의 자식 객체를 2개 만들고 각각 Layout Element 컴포넌트를 추가합니다. 이름을 각각 Top, Bottom 으로 변경합니다. 
4. Top:Bottom = 1:9 의 비율이 되도록 각각의 Layout Element 에서 설정합니다.

* 위의 준비 작업과 관련된 자세한 설명은 "[유니티 활용] UI 편 - 자동 레이아웃" 편을 참고해 주세요.

 

▶ UI 만들기

이제부터 모든 작업은 Top 객체를 기반으로 합니다.

1. Top 객체에 Horizontal Layout Group 을 추가하고 Control Child Size 의 Width / Height 를 체크합니다. Spacing과 Padding의 Right 에 50 을 입력합니다.
2. 3개의 UI Image 객체를 생성하고 각각에 Layout Element 를 추가합니다. 1:2:2 의 비율이 되도록 설정합니다. UI Image 객체로 생성하는 이유는 Layout 이 어떻게 설정되는지 눈으로 쉽게 확인할 수 있기 때문입니다. 나중에 이 Image 들은 모두 제거할 것입니다.
3. 처음부터 차례대로 Space, Cherry, Gold 로 변경합니다. Space 는 왼쪽에 여백을 주기 위한 것입니다.

여기까지 작업하면 다음과 같은 결과물이 나옵니다.

 

Cherry 자원 UI 만들기

• Cherry 객체의 자식 객체로 3개의 UI Image 객체를 생성합니다. 차례로 Bkg, Icon, Button 으로 이름을 변경해 주세요.
• Bkg 객체의 Image 컴포넌트의 Source Image 에 위에서 받은 asset 에 포함된 counter 이미지를 연결해 줍니다. (자세한 경로는 아래의 이미지를 참고해 주세요.)
• Bkg 객체의 RectTransform 을 아래와 같이 설정해 줍니다.

Bkg 객체의 RectTransform

Bkg 에 연결한 counter 이미지 경로

* HONETi 는 Asset Store 에서 다운받아 Import 해야 생성됩니다.

 

• Icon 객체의 Image 컴포넌트의 Source Image 에 icon_cherries 를 연결합니다. icon_cherries 는 [Assets > HONETi > mobile_cartoon_GUI > GUI Elements > Icons] 에 있습니다.
• Icon 객체의 RectTransform 을 다음과 같이 설정합니다.

* 위의 빨간 테두리처럼 Anchor Preset 이 좌측 정렬로 되어 있는 것에 유의해 주시기 바랍니다. 이렇게 하면 체리 이미지는 항상 부모 객체인 Cherry 객체의 크기 변화에 따라 위치가 자동으로 맞춰지게 됩니다.

 

• Button 객체에는 Icon 객체에 연결한 이미지와 같은 위치에 있는 "btn_round_big_hover" 이미지를 연결해 줍니다.
• Button 객체의 RectTransform 을 다음과 같이 설정합니다.

* 이번엔 Anchor Preset 이 우측 정렬로 되어 있는 것에 유의해 주시기 바랍니다. 

 

• Bkg 객체를 선택하고 자식으로  UI Text - TextMeshPro 를 생성해 줍니다.
• Button 객체를 선택하고 자식으로 UI Text - TextMeshPro 를 생성해 줍니다.
• 각각의 Text 객체의 설정을 다음과 같이 해줍니다.

Bkg 객체에 포함된 Text 객체의 Inspector

Button 객체에 포함된 Text 객체의 Inspector

* 붉은색 테두리 영역들이 변경되는 부분들입니다.

 

• Gold 는 위의 과정을 똑같이 반복할 필요가 없습니다. Gold 객체를 과감히 삭제해주세요. (선택 후 Delete 버튼)
• Cherry 객체를 선택하고 CTRL+D 를 눌러 복사해 줍니다.
• Cherry (1) 의 이름을 Gold 로 변경해 줍니다.
• Gold 객체의 자식인 Icon 객체의 이미지를 "icon_coins" 로 변경해 줍니다.

맨 처음 보았던 결과물 미리 보기와 같은 UI 가 생성되었습니다. 이제 해상도를 변경해 보시면 거의 동일하게 UI 가 유지되는 것을 확인하실 수 있습니다.