9. 브러쉬유: 카멜레온을 터치하면 일어나는 일(3)

 

# 문제 찾기

 

지난 장에서 얘기한 대로 먼저 왜 카멜레온 색 변화가 이상하게 느껴지는지 알아볼게요.

카멜레온 색변화의 문제점

 

이상하게 느껴지는 이유

1. 터치(클릭) 할 때마다 노랑->흰색 변화를 반복한다. 한번 변한 후에도 클릭하면 다시 노랑->흰색으로 변한다.

2. 시작부터 파란 반점이 있는 것이 부자연스럽다.

3. 변하는 속도가 조금 빠른 것 같다.

4. 터치(클릭)를 어디서 하든 고정된 위치에서 색 변화가 시작된다.​

 

 

---

# 문제해결(1): 노랑->흰색 반복 패턴을 없애자.

# 문제해결(2): 파란 반점을 없애자.

 

우리가 원하는 모습은 흰색으로 변했으면 그 상태를 유지하면서 다른색으로 변하는 것이죠. 그리고 파란 반점도 없었으면 합니다.

​

1. Chameleon 액터 블루프린트의 이벤트 그래프를 여세요.

​

2. 먼저 클릭할 때 흰색이 아니라 랜덤 색으로 변하게 만들어줄게요. NewColor 의 Parameter Value를 랜덤생성 하겠습니다. 여기에는 Random Float in Range 노드 3개와 Make Vector 노드 1개가 필요합니다. 모두 우클릭 검색으로 찾을 수 있습니다. (Random Float in Range의 Max 값을 모두 1.0으로 맞춰주세요.)

Random Float in Range 노드와 Make Vector 노드가 처음 등장했어요. Random Float in Range 노드는 정해진 범위(Min부터 Max까지) 안에서 실수(float)를 만드는 노드에요. 그리고 Make Vector는 3개의 실수(float)을 하나의 벡터(Vector)로 묶어주는 역할을 합니다.

​

아무튼, 이 노드망의 의미는

 

 

"랜덤한 색을 만든다."

 

 

입니다.

​

이제 카멜레온은 아래 영상처럼 색을 바꾸게 됩니다.

 

노랑->랜덤색 변화

 

눈치 채신 분들도 있겠지만, 여전히 클릭(터치)하는 순간 카멜레온의 색이 노란색으로 바뀝니다. 그 후에 랜덤한 색이 퍼져나가죠. 새로운 색으로 변했으면 다음 변화할 때 그 색을 유지한 채로 또 다른 색으로 변하는 게 맞겠죠?

​

우리가 M_Chameleon 머티리얼 표현식에 PreviousColor와 NewColor라는 것을 만든것을 기억하실겁니다.

여기서 PreviousColor는 "원래 몸통 색깔"을 의미하고 NewColor는 "원형으로 퍼지는 색깔"을 의미합니다.

​

현재 Chameleon 액터 블루프린트에 우리가 구현한 내용은 아래와 같아요.

​

NewColor의 값을 랜덤하게 바꾼다.

Radius를 0에서 5까지 2초동안 증가시킨다.

​

즉, 원래 몸통 색깔인 PreviousColor는 계속 노란색으로 고정되어있다는 게 문제에요. 그럼 여기서 우리가 추가해야 될 로직은 뭘까요?

​

색 변화가 끝난 다음 몸통색을 원형으로 퍼진 색과 같은 색으로 맞춰준다.

(즉 PreviousColor의 값을 NewColor의 값과 똑같이 만들어준다.)

​

가 되겠네요.

​

이제 한번 만들어볼텐데요. "변수"라고 하는 아주 중요한 개념이 나오니 프로그래밍 경험이 없으신 분들은 집중해서 봐주세요.

​

​

3. MakeVector 노드의 Return Value 핀을 우클릭한 다음 Promote to Variable을 선택하세요.

 

위와 같은 노드가 만들어져야해요.

​

4. 에디터 좌측 My Blueprint 탭에 Variables 카테고리 밑에 NewVar_0을 찾아보세요.

방금 한 일을 이렇게 말할 수 있어요.

 

 

"변수를 만들었다.

변수의 형(Type)은 벡터이다.

혹은

벡터형 변수를 만들었다."

 

 

변수는 데이터를 저장해 놓았다가 필요할 때 꺼내 쓰기 위해 사용하는 상자같은 것인데요. 변수에 대한 자세한 내용은 아래 링크에서 확인해보세요.

 

블루프린트 변수

 

5. 노드를 아래처럼 연결하세요.

랜덤한 색(벡터 값)을 만들어서 우선 NewVar_0 변수에 저장합니다. 그리고 저장된 색상 값을 NewColor의 값으로 사용하는 구조에요.

​

6. Set Vector Parameter Value on Materials 노드를 하나 만들어서 Timeline의 Finished와 연결하세요. (Plane 핀을 뽑아들고 검색하세요.)

 

​

7. NewVar_0 변수를 그래프 안에 끌어옵니다. Get / Set 선택 창에서 Get NewVar_0 를 선택하세요.

 

​

여기서 단축키 팁 하나 알려드릴게요.

- Ctrl를 누른채로 변수를 그래프에 끌고 오면 Get 노드가 바로 생성됩니다.

- Alt를 누른채로 변수를 그래프에 끌고 오면 Set 노드가 바로 생성됩니다.

​

​

8. 새로 만든 노드의 Parameter Name 과 Parameter Value 를 다음과 같이 수정하세요.

PreviousColor의 값을 NewVar_0변수에 저장된 값과 똑같이 만들어주겠다는 의미를 가진 노드입니다.

​

​

전체 노드망의 모습은 아래와 같아야합니다.

​

Compile 과 Save 를 해주세요. 컴파일 및 저장은 블루프린트 수정 후에 필수입니다.

​

9. 이제 테스트를 해볼게요. 에디터 메인으로 나가서 Play를 누르고 테스트 해보세요.

 

천천히 누르면 OK 빠르게 누르면 NG

이제 좀 원하는 느낌에 근접한 것 같네요. 그런데 왜 빠르게 클릭(터치)할 때는 배경색이 고정될까요? 그 이유는 Timeline(타임라인)에 있어요.

​

 

우리가 만든 타임라인은 Length(렝쓰, 길이)가 2.00이기 때문에 2초 동안 특정 작업(Update를 빠르게 여러번 실행)을 하다가 2초가 다 되면 Finished를 실행합니다.

​

그런데 2초가 지나기 전에 다시 터치를 한다면? Finished를 실행하지 않은 채로 타임라인은 다시 처음부터 2초를 셉니다. 그래서 Finished핀에 연결된 Set Vector Parameter Value on Materials 노드가 실행되지 않고, 그에 따라 PreviousColor값도 변경되지 않는거예요.

​

이 문제를 해결하는 방법은 여러가지가 있어요. 여기서는 노드의 순서만 바꿔서 해결하는 방법을 알려드릴게요.

​

먼저, 핀에 마우스 커서를 놓고 알트+좌클릭으로 Finished와의 노드 연결을 끊으세요.

​

 

그리고 해당 노드를 맨 앞으로 가져오세요.

​

​

수정 후에는 반드시 Compile 및 Save를 해주세요.

​

아래는 결과화면입니다.

 

빠른 터치도 OK

영상에는 안나오지만 첫 터치때 순간적으로 검은색으로 변하는 모습을 확인하셨을거예요. 마지막으로 이 부분을 수정하고 넘어갈게요.

​

10. 블루프린트 그래프에서 BeginPlay 이벤트 노드를 찾아서 만드세요.

​

11. 이제 살짝 도전과제를 드릴게요. 아래 BeginPlay 이벤트의 노드망을 완성하세요.

BeginPlay는 게임이 시작할 때(또는 액터가 처음 레벨에 등장할 때) 자동으로 실행되는 이벤트에요.

위 노드망은 다음과 같은 일을 합니다.

- 게임이 시작하면 랜덤한 색을 만들어서 변수 NewVar_0에 저장한다.

- NewVar_0에 저장된 색상 값을 이용해 PreviousColor(카멜레온의 배경색)를 바꿔준다.

- Radius를 0으로 만들어서 NewColor의 영역을 없애준다.

​

노드망을 완성 하셨으면 Compile 및 Save 를 해주세요.

​

​

결과 영상입니다. (처음에 색이 바로 바뀌는 듯한 모습은 영상녹화 끊김이에요)

 

GOOD

이렇게 우리는 처음 발견했던 문제들 중 두가지를 해결했습니다.

​

이상하게 느껴지는 이유

1. 터치(클릭) 할 때마다 노랑->흰색 변화를 반복한다. 한번 변한 후에도 클릭하면 다시 노랑->흰색으로 변한다.

2. 시작부터 파란 반점이 있는 것이 부자연스럽다.

3. 변하는 속도가 조금 빠른 것 같다.

4. 터치(클릭)를 어디서 하든 고정된 위치에서 색 변화가 시작된다.

​

문제해결(3)(4)는 다음 장에서 이어갈게요. 아래는 참고영상이에요.​

​

 

---

# 참고영상(한글 자막): 블루프린트에서 변수 다루기

 

블루프린트에서 변수를 다루는 방법에 대해 감을 잡을 수 있는 시리즈 영상을 가져왔어요. 한번 쭉 보시면 도움이 많이 될 것 같습니다.

 

​

​

​

​