Circle 화면 전환
이 문서는 모여봐요 동물의 숲에서 주로 사용하는 화면 전환 방식인 Circle 화면 전환을 하는 방법에 대해 설명합니다.
예제가 생각보다 간단할 것 같았지만 없어서, 아래 유튜브를 참고하여 직접 제작하였습니다.
•
아래는 위 예제를 보며 최신 셰이더 그래프로 작업한 파일입니다.
셰이더 제작
기본 셰이더 파일 만들기
셰이더의 이름은 Mask_Transition으로 하도록 하죠.
셰이더를 만들 폴더에서 마우스 우 클릭으로 URP Unlit Shader 그래프를 제작합니다.
Create → Shader Graph → URP → Unlit Shader Graph
Custom Function 제작하기
Cutom Function 노드 추가하기
기본 셰이더에 사용자 정의 함수를 추가하려면 다음과 같이 사용자 정의 함수를 추가하면 됩니다.
마우스 오른쪽 버튼을 클릭하여 노드를 생성하고 "Custom Function"을 선택하세요.
Custom Function → Circle Pattern.hlsl 추가하기
이후, CirclePattern이라는 클래스를 가진 HLSL 파일을 만들어 추가합니다.
HLSL 파일을 만드는 방법은 C# 클래스를 만든 후, 확장자를 hlsl로 변경하면 됩니다.
Circle Pattern 작성하기
아래와 같이 Circle Pattern을 작성합니다.
•
uv는 uv.rect의 x,y값을 나타냅니다. 즉, Circle의 기본 형태입니다.
•
center의 x,y값은 원의 위치를 나타냅니다.
•
radius는 Circle의 크기를 조정합니다.
•
smooth는 Circle의 외곽을 블러 처리하는 정도를 조정합니다.
Custom Function 인풋 제작하기
CirclePattern에 대한 입력값을 사용하려면, 아래와 같이 셰이더 변수를 만들어야 합니다.
UV는 기본 UV 값을 사용합니다.
Custom Function 아웃풋 제작하기
이제 원을 만들었으므로, 원을 반전시키면 완성됩니다.
노드를 만들어서 One Minus(반전)에 아웃풋을 넣고 Fragement에 Alpha를 추가합니다.
그리고 Vertex Color(기본)을 Base Color에 연결하면 완성됩니다.
Transition_Screen 프리팹 완성
빈 이미지의 컬러 값을 검은색으로 저장합니다. 아래 그림과 같이 진행하세요.
그 다음으로, 이미지의 머티리얼을 위에서 만든 셰이더의 머티리얼로 설정합니다.
이미지에 위 머티리얼을 적용하면 제작이 완료됩니다.
