내일배움캠프 69일차 TIL "Mask, Rect Mask 2D"

 

상점 UI를 구현하기 위해 필요한 기능이 있었다.

 

 

위 이미지 처럼 상점에 필요한 아이템들을 표시 하는데, UI에 담을 수 있는 양보다 많은 수의 아이템 슬롯이 있을 때, 

그 슬롯이 UI를 벗어나게 표시된다면 보기 좋지 않을 것이다.

위 이미지처럼 특정 구역에서만 요소들이 보이고, 그 구역 밖으로 나온 요소는 보이지 않게 하는 기능을 찾던중

 

Mask 컴포넌트와 Rect Mask 2D 에 대해 알게 되었다.

 

 

이 두 컴포넌트는 유사한 기능을 하며, 하나의 컴포넌트만 활성화 해도 원하는 효과를 구현할 수 있다.

 

이 두 컴포넌트의 주요 기능은, 해당 컴포넌트가 있는 오프젝트의 자식 오브젝트들의 표시 범위를 부모오브젝트로 한정하는 마스킹 기능이다.

 

 

Mask 컴포넌트의 경우 이용하기 위해서는 Image 컴포넌트가 꼭 필요하며,

해당 Image의 Sprite의 모양으로 마스킹을 설정할 수 있다.

 

원형 스프라이트의 모양만큼 표시되는 모습이다.

 

 

Rect Mask 2D 컴포넌트는 Image 컴포넌트가 필요하지 않다.

Rect Mask 2D에서 마스킹의 범위는 Rect Transform의 Width와 Height로 결정된다.

Mask와의 차이점은 Image의 스프라이트를 처리할 필요가 없기 때문에 좀 더 적은 연산으로 마스킹 기능을 구현할 수 있다.

 

 

두 컴포넌트를 표로 비교하면 다음과 같다.

	Mask	Rect Mask 2D
모양	다양한 형태의 마스킹 가능	직사각형 형태의 마스킹 가능
성능	상대적으로 많은 연산	상대적으로 가벼운 연산

 

 

단순히 직사각형 형태의 마스킹기능이 필요하다면 Rect Mask 2D를 이용하는 것이 좋지만,

만약 좀 복잡한 모양의 마스킹 기능이 필요할 경우 Mask를 이용하는 것을 고려할 수도 있다.

 

지금 진행중인 프로젝트에서는 직사각형 형태면 충분하다고 생각했기에, Rect Mask 2D를 이용해 기능을 구현하였다.