유니티 UI 이미지 마스크

UI에서 정해진 틀 내에 이미지를 넣어야 하는데 삐져나오는 경우가 있습니다.

 

안에 들어간 이미지의 크기, 스케일을 줄여서 해결할 수 있기는 하나,

그러면 사용할 이미지가 너무 작아지기에

삐져나온 부분만 보이지 않게끔 처리하고 싶을 때가 있을 것입니다.

 

예시로 든 이미지에서는 검이 삐져나오네요

 

마스크를 씌울 이미지가 있는 오브젝트 char

해당 오브젝트를 우클릭하여 Create Empty Parent > 이름을 CharMask로 변경

 

CharMask 선택 > 인스펙터에서 Add Componenet > Image

이러면 None(Sprite) 로 기본으로 흰색 사각형 이미지가 나올 것입니다.

다른 모양을 써야하면 해당 모양의 이미지를 구하거나 제작하여 소스 이미지에 넣어주면 됩니다.

이 사각형을 마스크 씌울 영역에 맞게 조절해줍니다.

저는 CharSlot에서 캐릭터 표시 영역(프레임 포함)을 지정해 두었기에

앵커(Anchors)로 마스크 이미지 크기를 조절하여 프레임에 겹치기 전에 잘리도록 조정하였습니다.

 

 

CharMask > 인스펙터에서 Add Componenet > Mask

 

마스크 영역 밖에 삐져나왔던 검이 보이지 않도록 처리되었습니다.

하지만 흰색 네모가 거슬리니 보이지 않도록 해주겠습니다.

 

방금 전에 추가한 Mask 컴포넌트에서

Show Mask Graphic 체크박스를 해제합니다.

이러면 마스크에 사용한 이미지는 보이지 않게 됩니다.

 

< 결과 >