유니티 셰이더그래프 UI에서 화면전환하기 / Unity Shadergraph UI Transition

 

 

트랜지션 (Transition)이란?

맵을 이동하거나 로딩이 필요할 때 뚝 끊기는 부자연스러운 상황을 숨기기 위해

화면을 가려서 장면을 전환하고 싶을 때 트랜지션 효과가 유용하게 사용됩니다.

 

화면전환 애니메이션을 UI위에서 작동하도록 셰이더 그래프로 만들어 봅시다.

 

 

 

셰이더 그래프 

Lit Shader Graph를 생성하고 참조하고 있는 머테리얼을 만듭니다.

트랜지션이 될 이미지를 생성하고 캔버스의 맨 아래로 내려 맨 앞에 보이게 합니다.

 

캔버스(Canvas)의 정렬 순서

단일 캔버스인 경우
하이어라키 상 아래로 갈수록 앞쪽에 보입니다.

다중 캔버스인 경우
한 캔버스 안에는 하이어라키 상 아래로 갈수록 앞쪽에 보입니다.
캔버스끼리는 Canvas 게임 오브젝트를 선택하고 Canvas 컴포넌트의 Sort Order 숫자가 높을수록 앞에 보입니다.
숫자가 같다면 앞에 보이는 것도 항상 다릅니다.

 

이미지 선택 Rect Transform의 기즈모를 선택하고 Alt + Shift로 해 전체를 덮도록 합니다.

Image의 Material에 트랜지션 머테리얼을 넣습니다.

 

 

BlackBoard에 Texture2D 타입의 MainTex라는 이름으로 만들고 Graph Inspector에서 Exposed를 체크 해제합니다.

UI에서 Lit Shader Graph를 사용하면 메인 텍스쳐를 찾을 수 없다는 에러가 뜨기 때문입니다.

 

 

UV를 Base Color에 넣어보면 게임뷰의 왼쪽 하단이 0, 0이고 오른쪽 상단이 1, 1임을 알 수 있습니다.

이미지도 캔버스 상에서 존재하는 메시이기 때문에 Quad를 UI에 올려뒀다 생각해도 됩니다.

 

 

 

셰이더 그래프 셋팅

Graph Inspector - Graph Settings에

Material을 Lit

Surface Type을 Transparent

Depth Test를 Always (ios 빌드시 꼭 필요합니다)

Alpha Clipping 체크

Cast Shadows 체크 해제

Receive Shadows 체크 해제

 

 

닦아내기 트랜지션

간단하게 수평으로 닦아내기 트랜지션을 만들어 보겠습니다.

 

Black Board에 Float형의 Lerp를 만듦니다.

Lerp 선택하고 Graph Inspector에서 Mode를 Slider로 설정한 뒤 0, 1로 제한합니다.

 

UV를 R채널만 분리해 Step으로 깎아내 Alpha Clip Threshold에 넣습니다.

이러면 Alpha가 0.5이기 때문에 이보다 숫자가 작으면 픽셀이 버려져 투명하게 보입니다.

이때 Base Color를 검정으로 설정하여 트랜지션이 검정색이 되도록 합니다.

 

원하는 대로 0~1로 슬라이더를 조정하면 검정에서 투명이 되는 걸 볼 수 있습니다.

이 원리로 다양한 모습의 트랜지션을 만들 수 있는데요!

 

 

 

원형 트랜지션

만약 트랜지션 UI 비율이 모든 해상도에 정사각형으로 대응하고 싶으시면

Aspect Ratio Fitter 컴포넌트를 추가하고

Aspect Mode를 Envelope Parent

Aspect Ratio를 1로 설정하면 됩니다.

 

그러면 캔버스의 항상 정중앙을 중심으로 스크린의 가로 세로 중 긴 길이에 맞춰 배치됩니다.

 

 

UV의 가로와 세로는 1 단위입니다.

그래서 Lerp가 0일때 Width와 Height가 0이기에 완전히 안 보입니다.

Lerp가 1일때 원이 완전 보이게 하려면 Width와 Height는 원의 지름인 √1^2 + 1^2 인 √2입니다

 

 

 

이렇게 원형으로도 트랜지션을 구현해봤습니다.

트랜지션의 방법은 무궁무진하니 여러분들의 상상력을 셰이더 그래프로 나타내보세요~