유니티 UI Mask

1. 마스크 ( Mask ) 

 

유니티 UI 시스템은 계층 구조를 가지고 있다. Mask 컴포넌트는 특정 영역을 설정하여, 나머지 부분을 가리는 데 사용된다. 

 

007 opening screenshot

 

영화 007시리즈의 오프닝 부분을 기억하는가? 마스크를 설명하기 위해 떠올린 것이 영화 007의 위 스크린샷 부분이다. 모든 부분이 가려진 가운데에 주인공이 나오는 장면이다.  영화와 같은 효과를 만들어주는 것이 마스크다. 

마스크는 마스크로 설정된 영역만 보여준다. 

 

아래의 이미지는 마스크가 해제된 상태이다.

 

No mask

 

위의 샘플에 마스크를 적용하면 아래와 같다. 마스크의 하위 요소의 실제 크기는 마스크 영역보다 크다.

 

mask example

 

계층구조는 Panel(회전 물결 이미지) - Mask(동그란 영역) - Image( 캐릭터 이미지) 이다.

계층 구조에서 마스크가 설정된 게임 오브젝트의 상위 요소에 대해서는 적용되지 않는다. 마스크의 하위 요소에 대해서 적용된다.

2. Mask와 Maskable 

Image, Text와 같은 그래픽 UI 요소들은 Maskable 항목이 있다. 기본 속성으로 Maskable이 선택되어 있다. Maskable 속성을 해제하면, 마스크의 하위 요소 일 때, 마스크의 영향을 받지 않는다.     

 

3. 동적 제어

Maskable 속성은 동적으로 제어를 할 수 있다. 이와 반대로 마스크를 제어하여, 비슷한 효과를 줄 수 있다.  

마우스 클릭 시 현재 적용된 Maskable 속성과 반대로 적용되도록 하였다. 논리 부정 연산자( ! )를 이용한다. 

마우스 오른쪽 클릭 시에는 마스크를 적용 및 해제하며, 왼쪽 클릭 시에는 Maskable 속성을 적용 및 해제한다.

Update() 함수는 매우 빠른 속도로 반복적으로 호출되기 때문에, time 변수를 두어, 지속적으로 클릭이 적용되는 것을 방지한다.    

using UnityEngine;
using UnityEngine.UI;

public class ChangeMaskable : MonoBehaviour
{
    public Mask mask;
    RawImage testImage;
    float time;
    float timeRate = 1.0f;
    // Start is called before the first frame update
    void Start()
    {
        testImage = GetComponent<RawImage>();
        time = timeRate;
    }


    // Update is called once per frame
    void Update()
    {
        time -= Time.deltaTime;
        if (Input.GetMouseButton(0) && time < 0)
        {
            testImage.maskable = !testImage.maskable;
            time = timeRate;
        }

        if (Input.GetMouseButton(1) && time < 0)
        {
            mask.enabled = !mask.enabled;
            time = timeRate;
        }
    }
}