Unity UI 마스크 및 RectMask2D 사용 가이드
이 문서는 Unity에서 UI를 사용할 때 마스크와 RectMask2D의 기능에 대해 설명합니다. 마스크는 UI의 자식 요소의 외관을 조정할 수 있는 방법으로, 자식 요소가 부모 형상에 맞추어 보이도록 제한하는 데 사용됩니다.
마스크의 기능
마스크는 UI 요소의 시각적 거동을 제어하는데 유용합니다. 특히, 큰 이미지를 줌인하거나 작은 영역만 보이도록 제한할 때 유용합니다.
마스크 프로퍼티
| 프로퍼티 | 기능 |
|---|---|
| Show Graphic | (부모) 오브젝트 그래픽이 자식 오브젝트 위에 알파로 그려지는지 여부입니다. |
마스크 사용 방법
- 패널 생성: 패널 오브젝트를 생성합니다. (메뉴:
GameObject > Create UI > Panel) - 자식 이미지 추가: 큰 이미지를 패널 오브젝트의 자식으로 추가합니다.
- 위치 조정: 가시 이미지 영역이 패널 영역의 뒤에 위치하도록 배치합니다.
- Mask 컴포넌트 추가: 패널에 마스크 컴포넌트를 추가합니다.
마스크가 적용된 후, 패널 외부의 자식 이미지는 보이지 않게 됩니다. 이미지를 이동하더라도 패널 안에서만 보이게 되어, 스크롤 바를 사용하여 이미지를 이동할 수 있습니다.
예제: 스크롤 가능한 지도 구현
스크롤바를 추가하여 사용자가 큰 이미지를 볼 수 있도록 만들 수 있습니다. 이렇게 하면 사용자가 지도와 같은 큰 콘텐츠를 볼 수 있는 스크롤 가능한 뷰어를 만들 수 있습니다.
마스크와 RectMask2D
마스크는 GPU 스텐실 버퍼를 통해 구현됩니다. 스텐실 버퍼에 쓰여진 값에 따라 마스킹되는 영역이 결정됩니다.
- 첫 번째 마스크 요소는 스텐실 버퍼에 1을 기록합니다.
- 모든 렌더링 요소는 스텐실 버퍼 값을 확인하여, 값이 1인 영역에만 렌더링됩니다.
중첩 마스크
중첩 마스크의 경우, 버퍼에 증분 비트 마스크가 작성됩니다. 자식 요소가 렌더링되기 위해서는 논리적 & 스텐실 값을 가져야 합니다. 이는 복잡한 UI 구성을 가능하게 합니다.
결론
Unity의 마스크 및 RectMask2D 기능을 활용하면 UI를 효과적으로 제어하고 보다 동적인 사용자 경험을 만들 수 있습니다. 이를 통해 다양한 콘텐츠를 보다 깔끔하게 보여줄 수 있습니다.
이 문서에서는 Unity UI 마스크 사용 방법을 소개했습니다. 필요에 따라 다양한 UI 요소와 결합하여 나만의 창의적인 접근 방식을 시도해 보세요.