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

 

지난 장에서 우리는 카멜레온 색 변화의 문제점 4개 중 2개를 해결했어요. 이번 장에서 나머지 문제들을 모두 해결하고 넘어갈게요.

​

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

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

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

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

 

# 문제해결(3): 천천히 색깔을 바꾸게 하자.

 

1. Chameleon 액터 블루프린트에 쓰인 타임라인(Timeline_0)을 여세요. 노드를 더블클릭하거나 탭이 열려있으면 탭이동을 하셔도 돼요.

​

2. 오른쪽 키의 값을 바꿔줄게요. 키를 선택(좌클릭) 하고나서 Value를 5.0에서 2.0으로 바꾸세요.

 

​

3. Compile & Save 하고 결과를 확인해보겠습니다.

천천히 색을 바꾸는 카멜레온

​

혹시, 게임 플레이 시작 전 레벨에 배치된 카멜레온에 파란반점이 남아있는게 거슬리신다면 M_Chameleon(머티리얼)에서 Radius를 0으로 바꿔주세요. (변경 후 Save 버튼 잊지마세요)

대기중일때도 반점은 없다 ​

 

 

위의 작업을 하셨다면, Chameleon 액터 블루프린트의 BeginPlay에 연결했었던 아래 노드를 지우셔도 돼요. (선택 후 Delete키)

​

 

---

# Timeline 이해하기: 속도를 내가 원하는 만큼 조절하고 싶다면?

 

수학 얘기는 되도록이면 하고 싶지 않았는데, 더 이상 피할수가 없을 것 같네요. 앞서 진행했던 문제해결(3)의 내용은 엄밀한 의미로 "속도만 조절"은 아닙니다.

​

두번째 키의 Value가 처음에는 5.0이었는데 이 말은

​

(타임라인이 실행되는)2초 동안 원(동그라미)은 반지름이 5가 될때까지 커진다.

​

라는 얘기와 같아요. 우리는 Value 값을 2.0으로 줄여주었기 때문에

​

2초 동안 반지름이 2가 될때까지만 커져라!

​

라는 명령을 내린거죠. 똑같은 2초 동안 5만큼 커지는 속도보다 2만큼 커지는 속도가 더 느릴거예요. 근데 이 방법에는 한계가 있어요. 속도를 늦추기 위해 원의 크기를 계속 줄일 수는 없기 때문이에요.

​

두번째 키의 Value를 0.5로 줄여볼게요. 바로 문제가 보일거에요.

두번째 키의 Value = 0.5

​

그래서 이번에는 원의 최종 크기를 줄이는 방법 말고 시간을 늘이는 방법을 사용해보겠습니다.

​

1. 타임라인(Timeline_0)에서 Length를 늘려주세요. 저는 4로 만들게요.

 

​

2. 두번째 키를 선택해서 Time 값을 타임라인의 Length와 같게 만드세요. (Value는 2.0입니다.)

 

Compile & Save 꼭 하세요.

​

결과영상이에요.

아주 좋아요. 아주 귀여워요.

​

이제 변신 속도를 조절하고 싶을땐 지금처럼 Length와 Time으로 조절하세요.

문제해결(3) 끝입니다.

​

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

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

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

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

 

 

---

# 문제해결(4): 터치(클릭)하는 위치에서 색변화가 시작되게 하자.

 

결과부터 보고 시작할게요.

 

클릭(터치)한 곳에서 변화가 일어납니다.

어떻게 해야 이런 효과를 낼 수 있을까요? 천천히 알아보겠습니다.

​

1. 터치 이벤트가 발생했을 때, 아래와 같은 로직을 먼저 실행해야돼요. (Chameleon 액터 블루프린트입니다.)

(한번 혼자서 노드망 만들기에 도전해보세요.)

​

2. 처음으로 만들 노드는 GetPlayerController 에요. 우클릭 검색으로 찾아서 만드세요.

Player Controller (플레이어 컨트롤러) 라는 개념은 언리얼에서 매우매우매우 중요해요. 플레이어 컨트롤러는 게임 속에서 플레이어 그 자체거든요. 자세한 내용은 아래에서 확인해보세요.

 

게임플레이 프레임워크

 

플레이어 컨트롤러

(게임플레이 프레임워크는 매우매우매우 중요한 역할을 하는 녀석들의 모임입니다. 그중의 하나가 플레이어 컨트롤러에요.)

​

​

3. GetPlayerController의 Return Value 핀을 뽑아들고 Get Hit Result Under Finger by Channel​​ 노드를 검색해서 만드세요.

비슷한 이름의 노드가 있으니 주의하세요

 

Get Hit Result Under Finger by Channel은 아래 작업을 진행해요.

- 스크린 터치가 일어난 상황인지 검사

- 스크린 터치가 일어난 상황이 맞으면 터치한 부분에 특정한 액터가 있는지 충돌검사

- 특정한 액터와의 충돌이 확인되면 관련된 정보를 "Hit"(히트)라는 상자에 담아줌. (Return Value는 True가됨)

​

​

4. 터치 위치에서 확인된 액터의 정보를 사용하기 위해서는 Hit Result를 분해해야합니다. 두가지 방법을 알려드릴게요.

(1)Break Hit Result 방식

 

 

첫번째 방식은 Hit Result 핀을 뽑아 들고 Break(쪼개기) 를 하는 방식이에요.

​

 

(2)Split Struct Pin 방식

 

두번째 방식은 Hit Result 핀에 우클릭 > Split Struct Pin 하는 방식이에요. (다시 Hit Result로 만들려면 빠져나온 핀들 중 아무거나 우클릭 > Recombine Struct Pin 을 선택하면 됩니다.)

​

저는 개인적으로 방법(2)를 선호하지만 (1)Break Hit Result 방식을 사용하겠습니다.

​

5. Hit Result를 쪼개서 나온 핀들 중에 Impact Point를 찾으세요.

찾았다 요놈

 

Impact Point는 충돌한 부분의 X, Y, Z좌표를 갖고 있습니다. 좌표값은 월드(레벨) 기준이에요. 일단은 넘어가볼게요.

 

 

---

(대충 좌표 이동 원리 설명하는 부분) 을 작성하다가 다 지웠습니다.

제작이 다 끝나면 원리만 설명하는 포스팅 따로 올릴게요.

---

 

 

6. Impack Point를 쪼개줄게요. 뽑아들고 Break Vector검색하세요.

Vector(벡터)는 3개의 Float(플롯, 실수형)으로 이루어져 있어요. 우리는 X, Y, Z중에서 X, Y만 쓸거에요.

​

7. 먼저 X를 뽑아들고 +를 검색해서 float + float 을 생성하세요.

​

8. +노드의 아웃풋 핀(오른쪽 핀)을 뽑아들고 /를 검색해서 float / float을 생성하세요.

​

9. 화면에 보이는 것처럼 숫자를 입력하세요.

(X + 50) / 100 을 계산하는 노드망이에요.

 

10. Y에도 똑같은 노드망을 만들어주세요.

월드에서 검사한 Impact Point의 X, Y값을 머티리얼의 X, Y값으로 바꿔주는 계산식

 

 

11. 아래처럼, Plane을 타겟으로 하는 Set Scalar Parameter Value on Materials 노드를 두개 만드세요. (Vector 아니고 Scalar에요)

​

12. 아래 그림처럼 연결하세요.

​

13. Event BeginInputTouch노드 시작부분에 방금 만든 노드망을 연결하세요. 뒤에 이어지는 부분도 연결하세요.

​

14. Compile & Save 한 뒤, 테스트해보세요.

 

아주 좋아요

 

자 이렇게 해서 모든 문제를 해결했습니다. 뿌-듯

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

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

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

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

​

이제 초반에 써놨었던 카멜레온 특징을 다시 꺼내볼게요.

 

카멜레온 특)

1. 카멜레온 처럼 생겼다.

2. 터치하면 색이 변한다.

3. Palette 위의 색으로 변한다.

4. 그림자가 있다.

 

이번 장을 끝으로 2번 특징까지 구현을 마쳤습니다. 3번 특징을 구현하기 전에 다음 몇 장에 걸쳐 브러쉬유 게임 진행의 핵심 역할을 하는 게임플레이 프레임워크들을 다뤄볼게요. 조금 생소할지는 몰라도 어려운 개념은 아니니 편한 마음으로 진행해주세요.

​

여기 다시 한번 링크 걸어드릴게요. 슬쩍~ 보고 오세요.

 

게임플레이 프레임워크

​

​

여기까지 잘 따라와주셔서 감사합니다. 다음 장에서 만나요 :)