티스토리 뷰

저번에는 단순히 2D 에셋을 만드는 것을 해봤습니다.


이번에는 그럼 2D애니메이션 머티리얼을 한번만들어볼까요?


-----------------------------------------------------------------------------------------------------------------


이번 준비물은 그냥 애니메이션 스프라이트가 필요합니다.



PNG 형식의 1024 * 1024 최대 8 * 8의 이미지가 들어갈 수 있습니다. 


8 * 8의 이미지 부분은 잘 기억해 주세요. 나중에 머티리얼 노드 작성시에 기억해야할 부분입니다.


준비물이 준비가 되어있다면



여기까지 해주시면 됩니다.


그런데 조금 다른 부분이 보일 것 입니다.


바로


 

























이부분 입니다.


이전강좌와는 다르게 노드 맨 아래에


Customized UV0 라는 것이 생겨있죠?











이부분은



노드 디테일 텝에 있는 Num Customized UVs 부분에 1을 적어주면 됩니다.


기본적으로 설정되어있는 것이 아닌 사용자가 응용해서 만드는 설정으로 숫자를 많이 적을수록 위에 Customized UVs가 많이 


생성됩니다.


여기까지 했으면 이제 해야할 부분은 노드를 만들어 주는 것 입니다.




이것이 저희가 만들어야할 머티리얼 노드의 모습입니다.


스프라이트 이미지를 머티리얼화 시키는 공식(?)비슷한 것으로 태피티킨 머티리얼을 보고 했습니다.



  

                                      (TexCoord)                                                 (1)                                       (param)

머티리얼 노드를 보면 이런것들이 보이죠? 


나머지 Fmod 라던지 Mask라던지는 그냥 치면 나오는데 이것 어떻게 생성해야할지 모를수도 있습니다.


이런것들은



    

                                       (TexCoord)                                                    (1)                                             (param)



TexCoord : 검색에 Coord 검색 - 좌표 - TextureCoordinate

1 : 검색 - Constant 또는 상수 - Constant

param : 검색 - Scalar - 파라미터 - ScalarParameter


로 만들 수 있습니다. 

일단 TextureCoordinate 노드 1개, Constant 노드 1개, ScalarParameter 노드 2개를 만들어주고


Constant 노드는 


Value 값을 1로 설정해주고


ScalarParameter노드는

1개는 이름 설정은 필요 없이 Default Value를 '8'

1개는 Parameter NameCharAni(원하는 이름)으로 설정하고 Default Value를 '0'으로 설정해줍니다.


이렇게...


여기서 먼저만든 Default Value 이름이 None으로 되있는 파라미터의 값이 8인 이유는 아까 불러온 스프라이트의 값이 8*8이었죠? 그렇기 때문이 이미지를 8로 나눠서 불러오기 위한 값입니다.


만약 이미지가 4*4의 스프라이트가 들어가는 이미지라면 이 값은 4가 되어야 합니다.


그리고 파라미터 이름을 CharAni로 설정한 값은 자신의 애니메이션이 보여지는 부분입니다.


          

 0

10 

11 

12 

13 

14 

15 

16 

17 

... 

... 

... 

... 

... 

... 

... 

... 

... 

...

... 

... 

... 

... 

...

... 

... 

... 

... 

... 

... 

... 

..,. 

... 

... 

... 

... 

... 

... 

... 

... 

... 

... 

....

... 

.. 

... 

... 

... 

...

... 

... 

... 

... 

62

 63



만약 스프라이트 노드를 다만들어지면 이미지는 위의 표와 같이 공간이 나눠지게 될 것입니다.


그리고 각 공간마다 값(Parameter)를 가지게 되는데 그 값은 표안에 있는 숫자처럼 들어가게 됩니다.


나중에 블루프린트에서 이값을 변화시키면서 애니메이션 처럼 보이게 하는 것 이죠


( 카페 - 태피치킨 강좌 참고 http://cafe.naver.com/unrealenginekr)


해당 강좌에 보면 Set Scalar Parameter Value에 Parameter Name을 입력하는 부분이 있을 것입니다.


이부분에 입력하는 것이 지금 만들고 있는 Parameter Name CharAni로 설정한 그 이름을 적어주는 것 입니다.


이렇게 노드를 만드는것을 했고 다 연결만 시키면 스프라이트는 완성




그러면 대충 이런 모양이 나올 것 입니다.


마지막으로 여기에 쓰인 함수에 대한 간단한 설명을 해보면


FMod : 두 입력을 나눈 부동소수점 나머지 반환

Floor : 값을 받아 소수점을 무조건 내려 정수로 반환

Divide : 나누기, 나누기는 각 채널별로 이루어 지며 분모값이 실수가 아니라면 채널수는 동일해야한다.

Multiply : 곱하기, 곱하기는 채널별로 이루어 지며 둘중 하나가 단일 실수가 아니라면 채널수는 동일해야한다.

append :  채널을 합쳐 원래보다 채널수가 많은 백터 생성

add :  두 입력을 받아 더한 결과 출력


이정도 입니다. 자세한 설명은 언리얼 문서(링크) 를 참고해주시면 됩니다.


-----------------------------------------------------------------------------------------------------------------


이번에는 애니메이션 머티리얼을 만드는 방법입니다.


이것역시 태피치킨을 보면서 따라 만들어본 것인데요.


대충 원리는 알겠는에 수학 부분에 있어서 돌아가는 부분은 잘 모르겠네요ㅜㅜ 그냥 따라가기만 할 뿐...


그래도 누군가 이거에 대한 자세한 설명을 해줄것을 기대해봅니다 ㄷ.ㄷ..





댓글