UI 툴킷에 마스킹 효과 적용

마스킹은__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 요소의 어떤 부분을 표시할지 제어하는 기법입니다. UI 툴킷에서 USS 프로퍼티 overflow: hidden을 사용하여 다른 UI 요소의 경계 밖에 있는 UI 요소의 일부를 숨길 수 있습니다.

요소로 마스킹

요소를 사용하여 다른 요소를 마스킹할 수 있습니다. 요소로 마스킹 효과를 내려면 마스킹하는 요소를 마스킹되는 요소의 부모 요소로 추가합니다. 마스킹하는 요소의 overflow 프로퍼티를 hidden으로 설정합니다. 이렇게 하면 마스킹 요소의 경계 밖에 있는 마스킹되는 요소의 부분을 숨길 수 있습니다.

다음 예시는 직사각형 모양과 둥근 모서리 모양으로 마스킹 효과를 내는 방법을 보여 줍니다.

예시에서 #MaskSquare 및 MaskRounded 요소는 마스킹하는 요소이고, Logo1 및 Logo2 요소는 마스킹되는 요소입니다. 마스킹하는 요소는 마스킹되는 요소의 부모 요소입니다. 예시에서는 마스킹 효과를 시연하기 위해 배경 이미지가 있는 VisualElement를 사용합니다. 마스킹 기법은 레이블 또는 버튼과 같은 모든 요소에 적용할 수 있습니다.

#MaskRounded 요소에는 50px로 설정된 border-radius 프로퍼티가 있습니다. 이렇게 하면 둥근 모서리 마스킹 효과가 생성됩니다.

UXML은 다음과 같습니다.

<UXML>
    <VisualElement name="MaskSquare" >
        <VisualElement name="Logo1" />
    </VisualElement>
    <VisualElement name="MaskRounded" >
        <VisualElement name="Logo2"  />
    </VisualElement>
</UXML>

USS는 다음과 같습니다.

#MaskSquare {
    overflow: hidden;
}

#MaskRounded {
    overflow: hidden;
    border-radius: 50px;
}

#Logo1, #Logo2 {
    background-image: url("unity-logo.png");
}

임의의 모양으로 마스킹

임의의 모양으로 마스킹 효과를 내려면 아래와 같이 SVG를 마스킹하는 요소의 배경 이미지로 설정합니다.

UXML은 다음과 같습니다.

<UXML>
    <VisualElement name="MaskSVG" >
        <VisualElement name="Logo3" />
    </VisualElement>
</UXML>

USS는 다음과 같습니다.

#MaskSVG {
    overflow: hidden;
    background-image: url("mask.svg");
}   

#Logo3 {
    background-image: url("unity-logo.png");
}

중첩된 마스킹의 배치 깨짐 감소

중첩된 마스킹은 하나의 요소와 하나 이상의 조상이 모두 마스크를 정의할 때 발생합니다. 이러한 마스크의 교차점이 최종 가시성을 정의합니다. 이 기법을 사용하여 복잡한 시각 효과를 만들거나 다양한 기준에 따라 이미지의 일부를 선택적으로 표시할 수 있습니다. 예를 들어 요소의 특정 영역을 표시하고 다른 마스킹된 영역을 숨기도록 마스크를 정의할 수 있습니다.

직사각형 모양으로 마스킹할 때 Unity는 축 정렬 직사각형을 클리핑 영역으로 사용하며, 이를 직사각형 클리핑이라고 합니다. 둥근 모서리나 임의의 모양으로 마스킹할 때 Unity는 직사각형 클리핑 대신 스텐실 마스킹을 사용합니다. 스텐실 마스킹은 스텐실에 마스크를 저장하며, 여기서 스텐실은 채널당 8비트의 특수 이미지 유형입니다. 스텐실에 저장된 모양이 클리핑 영역을 정의합니다. 자세한 내용은 ShaderLab 커맨드: Stencil을 참조하십시오.

스텐실 마스킹은 마스킹 작업에 스텐실 버퍼라는 GPU 기능을 사용합니다. 스텐실에는 이미지 수정과 렌더링에 미치는 영향을 지시하는 GPU 관련 상태가 있습니다. 요소가 동일한 스텐실 상태를 공유하면 단일 드로우 콜로 배칭할 수 있습니다. 그러나 중첩된 마스킹과 같은 스텐실 상태의 변경으로 인해 배칭이 깨질 수 있습니다. 배치 깨짐은 단일 드로우 콜로 여러 요소가 함께 효율적으로 렌더링되지 않도록 하기 때문에 성능에 큰 영향을 미칠 수 있습니다. 렌더링 성능을 최적화하려면 배치 깨짐을 최소화하는 것이 중요합니다.

중첩된 스텐실 마스킹의 배치 중단 횟수를 줄이려면 모든 마스크의 조상인 마스킹하는 요소에 UsageHints.MaskContainer를 적용하는 것이 좋습니다.

다음 그림은 단일 레벨 마스킹, 중첩된 마스킹, MaskContainer가 적용된 중첩된 마스킹의 배치 수를 보여 줍니다. 노란색은 마스킹하는 요소를 나타냅니다. 주황색은 MaskContainer가 적용된 마스킹되는 요소를 나타냅니다. 숫자는 배치 수를 나타냅니다.

A: 단일 레벨 마스킹(배치 1개)
B: 중첩된 마스킹(배치 5개)
C: MaskContainer를 사용한 중첩된 마스킹(배치 2개)

추가 리소스

• UsageHints
• 외형