부모 - 자식 관계 상관없이 Mask 처리하기

NK Studio의 개발 스페셜 테크닉·2024년 12월 6일

UI mask

UI

목록 보기

3/3

소개

이번 시간에 우리가 알아볼 내용은,
부모 자식 관계 상관 없이 Mask를 지정해보는 것입니다.

Unity에서 UI Mask는 대부분 부모-자식 관계에서만 가능하며, 부모 UI에 Mask 컴포넌트를 추가하여 Mask를 적용합니다.

다만, 경우에 따라 부모 자식 관계가 아닌 상태에서 화면상에 겹친 부분만 Mask가 되기를 원하는 개발자도 있을 것입니다. (아마.. 있을 걸요🤔!)

자, 그래서 제가 한번 그 사람의 Neeeeeeze~를 충족시켜보도록 하겠습니다.

시작해요

UI 구성하기

먼저 계층구조 구성은 다음과 같이 진행합니다.

2개의 UI는 Image 또는 Raw Image를 사용하여 상황에 알맞게 구성해줍니다.
Mask UI는 위에 있어야 하며, 타겟 UI는 아래에 있어야 합니다.

머티리얼 준비하기

우리는 이 작업을 하기 위해선 스텐실이라는 것을 활용할 겁니다.

Mask 머티리얼

UI/Default를 상속받는 머티리얼을 만들고 다음과 같이 수치를 입력합니다.

다음 내용은 마스크 영역을 항상 Stencil Ref를 1로 교체하는 처리를 합니다.

Stencil Comp : 8(Always) // 조건이 맞든 틀리든 항상 Operation을 처리하기
Stencil ID(Ref) : 1 // 스텐실 레퍼런스를 1로 기준을 잡는다.
Stencil Operation : 2(Replace) // 스텐실을 1로 교체한다.
Stencil Write Mask : 255 // 쓰기 권한 제공.
Stencil Read Mask : 0 // 읽기 권한을 주지 않는다.
Color Mask : 0 // 자신의 RGBA를 그리지 않는다.

Target 머티리얼

UI/Default를 상속받는 머티리얼을 만들고 다음과 같이 수치를 입력합니다.

다음 내용은 Stencil Buffer의 Stencil Ref가 1일 때 그리도록 처리를 합니다.
마스크 영역은 Stencil Ref를 1로 교체하도록 했으며, 마스크 영역이 아닌 곳은 대부분 Ref가 0일 것이다.

타겟은 ref가 1인 부분은 정상적으로 그려질 것이지만, ref가 1이 아닌 부분에서는 그려지지 않을 것이다.

Stencil Comp : 3(Equear) // 기존에 그려진 Stencil Buffer의 Ref가...
Stencil ID(Ref) : 1 // -> 1일 때,
Stencil Operation : 0(Keep) // 유지 -> 그리도록 처리
Stencil Write Mask : 0 // 쓰기 권한을 주지 않는다.
Stencil Read Mask : 255 // 읽기 권한을 요구.
Color Mask : 15 // 자신의 RGBA를 그리도록 처리

검은색 오버레이는 M_Target을 지정합니다.