UI 이펙트 제작

UI 이펙트를 만들 때 가장 문제점은 드로우 될 때 원하는 아웃풋이 나오지 않는 다는 것입니다.

마스킹이나 캔버스에 그려지는 부분이 이상하게 나오고는 하죠.

이 때는 Shader에서 건드려야합니다. 왠지는 모르겠지만 유니티 UGUI는 Stencil을 이용하는 듯 합니다. Unlit이나 이런 Shader에 Stencil 코드를 추가하게 되면 UI에서 랜더링 되듯 잘 나옵니다.

추가해야하는 코드는

_StencilComp("Stencil Comparison", Float) = 8
_Stencil("Stencil ID", Float) = 0
_StencilOp("Stencil Operation", Float) = 0
_StencilWriteMask("Stencil Write Mask", Float) = 255
_StencilReadMask("Stencil Read Mask", Float) = 255

프로퍼티에 이걸 추가하구요.

서브셰이더에

Stencil {
    Ref[_Stencil]
    Comp[_StencilComp]
    Pass[_StencilOp]
    ReadMask[_StencilReadMask]
    WriteMask[_StencilWriteMask]
}

이 코드를 추가하면 UI Shader 완성입니다.

저는 UI Shader를 만들 때에 셰이더 그래프나 앰플리파이로 원하는 아웃풋을 만들어 낸 후 컴파일링 해서 그 안에 코드를 긁어서 새로운 셰이더를 만들고 Stencil을 추가하는 편입니다. 셰이더 코드를 조금 이지만 수정할 수 있고, 그닥 어렵지도 않기 때문입니다.

아니면 가장 간단한 방법은 에셋을 쓰는 것입니다. Coffee 에셋이 있는데, UI Particle을 여러개 표현할 수 있도록 해주는 좋은 에셋입니다.

그래서 이런식으로 UI Shader를 만들면 화면에 UI에 가려지지 않고 잘 나오게 됩니다.

근데 유니티6에서는 UI Shader가 되도록 만들어놔서 이런식으로 안해도 괜찮으니 이건 유니티 6버전 이전에만 사용하도록 합시다!