Unity Mask, 유니티 마스크, 원하는 모양으로 이미지 보여지게 하기.

유니티에서 간단하게 UI 이미지를 위와같이 마스크하는 방법을 소개합니다.

위 이미지같은 경우에는 원래는 바탕화면 크기의 원본이미지를, X마크 모양으로 출력하게 한 결과입니다.

(MASK란? 타겟이미지를 원하는 모양대로 일부를 잘라서 출력하는 방식)

마스크를 이용하면 이미지를 모양마다 매번 새로 만들어서 저장할 필요가 없습니다!

따라서 에셋 관리 및 데이터 관리에도 유용하고, 디자이너가 작업할때도 좀 더 편리하게 작업할 수 있습니다.

(▼ 같은 이미지를 마스크 이미지만 변경하면 총모양으로도 뽑을 수 있습니다.)

방식은 정말 간단합니다! 

1. 우선 마스크할 모양의 이미지를 추가합니다.

GameObject -> UI -> Image 추가

보기 편하게 하기 위해 마스크하는 이미지를의 이름을 Image(Mask)라고 수정했습니다. 

2. 그럼 Image의 Source Image의 경로를, 마스크 할 이미지로 정해줍니다.

우리는 총모양으로 이미지를 뽑을 거니까, 총모양을 선택할게요.

그러면 이렇게 원본 이미지인 총 모양이 나오는 걸 확인할 수 있습니다.

3. 이제 방금 만든 Image하단에 새 Image를 추가합니다.

이번에도 보기 편하게 이름을 Mask Target이라고 변경했어요.

4. 이전에 했던 것 처럼, 방금 만든 Image의 Source Image를 정해줍니다.

(이 이미지는 마스크가 될 대상, 원하는 모양으로 나오게 할 타겟 이미지 입니다.)

저는 방공호 배경의 그림으로 정했는데요. 

아직 마스킹 처리를 하지 않았기 때문에 원본 모양인 사각형의 모양으로 출력됩니다.

5. 이제 마스킹 처리를 해볼건데요.

가장 처음 만든 Image를 클릭하여 Mask 컴포넌트를 추가합니다.

6. 그럼 아래와 같이 원본 이미지가 총 모양으로 마스킹된 것을 확인할 수 있습니다.

7. 유니티의 Mask 컴포넌트를 이용해 이미지를 마스크하는 방법이었습니다.

마지막은 하이라키 구조입니다.

Image(Mask) - 마스크 시킬 이미지 (이미지의 모양틀!)

Image(MaskTarget) - 마스크가 될 대상 이미지 (원본 이미지)

* Mask 컴포넌트의 Show Mask Graphic은 마스크 이미지를 보여지게 하는 기능입니다.

필요에 따라 끄고 켜면 됩니다.

(Ex 크기가 타겟 이미지 보다 클 경우 등)