UV 좌표 애니메이션

UV 좌표 애니메이션 안내서입니다.

Windows
MacOS
Linux

머티리얼에 모션을 추가하는 기능은 불, 물, 연기와 같은 이펙트를 재현하는 데 있어 없어서는 안될 필수 기능입니다. 언리얼 엔진 4 (UE4)에서 매우 저렴하고 효율적으로 모션을 추가하는 방법은, Panner 머티리얼 표현식 노드를 사용하는 것입니다. Panner 머티리얼 표현식 노드는 텍스처의 UV 좌표를 U 나 V 또는 둘을 조합한 방향으로 이동시켜 줍니다.

UV 좌표 애니메이션이란

UV 좌표 애니메이션 또는 UV 패닝이란 텍스처의 UV 좌표를 가로(U), 세로(V) 또는 둘을 조합한 방향으로 움직여 복잡한 애니메이션이 일어나는 것처럼 보이도록 만드는 것입니다. 다음 예제에서 화염 텍스처를 U (가로) 방향으로 패닝시켜, 불이 움직이는 것처럼 보이게 만들고 있습니다.

Panner 노드 분석

아래는 머티리얼 그래프에 Panner 노드를 추가하면 어때 보이는지를 나타냅니다. Panner 노드는 좌표와 시간, 두 개의 입력을 받은 뒤 결과를 출력합니다. 머티리얼 그래프에 Panner 머티리얼 표현식을 추가하는 방법은, 팔레트Panner 를 검색하거나, 마우스가 머티리얼 그래프 창에 있을 때 키보드의 P 키를 누르면 됩니다.

AU_Node_Breakdown.png

프로퍼티

설명

Coordinate

좌표 - 표현식이 변경할 수 있는 바탕 UV 텍스처 좌표를 받습니다.

Time

시간 - 현재 패닝 위치 결정에 사용되는 값을 받습니다. 보통 Time 표현식은 지속적인 패닝 효과를 내기 위해 사용되나, Constant 또는 Scalar Parameter 를 사용하여 일정량 이격시키거나 마티네 또는 블루프린트를 통해 패닝을 제어시킬 수도 있습니다.

AU_Node_Options_Breakdown.png

프로퍼티

설명

Speed X

X 속력 - 텍스처 좌표의 가로 또는 X 방향 이동 속력입니다.

Speed Y

Y 속력 - 텍스처 좌표의 세로 또는 Y 방향 이동 속력입니다.

Const Coordinate

상수 좌표 - Coordinate 가 연결되지 않은 경우에만 사용됩니다.

Fractional Part

소수점 부분 - 정확도를 높이기 위해 패닝 계산의 소수점 부분만 출력합니다. 출력값은 0 이상 1 미만입니다.

머티리얼에 애니메이션 UV 좌표 사용법

텍스처가 UV 패닝을 사용하도록 구성하는 방법은 다음과 같습니다.

이 튜토리얼은 프로젝트에 시작용 콘텐츠 를 포함시킨 경우 찾아볼 수 있는 콘텐츠를 활용합니다. 프로젝트에 시작용 콘텐츠를 포함시키지 않은 경우, 콘텐츠 이주 문서에서 프로젝트간 콘텐츠 이동 방법을 참고하시기 바랍니다. 이런 식으로 프로젝트를 새로 만들지 않고도 시작용 콘텐츠를 추가시킬 수 있습니다.

  1. 먼저 콘텐츠 브라우저 에 새 머티리얼을 만듭니다. 그 방법은, 콘텐츠 브라우저우클릭 한 다음 기본 애셋 생성 아래 머티리얼 을 선택하고 이름을 Panner_Material 이라 짓습니다. 완료되면 콘텐츠 브라우저 에 다음과 같은 것이 생길 것입니다.

    AU_Creat_New_Material.png

  2. 이제 머티리얼이 생성되었으니, 콘텐츠 브라우저 에서 그 아아콘에 왼쪽 마우스 버튼 으로 더블클릭 하여 엽니다. 머티리얼이 열리면 콘텐츠 브라우저 로 돌아가 Game 폴더를 클릭한 다음 T_Fire_Tiled_D 를 검색하여 화염 텍스처를 찾습니다.

    AU_Find_Fire_Texture.png

  3. 화염 텍스처를 찾았으면, 콘텐츠 브라우저 에서 마우스 왼쪽 버튼 으로 클릭하여 선택한 다음, 누른 상태에서 머티리얼로 끌어옵니다. 머티리얼 위에서 왼쪽 마우스 버튼 을 누르면 그 텍스처가 머티리얼 그래프에 배치됩니다.

  4. 이제 머티리얼 그래프에 텍스처가 배치되었으니, 팔레트 로 가서 Panner 를 검색합니다. Panner 머티리얼 표현식을 찾았으면, 왼쪽 마우스 버튼 으로 선택한 다음 머티리얼 그래프로 끌어옵니다. 머티리얼 그래프 위에서 왼쪽 마우스 버튼 을 놓으면 머티리얼 그래프에 Panner 머티리얼 표현식이 배치됩니다. 완료된 머티리얼 그래프 모습은 다음과 같습니다.

  5. 필요한 모든 노드를 추가했으니, 이제 모든 것을 연결할 차례입니다. 먼저 화염 텍스처의 White 출력을 베이스 컬러 입력에 연결합니다. 그런 다음 Panner 의 출력을 화염 텍스처의 UVs 입력에 연결합니다. 완료되면 다음과 같은 모습일 것입니다.

    AU_Making_Connections.png

  6. 모든 것을 연결했으니, 이제 화염 텍스처를 패닝하도록 만들 차례입니다. 그 방법은, 먼저 Panner 머티리얼 표현식을 선택한 다음 디테일 패널에서 Speed X 파라미터를 0.1 로 설정합니다. AU_Set_Panning_Speed.png

  7. Speeed X0.1 로 설정하자마자, 미리보기 창에 화염 텍스처가 가로로 움직이기 시작하는 것이 보일 것입니다.

  8. 이제 머티리얼을 컴파일, 저장, 사용할 준비가 되었습니다.

팁과 정보

패닝과 다른 머티리얼을 조합해 사용하면 패닝 작동방식을 추가로 제어할 수 있습니다. 아래 예제에서, 위에서 만든 머티리얼을 가져다가 속력뿐 아니라 타일링도 조절할 수 있는 컨트롤을 추가시켜 한 단계 업그레이드했습니다. TexCoordTime 머티리얼 표현식에 곱하는 수치를 높이는 것으로, 화염 텍스처의 속력과 타일링을 조절할 수 있습니다.

AU_Adding_More_Controal.png

Panner 머티리얼 표현식을 중첩시켜 보다 복잡한 움직임 착시 효과를 낼 수도 있습니다. 이 예제에서, 원본 머티리얼 표현식 노드를 전부 선택한 다음 키보드의 CTRL + W 키를 눌러 사본을 만들었습니다. 그런 다음 새로 생성된 노드의 패닝 방향만 Speed X = 0.1 에서 Speed Y = 0.1 로 바꿔 가로가 아닌 세로로 이동하도록 만들었습니다. 다음으로 TimeTexCoord 를 곱하던 값을 1 에서 2 로 올렸습니다. 마지막으로 두 텍스처를 곱하면 아래와 같은 결과가 납니다.

결론

UV 좌표 애니메이션은 머티리얼을 움직이게 만들기 좋은 방법입니다. 연기나 화염처럼 복잡한 모션이 필요한 비주얼 이펙트에 엄청나게 유용하기도 합니다. 하지만 염두에 둘 것은, 애니메이션 UV 좌표가 가장 잘 통하는 곳은 UV 구성이 인접된 오브젝트의 경우입니다. 메시의 UV 좌표가 어긋나면 UV 좌표 애니메이션시 그 부분이 드러날 것입니다.

태그

새로운 언리얼 엔진 4 문서 사이트에 오신 것을 환영합니다!

문서 사이트에 대한 의견을 모을 수 있는 피드백 시스템을 포함해서 여러가지 새로운 기능을 준비하고 있습니다. 아래 Documentation Feedback 포럼(영문) 또는 언리얼 엔진 네이버 공식 카페(한글) 중 편하신 곳에 의견이나 문제점을 알려 주세요.

새 시스템이 준비되면 알려 드리겠습니다.

네이버 카페
공식 포럼