[유니티 활용] UI 편 - Image Mask를 활용한 Rounded Progressbar 만들기

만약 고정된 크기의 모서리가 둥근 프로그레스바를 만들고자 한다면 원하는 크기의 이미지를 만들고 Image 컴포넌트에 있는 Filled 속성을 사용하면 손쉽게 만들 수 있습니다. 그런데 만약 Image 객체의 Width / Height 를 원본 이미지의 크기와 다르게 설정하면 모서리 부분이 찌그러져 보이는 문제가 발생합니다. 

 

이 글에서는 크기를 원하는 대로 설정해도 모서리가 찌그러지지 않는 프로그레스바를 만들어보도록 하겠습니다.

 

* UI Image 컴포넌트, Sprite Editor 설치에 대한 자세한 설명은 [유니티 기초] UI - Image 컴포넌트 를 참고해주세요.

 

* 이 글에서는 32x32 크기의 모서리가 둥근 정사각형 이미지와 각진 정사각형 이미지를 사용했습니다.

 

 

1. 유니티의 Project 창에서 Sprite 폴더를 만들고 이미지를 넣어줍니다. 

2. Sprite Editor 를 이용해 모서리가 둥근 사각 이미지의 Border 를 다음과 같이 설정해줍니다.

Border의 L/T/R/B 를 이미지 사이즈의 절반으로 설정

 

3. Hierarchy 창에서 우클릭 [UI → Image] 로 Image UI 객체를 생성하고 객체 이름을 MaskedProgressbar 로 변경합니다.

4. MaskedProgressbar 를 선택하고 Inspector 창에서 다음의 작업을 수행합니다.

    4-1. RectTransform 컴포넌트에서 PosX = 0 / PosY = 0 / Width = 600 / Height = 100

    4-2. Image 컴포넌트의 Source Image 에 둥근 사각 이미지 연결

    4-3. Image 컴포넌트에서 ImageType 을 Sliced 로 설정

    4-4. [Add Component → UI → Mask] 를 선택해 Mask 컴포넌트 추가

 

다음은 MaskedProgressbar 객체에 위의 작업을 완료하고 난 후의 Inspector 창입니다.

MaskedProgressbar 객체의 Inspector

 

5. MaskedProgressbar 객체 선택 후 우클릭 [UI → Image] 로 자식 객체를 만들고 이름을 Progress 로 변경합니다.

6. Progress 객체를 선택하고 Inspector 창이 다음과 같아 지도록 설정해 줍니다.

 

Fill Amount 를 움직이면 모서리가 둥근 형태로 빨간색 바가 움직이는 것을 볼 수 있습니다. 

 

이 방법의 원리는 MaskedProgressbar 에 추가한 Mask 컴포넌트의 속성을 이용하는 것입니다. Mask 컴포넌트는 함께 있는 Image 컴포넌트에 연결된 2D 이미지의 불투명한 영역이 자식 객체의 이미지와 겹치는 부분만 보여줍니다.

 

이 방법의 장점은 프로그레스바의 크기 (MaskedProgressbar의 Width/Height) 를 자유롭게 변경해도 항상 일정한 모양을 유지한 모서리가 둥근 프로그레스바를 만들 수 있다는 것입니다.