# 진짜 카멜레온 처럼
앞으로 몇 장만 더 지나면 아래 영상과 같은 효과를 만들 수 있을거에요.
색이 변하는 카멜레온
serviceapi.nmv.naver.com
# 새로운 색이 서서히 퍼져나가는 원리
카멜레온의 색이 변하는 모습을 자세히 관찰해보면 이런 생각이 들거에요.
- 색이 순식간에 바뀌는 게 아니라 새로운 색이 서서히 퍼져나가는군?
지금부터 이 특성을 구현해보겠습니다.
1. M_Chameleon 머티리얼을 열고 RadialGradientExponential을 꺼내듭니다. 이번 구현의 핵심이 될 노드입니다.
2. 이번에는 4개의 ScalarParameter 노드를 만드세요.
3. 방금 만든 ScalarParamter 노드를 하나씩 클릭한뒤, 디테일 패널에서 Parameter Name을 오른쪽 그림과 같이 바꿔주세요.
4. 이제 각 노드들을 아래와 같이 연결해주겠습니다. (중간에 보이는 MakeFloat2 노드도 찾아서 생성해주세요.)
# RadialGradientExponential 노드의 역할
여기서 잠깐 우리가 무엇을 하고 있는지 설명하고 넘어가겠습니다.
RadialGradientExponential 노드는 아래와 같은 그림을 그려주는 노드에요. 가장자리가 흐릿한 원이죠.
저는 이 원에 색깔을 담아 카멜레온에게 입혀주려고 하는거에요. 아래처럼요.
그리고 이 원은 전체 그림 안에서 위치를 옮겨 다닐 수 있고, 크기 조절도 됩니다.
우리는 X, Y 노드의 값으로 원의 위치(CenterPosition)를 조절하고, Radius 노드의 값으로 원의 크기(Radius)를 조절할거에요. (Density는 원의 가장자리를 흐릿하거나 뚜렷하게 만들어주는 값입니다. 여기서는 5로 고정하겠습니다.)
ScalarParameter 노드의 값을 바꾸는 방법은 아래와 같습니다.
일단 처음에는 제가 정해드리는 값을 각 ScalarParameter 노드에 입력해주세요.
X = 0.25
Y = 0.05
Radius = 0.45
Density = 5
# 두가지 색깔을 가지고 있는 카멜레온
곰곰히 생각해보면, 카멜레온의 색깔이 완전히 변하기 전까지는 몸에 두가지 색깔이 있습니다. 원래 색은 점점 사라지고 새로운 색이 그 자리를 차지하게 되는것이죠. 이런 특징을 생각하면서 다음 과정을 진행해볼게요.
1. 현재 M_Chameleon 머티리얼 그래프의 상태를 확인해주세요.
2. 우선 VectorParameter의 이름을 PreviousColor로 바꾸세요.
3. 이제 RadialGradientExponential 노드가 등장할 때입니다. 노드를 다음과 같이 다시 연결해주세요. 최종 연결은 끊어두셔도 됩니다. 아직 추가해야 될 노드들이 좀 있거든요. Subtract 라는 노드도 등장한 것이 보이시죠?
참고로 노드 이름 옆 세모를 눌러주면 각 단계의 프리뷰가 나옵니다.
4. 자, 이번에는 새로운 VectorParameter를 만들어서 NewColor라고 이름붙여주세요. 그리고 색깔도 정해볼게요.
5. Multiply 노드 3개를 추가해서 다음과 같은 연결구조를 만들어봅시다.
시간이 좀 걸리더라도 연결이 잘 되었는지 확인하면서 만들어보세요.
6. Add 노드를 추가해서 위 아래 두 노드를 합쳐주세요.
7. 이 기회에 카멜레온에게 눈도 달아줄게요.
8. 그리고 마지막으로 Emissive Color 에 결과값을 연결해준 뒤에 프리뷰 창을 확인해보세요. 배경이 까맣군요.
9. 까만 배경을 없애기 위해 카멜레온 몸통 텍스쳐의 A(Alpha Channel, 알파채널)핀을 Opacity Mask에 연결해주세요.
저장버튼 잊지마세요.
10. 완성이에요.
11. 처음에 만들었던 X, Y, Radius 노드들의 값을 다양하게 바꿔보세요.
12. Chameleon 액터 블루프린트의 판떼기도 바뀐 것을 확인할 수 있어요.
# 마무리
드디어 자연스럽게 색이 변하는 카멜레온을 완성했어요. 뿌듯하네요.
다음 장 부터 아래 질문들에 대한 답을 해나갈거에요.
- 언제 카멜레온의 색을 바꿀까?
- 몸통의 어느 부분부터 색을 바꾸기 시작할까?
- 어떤 색으로 바꿀까?
- 근데, 카멜레온을 어디에 배치하지?
등등등...
# 머티리얼이 할 수 있는 일
머티리얼이 할 수 있는 일은 정말 많아요. 아래 링크에서 천천히 확인해보세요.
머티리얼
셰이더를 활용하여 월드의 표면 외형을 제어하는 방법입니다.
docs.unrealengine.com
'모바일 게임 개발 > [입문]브러쉬유' 카테고리의 다른 글
| 8. 브러쉬유: 카멜레온을 터치하면 일어나는 일(2) (0) | 2020.10.23 |
|---|---|
| 7. 브러쉬유: 카멜레온을 터치하면 일어나는 일(1) (0) | 2020.10.23 |
| 5. 브러쉬유: 카멜레온 만들기(3) (0) | 2020.10.23 |
| 4. 브러쉬유: 카멜레온 만들기(2) (0) | 2020.10.23 |
| 3. 브러쉬유: 카멜레온 만들기(1) (0) | 2020.10.23 |
