[유니티] 화면전환 효과 (탕탕특공대 따라하기)

프로그래밍/유니티

[유니티] 화면전환 효과 (탕탕특공대 따라하기)

갓똥 2022. 12. 7. 15:13

728x90

0. 목표

탕탕특공대의 화면전환효과 구현해보기

Mask를 사용하면 될 것 같은데 유니티의 기본 Mask컴포넌트는 Mask이미지가 있는 부분만 보여준다.

이건 반대로 Mask이미지를 제외한 영역을 Mask하는게 필요하다.

1. 기본 Mask 적용해보기

먼저 Image를 만들고 이름을 [MaskImage]로 바꿔준다.

Transform이나 Image컴포넌트는 건들지 않았다.

방금 만든 [MaskImage]의 자식으로 Image를 또 만들고 이름을 [MaskedImage]로 변경한다.

구분을 위해 Color값을 바꿨고, Width와 Height를 200으로 바꾸었다. (크기는 부모보다 크면 된다)

다시 [MaskImage]로 와서 Mask 컴포넌트를 추가해준다.

Mask 컴포넌트가 적용되서 (100, 100) 크기만큼만 초록색으로 나오는 모습

[MaskedImage]를 이리저리 움직여본다.

[MaskImage]는 보일 필요가 없으므로 Mask 컴포넌트의 Show Mask Graphic 속성을 꺼준다.

일단 기본 세팅은 끝났다.

우리가 원하는 것은 저거의 반대영역으로 Mask되는 거였으니 한 번 해보자

2. Inverse Mask

먼저 코드를 추가해야 한다.

스크립트를 만들고 스크립트의 이름은 CutoutMaskUI로 한다.

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.UI;

public class CutoutMaskUI : Image
{
    private static readonly int StencilComp = Shader.PropertyToID("_StencilComp");

    public override Material materialForRendering
    {
        get
        {
            var mat = new Material(base.materialForRendering);
            mat.SetInt(StencilComp, (int) CompareFunction.NotEqual);
            return mat;
        }
    }
}

코드는 간단하다.

Image 클래스를 상속받아 Stencil buffer의 값을 반대영역이 필요하므로 NotEqual로 하면 된다.

코드에 대한 좀 더 자세한 설명은 글 최하단에 링크를 참조하길 바란다.