친절한효자손 취미생활




[언리얼엔진4 강좌] 움직이는 머티리얼 만들기 - TextCoord, Panner 활용



지난시간에 맥스에서 하나의 FBX 파일 안에 두개의 UV언랩을 만든 과정을 보여드린 적이 있다.

이제 두개의 채널을 어떤식으로 활용하는지를 간단한 예시로 이해시키기로 하겠다.

다소 스크롤의 압박이 예상되오니 안전벨트를 단단히 꽉 붙들고, 먹는것은 자제해 달라. 집중해야 하니까.


이것과 관련있는 글은, 이거다 : http://rgy0409.tistory.com/874





피가되고 살이되는 블로그! 친절한효자손의 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로 "모든것을 공유한다"는 뜻 입니다#




언리얼엔진4 머티리얼 노드 구성 살펴보기


언리얼엔진4를 실행한다. 현재 버전은 4.10.1 이다.

우선 새로운 머티리얼을 만들어 본다.




머티리얼을 만들어 보자.

마우스 오른쪽 버튼을 클릭하여, 머티리얼을 선택해서 만들면 된다.





우선, 머티리얼의 전체적인 노드 구성은 이러하다.

처음 접하게 되면, 다소 복잡해 보일 수 있겠으나, 하나하나 풀어서 설명을 해보도록 하겠다.





우선, 오른쪽의 팔레트 항목에서 TextureCoordinate 를 드래그하여 노드로 등록한다.

단축키가 U 인데, U 를 누른 상태로, 블루프린트 화면에서 클릭을 한다.


몇가지 단축키를 확인해보자. 자주 쓰이는 단축키 이다.





방금 소개한 TexCoord 노드이다.





그리고 Panner 노드이다.





Multiply 이다.





색상노드 이다.





처음 TexCoord 를 등록하자. 역할은 저기에 주석으로 설명을 해 놓았다.

우선 빨간색 상자의 숫자는 먼저번 맥스에서 UV맵을 두개 만들었었는데, 그 채널의 번호를 말한다.

맥스에서 UV맵 채널 1, 2 는 Coordinate Index 의 0, 1 이다.


그리고 그 밑에 UTiling / VTiling 은, SubUV 와 비슷한 경우인데,

가로 및 세로의 반복된 이미지의 갯수인데 기본이 1,1 이다. 이것은 텍스쳐를 딱 1장을 표현한다.

만약 2,2 로 입력하게 되면 가로 세로가 두배씩 되기 때문에 4장의 이미지로 보여지게 된다.

3,3 이면 3x3 이므로 9장의 이미지로 보여진다.





Panner 는 슬라이드로 밀어주는 노드 이다.

UV애니메이션과 같은 원리로 적용되는데, Speed X 는 가로로 움직이고, Y 는 세로이다.

그리고 숫자에 - 가 붙으면 반대로 움직인다.





그다음은, 텍스쳐 샘플 노드이다.

말 그대로 텍스쳐를 불러오는 노드인데, 두장을 불러온 이유는, 하나의 원본에 아까 TexCoord 의 UV맵 채널을 두개를 쓸 것이기에 두개의 텍스쳐를 불러왔다.

아까 TexCoord 가 위의 텍스쳐에 연결 되어 있었으므로, 애니메이션은 위의 텍스쳐로 진행되고, 적용되는 텍스쳐는 아래에 있는 둥근 텍스쳐 이다.

즉! 기준이 아래텍스쳐가 되고, 어떤 애니메이션으로 줄지는 TexCoord 가 연결된 텍스쳐가 해당된다.





이것은 그냥 저렇게 왼쪽에 하얀색 라인 하나로 펼쳐진 텍스쳐이다.





그리고 이 텍스쳐 이다.





Multiply 노드는 이 두개의 텍스쳐를 각각 겹치는 부분만 보이게 곱하는 역할을 해준다.

수학적으로 Multi 가 곱의 뜻을 가지고 있기 때문에 이해가 쉬울것이다.





그리고 색상 노드 이다.

RGB 를 수치를 줘서 색상조절도 가능하고, 저기 콘스탄트 부분을 클릭해서 직접 원하는 색상변경도 가능하다.

흰색에 파란색을 곱하니, 푸른색을 띈 이펙트가 완성된다.





그리하여, 색상과 방금 곱했던 텍스쳐의 이미지를 또 곱하면, 푸른색을 띈 무언가가 나올 것이다.

생각보다 원리는 쉽다.





그리고, 머티리얼의 기준은 Blend Mode 는 Additive 로 만들고, Shading Model 을 Unlit 으로 만들어준다.

이펙트 머티리얼의 가장 기본 셋팅이라 할 수 있다.



0


위의 셋팅대로 만들면, 이렇게 보여지게 된다.





다음은, 0번 체널의 UV맵을 이용할 것이다.





이렇게 되면, 가로로 10x1 이 되어, 가로로 10개의 똑같은 텍스쳐가 주루룩~ 연결이 된 이미지가 연출된다.





그리고 속도는 10 이다. 엄청 빠른 것이다.

한번 보도록 하자.




0


지금 너무 빨라서 잘 안보일 수 있는데, 엄청나게 잔상효과처럼 애니메이션이 진행되고 있다.





이번엔 다시 1번 채널 이다.

그리고 5개로 가로로 늘어져 있는 텍스쳐 이다.





속도는 3 정도로 아까보단 느리다.

한번 보자.




0


이런식의 이미지가 펼쳐진다.

이제 대충 감이 오는가???





이렇게 변한 이유는? 그렇다.

아까 젝용될 텍스쳐 샘플 이미지를 변경하였다. 그래서 저렇게 적용되는 것이다.


위의 TexCoord 가 연결된 텍스쳐샘플을 살펴보면, 가로로 5개가 늘어져 있는걸로 봐서???

그렇다! UTiling 에는 분명 숫자 5가 들어갔을 것이다.

또한, Coordinate Index 번호는 0번 채널일 것이다.





실제 적용된 예이다. 과연 어떻게 보여질까??




0


이렇게 보여지게 되는 것이다. 신통방통 하지 않은가???


자, 이제 이 머티리얼을 저렇게 파티클 이미터로 어떻게 표현하는지를 다음시간에 다시 자세히 배워보겠다.

오늘은 머티리얼만...너무 복잡스러울 수 있으니 머리도 쉬워줘야 한다.

언리얼엔진4, 알수록 오묘한 재미가 있다.




검색 포털사이트에서 "친절한효자손" 을 검색!





공유하기

facebook twitter kakaoTalk kakaostory naver band