오늘도
환영합니다
지난 강의에서는 엔진용 에셋을 만드는 과정에 대해 다뤄보았습니다
머티리얼 그래프 내에서 할 수 있는 것들과 할 수 없는 것들을
다뤘습니다
그리고 프로젝트에 필요한 화살표 텍스처도 가져왔습니다
저번 강의는 꽤 짧은 강의였지만 이번 강의부터는 어려워질 예정입니다
그리고 오늘의 강의는 작은 과제로 시작해보겠습니다
이미 에디터에 Aero(에어로) 텍스처가 준비됐으니 우선 plane(평면)을
월드, 즉 우리가 만든 지저분한 플랫폼 위에 드래그할 것입니다
그 다음에 새로운 머티리얼을 만들어서 그 안에 Aero(에어로) 텍스처를 샘플하는 것입니다
마지막으로는 plane(평면)에 머티리얼을 할당해 볼 것입니다
영상을 멈추고 바로 시도해 보시기 바랍니다
어떠셨나요, 성공적으로 머티리얼을 만들고 plane(평면)에 할당하셨나요?
걱정 마세요, 같이 해보겠습니다
여기에 제 큐브들이 있는데 이렇게 많이는 필요 없습니다
몇 개는 시범을 보여드리기 위함이었습니다
그러니 지워주겠습니다
이 검정색 큐브들과 분홍색 큐브를 지워줍니다
그리고 이 큐브는 회전시키려고 합니다
90도로 회전시킵니다
그래서 면 한 쪽이 위를 보도록 합니다
이제는 Aero(에어로) 텍스처를 사용해보겠습니다
Material 폴더를 보면 역시나 시범용으로 제작했던 폴더 두 개가
있습니다
지금은 필요 없으니 둘 다 지워주겠습니다
Force Delete(강제 삭제)를 선택합니다
좋습니다, 머티리얼부터 만들어보겠습니다
Materials에서 Material을 선택하고 이름을 지어줄 건데
언리얼의 이름 규약을 기억하시나요?
M_MovingArrow로 지어주겠습니다
좋습니다, 더블 클릭으로 머티리얼을 열어줍니다
여기 보이는 것이 인터페이스입니다
지금쯤 여러분도 익숙하실 거라 생각합니다
우클릭을 하고 texture sample을 입력합니다
이 밑에 바로 texture sample이 보입니다
그리고 드롭다운에서 T_Arrow를 선택합니다
RGB를 Base Color(베이스 컬러)에 연결해 줄 것입니다
Base Color(베이스 컬러)는 Constant3Vector를 필요로 한다는 것을 잊으면 안 됩니다
그래서 이걸 여기에 플러그해줍니다
그리고 더 잘 볼 수 있도록 미리보기 mesh(메시)를 plane(평면)으로 바꿔줍니다
이런 식으로 말입니다
이 검정색 배경이 바로 보여지는데 이것은 우리가 원하는 게
아닙니다
투명했으면 좋겠습니다
어떻게 할 수 있을까요?
그러려면 여길 살펴보아야 합니다
무언가를 투명하게 만들고 싶다면 어떤 소켓을 사용해야 할까요?
여기서는 이 Opacity(불투명도)를 다뤄야 한다는 것을 바로 알 수 있습니다
여기에 Object(오브젝트)의 translucency(반투명도)를 제어한다고 적혀 있습니다
우리가 다루고 싶은 게 맞는 것 같은데 지금은 회색 글씨로 보이고 있습니다
어떤 데이터도 넣을 수 없다는 의미입니다
그럼 어떻게 바꿀 수 있을까요?
바꾸려면 Blend 모드를 바꿔야 합니다
좌클릭을 하고 여기 Blend 모드로 갑니다
여기에 Opaque(불투명)이라고 적혀있으며 Opacity(불투명도) 소켓을 조작할 수 없게 해놨습니다
그래서 바로 Translucent(반투명)으로 바꿔주겠습니다
그럼 바로 Opacity(불투명도)에 데이터를 넣을 수 있는데 어떻게 투명하게 만들 수 있을까요?
Texture를 클릭하고 돋보기 모양을 클릭하면
텍스처가 위치한 곳을 볼 수 있으며 더블 클릭으로 열어주시기 바랍니다
검정색 배경에 흰색 화살표가 중간에 있는 단순한 텍스처입니다
색의 개념을 상기해보자면 색은 값으로 이루어져 있으며 흰색은 1, 검정색은 0입니다
그러니 흰색과 검정색의 값들을 사용해 볼 수 있을 것 같습니다
하지만 어떻게 사용해야 할까요?
이 채널들 중에 선택하여 그것을 Opacity(불투명도) 소켓에 플러그해줄 수 있습니다
그러면 바로 흰색 화살표만 남게 됩니다
이유가 무엇일까요?
텍스처로 돌아가서 채널 중 하나를 분리시켜 보면 전부 다
같은 값을 갖고 있습니다
모두 같은 화살표와 흰색, 즉 1의 값을 갖고 있습니다
그리고 그것을 Opacity(불투명도) 소켓에 플러그함으로 오직 1인 값들만 표시하고
0인 값들, 즉 검정색은 표시하지 않는 것입니다
이런 식으로 투명한 배경을 만들 수 있었습니다
이제는 투명한 화살표 차례입니다
plane(평면)에 할당하는 것이 다음 단계입니다
에디터로 돌아와 Place Actors(액터 배치)에서 Plane(평면)을 드래그 해옵니다
Plane(평면)을 드래그해서 큐브 위에 올려놓습니다
이 Snapping(스내핑) 툴은 끄겠습니다 이게 켜져 있으면 스냅할 수 없습니다
좋습니다
Plane(평면)이 준비되었으니 여기에 머티리얼을 할당하기 위해 이 머티리얼 섹션에
드래그 해줍니다
아직 아무것도 보이지 않고 그 이유는 Apply(적용)을 누르지 않았기 때문입니다
그러니 잊지 말고 눌러주셔야 합니다
좋습니다
화살표가 준비됐습니다
화살표와 Plane(평면)이 준비되었습니다
다음 단계를 이 화살표를 움직이게 하는 것입니다
애초에 그래프에서 무엇이든 움직이려면 어떻게 해야 할까요?
이 질문에 답을 하려면 한 가지 확실히 아셔야 하는 게 있습니다
텍스처를 움직이게 하고 싶습니까?
지금 경우에는 화살표를 말하는 것입니다
아니면 Object(오브젝트)를 움직이게 하고 싶은 것인가요?
여러분의 작업 공간에 나무가 있는데 그것을 바람에 흔들리도록 연출하고 싶다고 가정해봅시다
'Object(오브젝트)'를 움직이게 하고 싶은가는 이런 뜻에서 한 말입니다
바람에 흔들리는 풀도 마찬가지일 것이며
그러려면 소켓이나 Position Offset에 데이터가 필요합니다
그래프 안에서는 이 두 가지가 어떻게 성사될까요?
텍스처를 움직이게 하고 싶을 때는 UV를 다뤄야 합니다
지금쯤 UV와 UV가 무엇인지 익숙하실 거라 생각합니다
그리고 Object(오브젝트)는 움직이게 하고 싶다면 Vertices(꼭짓점)을 이동시킴으로 할 수 있습니다
데이터를 사용해 머티리얼 그래프의 꼭짓점들을 이동시키는 것입니다
이런 방식으로 바람이나 나무, 풀이 동작되는 것입니다
오늘은 UV를 사용해서 텍스처를 움직이는 것에 중점을 두겠습니다
그걸 어떻게 할 수 있을지는 우리가 화살표에 무엇을 원하는지부터 생각해 봅시다
간단하게 우리는 화살표가 특정 방향을 따라 이동했으면 좋겠습니다, 이런 식으로 말입니다
그러기 위해서 UV를 사용해야 합니다
UV와 UV 매핑이 무엇인지는 이미 설명을 했으니 U는 수평
V는 수직 축이라는 것을 알고 있습니다 하지만 그 축에 대해서는
다루지 않았는데 이게 언리얼에서 보이는 모습니다
수평 축은 U, 수직 축은 V이며 UV의 원점은 언제나 좌측 상단에서
시작합니다
여기에 원점이 있으며 거기서 부터 화살표가 시작됩니다
0, 0이라는 좌표를 예시로 들어보겠습니다
그리고 우리가 원하는 것은 화살표가 수평 축을 따라 이동하는 것이므로
첫 번째 값을 바꿔야 합니다
값을 어떻게 바꿀 수 있을까요?
지난 강의들을 상기시켜보면 Multiply 노드로 UV 타일링을 제어했었습니다
곱하기로 처리된 것입니다
하지만 텍스처를 움직이기 위해서는 Add나 Subtract라는 노드가 필요합니다
그리고 이건 나중에 다뤄볼 주제입니다
그럼 일단 무언가를 움직이게 하려면
우선 속도가 필요합니다
얼마나 빨라야 하는지가
중요합니다
다음으로는
시간이 필요합니다
시간은 왜 필요할까요?
시간으로 거리를 정할 수 있기 때문입니다
Object(오브젝트)가 얼마나 멀리 움직일 수 있는지 말입니다
속도와 시간을 곱하면 거리를 알아낼 수 있습니다
그래서 Add 노드를 사용해 거리를 UV 좌표에 더하면
텍스처를 움직이게 할 수 있습니다
시간이 흐르면서 거리가 매 초마다 증가합니다
그러니 텍스처는 매 초마다 이동하는 것입니다
다시 머티리얼 그래프로 돌아와서 Add 노드를 불러오겠습니다
우클릭을 하고 add를 입력을 할 건데 기억하셔야 할 것은
값이 바뀌어야 텍스처가 움직이기 때문에 바뀌는 값을 U에 넣어야 합니다
지난 강의들에서 UV를 조작하고 싶을 땐
Texture Coordinate(텍스처 좌표) 노드가 있어야 한다고 했습니다
그럼 먼저 Texture Coordinate(텍스처 좌표)를 UV 소켓에 플러그해줍니다
아무것도 바뀌지 않았는데 그건 아직 아무것도 하지 않았기 때문입니다
제가 조금 전에 무언가를 움직이고 싶다면 데이터가 필요하다고 했습니다
가장 먼저 필요한 것은 속도, 두 번째는 시간이며 이유는
흐르는 시간이 이동 거리를 매 초마다 바꿔줄 것이기 때문입니다
머티리얼 그래프에 어떻게 시간을 넣을 수 있을까요?
다행히 이를 위한 노드가 있습니다
우클릭으로 time을 입력합니다
흔하게 사용되는 노드이며 언제든 머티리얼 그래프 내에서 애니메이션 작업을 할 때
이 노드가 필요합니다
좋습니다, 이제 Time(시간)이 생겼습니다
이제 속도가 필요합니다
속도는
Constant1Vector, 1Float을 사용하겠습니다
숫자 1 키를 꾹 누르며
좌클릭해서 값을 불러옵니다
1이라는 값을 부여해주는데 기본 값입니다
거리는 시간 곱하기 속도라는 것을 기억하셔야 합니다
그래서 M키를 꾹 누르고 좌클릭하여 Multiply 노드를 가져오고
Time(시간) 노드와 1Float 노드를 이런 식으로 플러그합니다
이제 거리가 생겼으니 남은 것은 이 거리를 UV에 더하는 것입니다
해봅시다
Texture Coordinate(텍스처 좌표)와 거리를 Add에 플러그해주고 여기서
나오는 값은
계속 변하는 값이며 이걸 UV에
바로 플러그해줍니다
이제 텍스처가 움직이는 게 보이지만 이상한 방향으로 움직이고 있습니다
더 잘 보기 위해서 속도를 줄여보겠습니다
0.1로 해봅시다
화살표가 축의 원점으로 이동하는 것이 보이며 U와 V 둘 다
값을 더하고 있습니다
우리가 원하는 결과가 아닙니다
우리가 원하는 것은 화살표가 한 방향으로 이동하는 것입니다
또 다른 과제가 생겼습니다
여러분의 과제는 UV를 텍스처 좌표로부터 분리시키는 것입니다
어떻게 하는지 기억해내시기 바랍니다
무엇을 사용해야 하는지 기억하셔야 합니다
그리고 V는 만지지 않고 오직 U만 움직이게 하려면
무엇을 사용해야 할까요?
그리고 UV 데이터를 다시 올바른 소켓에 플러그하시기 바랍니다
그러기 위해 또 다른 노드가 필요하며 지난 강의들에서 다뤘던 내용입니다
부디 기억하고 계셨으면 좋겠습니다
그럼 영상을 멈추고 직접 시도해 볼 시간입니다
어떠셨나요?
성공적으로 U와 V를 분리하셨나요?
같이 살펴봅시다
지난 강의들에서 설명했던 것처럼 UV를 분리시키려면 컴포넌트 마스크가 필요합니다
그러니 가져와주겠습니다 .
우클릭을 하고 component mask를 입력하여 불러옵니다
지금은 R과 G이지만 우리가 분리시키고 싶은 채널은 U와 V입니다
그러니 이 Texture Coordinate(텍스처 좌표)부터 컴포넌트 마스크에 플러그 해주고 오직 레드 채널만
선택해주겠습니다
여기서는 사실 레드 채널을 의미하는 게 아니라 Texture Coordinate(텍스처 좌표)를 플러그하므로
이것은 UV 채널이며 U를 Add 소켓에 플러그해주겠습니다
오직 U만 더해야 하지만 V도 분리시켜주겠습니다
그러지 않으면 이런 이상한 텍스처, 화살표가 보이기 때문입니다
그래서 이걸 마스크에 플러그하고 이번엔 그린 채널만 선택하겠습니다
그래서 이것이 V가 될 것이고 조금 정리를 해줍시다
이 노드는 내려주고 이 노드는 올려줍니다
좋습니다, 이런 식으로 완성됐습니다
이제 두 개의 분리된 값이 있지만 UV 소켓은 2Floats를 필요로 하므로 다시
합쳐주겠습니다
Append 노드가 필요합니다
U는 소켓 A에 V는 소켓 B에 플러그해주고 UV로 끌어다 줍니다
이제 움직이는 화살표가 생겼습니다
방향이 조금 이상하긴 한데 그 이유는 우리가 방향을 바꾸기 위해 값을 더하고 있기 때문입니다
마이너스 값을 더해주면 되는데 예를 들어 속도를 -0.1로 바꿔주면 우리가 원하는 방향으로
바뀌었습니다
Apply(적용)하고
레벨(층)에 돌아가 봅시다
화살표가 잘 움직이고 있습니다
하지만 조금 느린 것 같습니다
속도를 올려보겠습니다
-0.5로 설정하고 적용합니다
다시 돌아가보면
잘 움직이고 있습니다
지금까지 Add를 사용한 방식이었으며 같은 과정을 Subtract로도 만들 수 있습니다
지금은 마이너스 값을 더하고 있으니 값을 빼는 것도 같은 결과를 보일 것입니다
그래서 핀을 끌어와 Subtract를 입력해 줍니다
마이너스 기호를 입력하거나 subtract를 입력하시면 됩니다
두 가지 다 동일하며 이제 양수를 뺄셈할 수 있습니다
그래서 Multiply에서 Subtract로 핀을 플러그해주고 이걸 -0.5에서
0.5로 바꿔준 다음 Append 소켓에 플러그해주면 같은 결과가 나옵니다
동일합니다
차이점은 음수를 더하느냐 양수를 빼느냐의 차이입니다
저는 Add를 사용하겠습니다
그러니 이 노드는 지워주고 값은 도로 -0.5로 바꿔줍니다
이걸 Append 노드에 플러그합니다
자 그럼 움직이는 화살표가 생겼습니다
이번 강의에서는 Add와 Subtract를 사용해 UV에서 나오는 데이터를 다루는 방법에 대해
살펴보았습니다
그리고 성공적으로 화살표를 이동시켰습니다
좋습니다
다음 강의에서 뵙겠습니다