# 페이크 색?
브러쉬유는 다섯개의 제시된 물감 중에 두개를 조합해서 배경색을 맞추는 게임이에요. 그래서 다섯개의 물감 중 세개는 오답이어야 해요. 오답을 만드는 색을 fake color, 페이크 색이라고 부르기로 해요.
# 페이크 색 만들기
페이크 색을 만드는 함수를 작성해볼게요. 이번 과정도 GM_Game에서 진행합니다.
1. GM_Game 블루프린트 클래스 안에 SetFakeColors 함수를 만드세요.
2. For Loop 노드를 만드세요. First Index는 2 Last Index는 4로 만드세요.
3. Variables(변수) 항목에서 Colors 배열(Vector형)을 찾아 Get 노드를 만드세요.
4. Set Array Elem 노드를 만들고 아래처럼 연결하세요.
5. 여기서 다시 새로운 함수를 만드세요. 이름은 GenerateDesiredFakeColor로 지으세요.
6. Random Float in Range 노드 3개와 Make Vector 노드를 이용해 랜덤 Vector를 만드는 노드망을 만드세요.
무작위로 생성되는 페이크 색을 만드는 중이에요.
7. Make Vector 노드의 아웃풋 핀을 우클릭하고 Promote to Local Variable을 선택하세요.
이것은 이 함수 안에서만 쓰려고 만드는 변수에요. 지역 변수(Local Variable) 라고 해요. 무작위로 생성된 페이크 색을 저장할거에요.
8. 함수의 이름을 RandomlyGeneratedFakeColor 라고 지으세요. 그리고 노드를 연결하세요.
9. 이제 매크로 라는 것을 만들겠습니다. MyBlueprint 탭에서 Macros 항목 옆 + 버튼을 눌러서 매크로를 하나 만드세요.
10. 매크로의 이름은 IsNearlyEqualToActualColor 로 지으세요.
이 매크로는 무작위로 만들어진 페이크 색이 혹시 정답 색들과 너무 유사하지는 않은지 판단을 해줄거에요. 확률은 낮지만 정답색과 같은 색이 만들어지거나 너무 유사한 색이 만들어지면 플레이어는 혼란스러울 거에요. 그래서 그런 상황을 방지하기 위한 장치를 만드는 과정이에요.
11. TubeColorA 변수와 TubeColorB 변수의 Get 노드를 매크로 안에 만드세요.
12. 각각의 노드를 뽑아서 Distance (Vector)노드를 만드세요.
13. Distance (Vector) 노드 하나의 V2 핀을 끌어다가 Inputs 노드에 올려놓아서 Input을 하나 만드세요.
14. 두 Distance (Vector) 노드의 V2 핀을 모두 Inputs 에 연결하세요.
15. Distance (Vector) 노드의 Return Value 핀을 뽑.들.검 해서 <= (대소비교) 노드를 만드세요.
16. 대소비교(<=)노드 중 하나의 비어있는 인풋핀(0.0)을 우클릭해서 변수를 만드세요. (Promote to Variable을 선택) 이름은 FakeColorOffset 으로 짓고, 아래처럼 양쪽 대소비교 노드의 하단 인풋핀에 연결하세요.
17. 대소비교 노드의 아웃풋핀을 뽑아들고 OR Boolean 노드를 만드세요.
18. 아래처럼 연결하세요.
19. OR Boolean 노드의 아웃풋 핀을 매크로의 아웃풋 노드에 올려놓으세요. 매크로의 아웃풋 핀이 자동으로 생깁니다.
두 색이 비슷한지 판단하기 위해 삼차원 공간에서 색에 대응하는 점 두개의 거리를 비교하는 과정이에요. 두 점의 위치가 가까우면 두 색은 비슷한 것이고 두 점의 거리가 0일 때, 두 색은 완전히 같은 색이에요. 그리고 가깝다/아니다를 판단하는 거리의 기준은 Fake Color Offset 변수의 값으로 정해줄거예요.
20. Compile & Save 하고 다시 GenerateDesiredFakeColor 함수로 돌아오세요.
21. 방금 만든 IsNearlyEqualToActualColor 매크로를 드래그 앤 드롭으로 노드화 하세요.
22. 연결하세요.
23. Branch 노드를 만들어서 아래 처럼 연결하세요.
랜덤으로 만든 페이크 색이 정답색과 비슷한지(True) 아닌지(False)에 따라 다른 로직을 실행해줄거예요.
24. 먼저 페이크 색과 정답 색이 비슷하지 않은 경우(False), 다시 말해 충분히 정답과 잘 구분되는 색이 만들어 진 경우에는 그 색을 그대로 사용하면 되겠죠. 함수의 시작 노드를 선택하고 디테일 패널에서 ReturnValue 라는 이름의 Vector 형 반환값을 만드세요.
25. Return Node 노드를 아래처럼 연결하세요.
26. 이제 GenerateDesiredFakeColor 함수를 드래그 앤 드롭해서 노드로 만드세요.
GenerateDesiredFakeColor 함수 안에서 다시 GenerateDesiredFakeColor를 호출했어요. 이렇게 내부적으로 자기 자신을 호출하는 함수를 이렇게 불러요.
"재귀 함수"
재귀 함수에 대해 궁금하신 분들은 아래 링크에서 더 알아보세요.
재귀함수 - 나무위키
"재귀함수가 뭔가요?" "잘 들어보게. 옛날옛날 한 산 꼭대기에 이세상 모든 지식을 통달한 선인이 있었어. 마을 사람들은 모두 그 선인에게 수많은 질문을 했고, 모두 지혜롭게 대답해 주었지. 그
namu.wiki
여기서 재귀함수를 왜 썼을까요? 다음의 경우를 보세요.
1. 페이크 색을 만들었는데, 정답 색과 유사하다는 판정을 받았다. (True)
2. 페이크 색을 다시 만들고 또 판정을 받아야 한다.
3. 다시 만든 색도 정답 색과 유사하다고 한다. (True)
4. 다시 페이크 색을 만들고 판정을 받아야 한다.
5. ...
이렇게 경우에 따라서 [페이크 색을 만들고], [정답과 유사하다는 판정을 받고] 의 두가지 과정을 여러번 거칠수도 있어요. 그리고 그 두가지 과정을 수행하는 함수가 Generated Desired Fake Color 함수죠. 그래서 페이크 색이 정답 색과 유사해서 쓸 수 없다는 불합격 판정을 받으면 함수를 한바퀴 더 돌리는거에요. 정답색과 유사하지 않다는 합격 판정을 받을때까지요!
27. Return Node 노드를 Ctrl+c / Ctrl+v를 이용해 복붙하세요. 그리고 아래처럼 연결하세요.
28. 완성된 노드를 아래 사진과 비교하고 이상이 없다면 Compile & Save 하세요.
29. 다시 SetFakeColors 함수로 돌아가세요.
30. GenerateDesiredFakeColor 함수 호출 노드를 배치하세요.
31. 아래와 같이 연결하세요.
32. Compile & Save 하세요.
# 게임 난이도의 구현
Fake Color Offset
앞서 IsNearlyEqualToActualColor 매크로에서 만든 FakeColorOffset 변수의 값에 적절한 범위를 지정하고, 이를 난이도의 개념으로 이해해보겠습니다.
1. 변수 목록에서 FakeColorOffset을 선택하세요. 그리고 디테일 패널을 보세요.
2. Slider Range와 Value Range를 모두 0.1 ~ 0.5 로 만드세요.
이제 Default Value를 0.1 ~ 0.5 범위에서 조절할 수 있어요.
슬라이더에 좌클릭 한 채로 좌우로 드래그 해보세요. 값이 변할거에요.
FakeColorOffset은 아까 설명했듯이 만들어진 페이크 색이 정답 색과 비슷한지를 결정하는 기준 값이라고 했어요. 우리는 이 값으로 게임의 난이도를 조절할 수도 있어요. 이 값과 게임 난이도의 상관관계는 아래와 같아요.
FakeColorOffset = 0.1 일 때는 색이 비슷해도 대부분 합격. 그래서 난이도가 상대적으로 높음.
FakeColorOffset = 0.5 일 때는 색이 조금만 비슷해도 불합격. 정답과 확연히 차이나는 색깔만 나오기 때문에 난이도가 상대적으로 낮음.
나중에 게임 플레이가 어느정도 구현되면 이 값으로 난이도를 조절해 보면서 밸런스 테스트를 해볼게요. 그때까지는 그냥 원하는 값을 넣으시고 Compile & Save 해주세요.
# 전리품 확인하기
색 3종 세트
지난 세 장에 걸쳐서 우리가 얻어낸 전리품들 입니다. 뿌듯하네요.
1. 배경색을 만드는 함수: Make Background Color
2. 정답 색을 만드는 함수: Make Tube Colors
3. 페이크 색을 만드는 함수: Set Fake Colors
그리고 이미 눈치 채셨는지 모르겠지만 이 함수들을 차례대로 실행하면 Colors라는 배열 안에 5개의 색이 채워져요.
Colors 배열의 Get 노드. (알이 꽉찬 꽃게)
배열 안의 5개의 색 중에 처음 2개는 정답 색이고 나머지 3개는 '적절히 만들어진' 페이크 색이에요. 이제 이 배열을 Master 위젯에 전달해서 물감튜브 아이템으로 만들어 주면 게임을 시작할 수 있어요. 다음장에서 그 작업을 진행해볼게요. 끝으로 수학, 색채학, 프로그래밍의 가시밭길을 묵묵히 따라오시는 입문/초보 개발자 여러분들께 존경을 표하며 이 장을 마치겠습니다.
질문과 피드백은 언제나 환영입니다.
'모바일 게임 개발 > [입문]브러쉬유' 카테고리의 다른 글
| 22. 브러쉬유: 혼합색으로 카멜레온 칠하기 등 (0) | 2020.10.25 |
|---|---|
| 21. 브러쉬유: 게임의 시작 (0) | 2020.10.25 |
| 19. 브러쉬유: 배경색을 만드는 두가지 색 만들기 (0) | 2020.10.25 |
| 18. 브러쉬유: 랜덤 배경색 만들기 (0) | 2020.10.25 |
| 17. 브러쉬유: UI 기능 구현(2) (0) | 2020.10.25 |
