소개

이번 시간에 우리가 다뤄볼 내용은,
다음과 같이 크롭 영역은 정상적으로 나오고 나머지 영역은 어둡게 처리하는 처리를 해봅시다.

시작해요

UI 구성하기

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

3개의 UI는 Image 또는 Raw Image를 사용하여 상황에 알맞게 구성해줍니다.

머티리얼 만들기

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

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 : 6(Not Equear) // 해당 조건이 아닐 때
Stencil ID(Ref) : 1 // -> Ref가 1이 아닐 때
Stencil Operation : 0(Keep) // 유지 -> 그리도록 처리
Stencil Write Mask : 0 // 쓰기 권한을 주지 않는다.
Stencil Read Mask : 255 // 읽기 권한을 요구.
Color Mask : 15 // 자신의 RGBA를 그리도록 처리

머티리얼 지정하기

마스크 머티리얼은 M_Mask를 지정합니다.

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

추가적인 표현

이런 가이드 라인의 경우 UI 계층구조에서 맨 아래에 있도록 세팅해야 합니다.

이럴 때 보통 Mask 오브젝트의 위치 값(경우에 따라 Rotatin, Scale)을 매 프레임마다 동기화 해주면 깔끔합니다.

using UnityEngine;

[ExecuteAlways]
public class FollowUI : MonoBehaviour
{
    public RectTransform Target;
    private RectTransform _rectTransform;

    private void Awake()
    {
        _rectTransform = transform as RectTransform;
    }

    private void Update()
    {
#if UNITY_EDITOR
        if (!_rectTransform)
            _rectTransform = transform as RectTransform;
#endif

        if (_rectTransform == null || Target == null) return;
        _rectTransform.anchoredPosition = Target.anchoredPosition;
    }
}

후원

이 내용이 맛있었다면 저에게 맛있는 커피를 후원해주세요! ☕

토스 익명 송금 : 후원하기
계좌 송금 : 토스뱅크 1000-0586-4766 (김한용)