본문 바로가기

모바일 게임 개발/[입문]브러쉬유

22. 브러쉬유: 혼합색으로 카멜레온 칠하기 등

 

 

# 오랜만에 열어본 Chameleon 블루프린트

 

정말 오랜만에 Chameleon 블루프린트에서 작업을 해주겠습니다. 블루프린트를 열어주세요.

1. 중요한 것은 아니지만 정리를 위해 몇가지를 수정할게요. 먼저 Components 탭에서 Plane 이라고 써진 Static Mesh Component의 이름을 ChameleonMesh로 지으세요.

2. NewVar_0 변수의 이름을 BodyColor로 바꿔주세요.

 

3. BeginInputTouch 이벤트 노드에서 아래 노드들을 모두 선택하세요.

4. 선택에 포함된 아무 노드를 골라 우클릭 하세요. Collapse to Macro를 선택하세요. 매크로가 만들어지면 SetColorChangeOrigin으로 이름지으세요.

 

Collapse to Macro 기능은 선택한 노드들을 하나의 매크로로 묶는 기능이에요. 언리얼에서는 노드들을 매크로로 묶는 것 외에 함수로 묶는 기능(Collapse to Function), 그리고 단순히 하나의 노드로 합치는 기능(Collapse Nodes)도 지원해요. 각각의 차이점은 아래 링크에서 확인해보세요.

 

 

그래프 접기

노드를 새로운 그래프나 함수나 매크로에 접는 방법입니다.

docs.unrealengine.com

5. Compile & Save 하세요.

Chameleon 블루프린트는 아래 과정을 마치고 다시 돌아오겠습니다.

 

 


# 색 합성하기

 

카멜레온을 터치했을 때 Answers 슬롯에 있는 두가지 튜브의 색을 혼합해서 가져오는 함수를 만들어볼게요.

1. Master 위젯을 열고 GetSynthesisResult 함수를만드세요.

2. Answers 변수의 Get 노드를 만들고 아래 노드망을 만드세요.( 빠른 진행을 위해 이전에 다루었던 내용들은 한꺼번에 구현해볼게요.)

눈치채셨겠지만 Answers라는 Horizontal Box에서 ItemSlot을 찾고, 그 위에 올라간 Item 위젯을 찾아서 Color 값에 접근하는 중이에요.

3. 여섯 개의 노드를 더 추가해서 아래와 같은 노드망을 만드세요.

여기까지가 각각의 물감 튜브가 갖고 있는 Color 변수에 접근하기 위한 과정이에요.

4. 함수 안에서만 사용할 Local Variable(지역 변수)을 하나 만들어주세요. Vector 형 변수로 만들고 이름은 ColorResult로 지으세요.

5. ColorResult 지역변수(Local Variable)를 선택하고 Detail 패널에서 Default Value를 1.0 1.0 1.0 으로 만드세요.

 

6. Item 위젯에서 불러온 Color 노드 뒤에 아래와 같은 노드망을 연결하세요.

C = A + B - 1 으로 표현되는 감산 혼합 공식 기억나시나요? 그 공식을 사용해서 색을 혼합하는 과정이에요.

7. 함수 목록에서 현재 함수의 이름 또는 함수 시작 노드를 클릭한 뒤, 디테일 패널에서 Outputs를 하나 추가하세요. Vector형으로 만들고 이름은 Result로 지으세요.

8. Return Node 노드는 전체 노드망에 총 두 개를 연결할거에요. 하나는 For Each Loop 노드의 Completed 핀에 아래와 같이 연결하세요.

Return Node 노드는 Ctrl + C, V 또는 Ctrl + W 키로 복제가 됩니다.

9. 또 다른 Return Node 노드는 Has Any Children 검사에서 False 결과로 이어지는 실행핀에 연결하세요.

10. 전체 노드망을 아래 그림과 비교한 뒤 Compile & Save 하세요.

 

 


# 합성된 색을 받아오기

    Chameleon 액터 블루프린트에서

 

1. Chameleon 블루프린트를 열고 아래 부분 노드망을 만드세요.

 

2. BeginInputTouch 이벤트 로직에서 BodyColor 변수의 값을 정하는 부분을 다음과 같이 수정하세요.

수정하기 전

 

수정한 후

 

3. BeginInputTouch 전체 노드망을 확인하고 Compile & Save 하세요.

예전에는 카멜레온을 터치했을 때 무작위 색을 만들어서 입혀주었다면 이제는 Answers 에 올라온 물감을 조합한 색을 입혀주게 되었어요. 유후!

 

 


# 결과 확인

 

플레이를 해보면 Samples의 물감 중에서 첫번째, 두번째 물감을 올려놓고 터치를 했을 때, 배경색과 정확히 일치하는 색으로 카멜레온이 변하는 것을 확인할 수 있어요.

ㅗㅜㅑ

 

이대로 끝내기 아쉬우니까 이번에는 물감의 순서를 섞어볼까요?

 

 


# 정답과 페이크를 섞어버리기

   feat. 야바위

 

 

1. Master 위젯을 열고 SetTubes 이벤트 노드망을 찾아보세요.

SetTubes는 GM_Game으로부터 전달받은 Colors 배열을 이용해 튜브 위젯을 만들고, 그것들을 Samples에 올려놓는 일을 하는 이벤트에요.

2. 이벤트 시작 노드의 Colors 배열핀을 뽑아 들고 Shuffle노드를 찾아서 만드세요.

Shuffle은 음악 플레이어의 셔플 기능과 정확히 같은 일을 합니다. 배열에 들어있는 데이터의 순서를 무작위로 섞어버려요.

3. 아래와 같이 연결하고 Compile & Save 하세요.

4. Play를 눌러 확인해보면 물감의 순서가 무작위로 섞인 것을 알 수 있어요.


# Samples의 ItemSlot 모양 바꾸기

 

이번에는 Samples에 포함된 ItemSlot을 원모양으로 바꾸는 작업을 해볼게요. 이 부분은 기능이 아닌 디자인을 다루기 때문에 꼭 따라하지 않으셔도 괜찮습니다.

1. 아래 파일을 다운 받고 언리얼 엔진에 임포트하세요. (Materials > Textures 경로가 좋을 것 같네요)

 

Shadow.psd
1.09MB

 

 

임포트 된 모습 ​

 

2. Master 위젯을 열고 Graph 모드에서 OnInitialized 이벤트 노드를 만드세요.

3. 아래와 같이 노드망을 연결하세요.

마지막 노드를 제외하면 매번 보아온 패턴이에요.

 

이 때, 마지막 노드의 Texture는 방금 임포트한 Shadow를 선택해야 합니다.

4. Compile & Save 하고 결과를 확인하세요.

바꾸기 전과 후 비교

 

저는 Samples 부분은 동그라미인게 더 마음에 들기 때문에 이 상태로 진행하겠습니다.

 

 


# 다음 장에서는

   새로운 라운드의 시작

 

다음 장에서는 카멜레온을 터치해서 배경색과 일치하는지 확인하는 로직을 만들어 볼 예정이에요. 또 그 결과에 따라 Combo 숫자를 올리거나 반대로 라이프를 줄이는 과정까지 진행해볼게요. 다음 장이 끝나면 실제 플레이가 가능한 수준의 게임이 만들어 질 것 같네요. 그럼 다음 장에서 뵙겠습니다.