플랫포머 게임 만들기(코인 / UI)

코인을 만들어 보자.

 

블루프린트 클래스 > 액터 생성.

코인이랑 충돌 > 그에 따른 액션을 취해야 할 것이다.

 

컴포넌트 > SphereCollision 추가.

메시 컴포넌트 추가, 메시랑 머티리얼 입히고, 충돌 규격도 맞춰주고

디테일 > 콜리전에 '캐릭터가 올라갈 수 있는지 여부' No로 해주고.

'컴포넌트 오버랩 시작 시' 이벤트 추가.

 

 

'코인을 먹었다' 이런 기능을 넣어야 한다. 

근데 이건 코인이 아니라 다른 데 넣어야 한다.

 

그걸 위해 BP_MainGameMode 열었다.

상단의 '풀 에디터로 열기' < 이런 거 눌렀다.

이러면 평소와 같은 창이 열린다. 

그리고 노드 편집.

 

'Add Custom Event'를 통해 커스텀 이벤트 노드 추가.

코인을 먹은 횟수도 세야겠지?

인티저형 변수 'Score' 추가.

인터저와 인티저64의 차이는 뭘까? 인티저는 4바이트, 인티저64는 8바이트다. 인티저64가 더 큰 숫자를 저장할 수 있다.

변수 생성 후는 묻지도 따지지도 말고 일단 컴파일.

그 후 노드는 다음과 같이 만들었다.

 

 

코인을 먹으면, 기존의 Score에서 1을 더하고, 그 문구를 Text로 출력하게 했다.

 

다음으로 할 건, '코인을 먹으면 GotCoin을 실행'을 해야 한다. 

그걸 BP_Coin에서 한다.

 

다음과 같이 했다.

 

 

그리고 실행을 하면 다음과 같다.

 

 

코인에 충돌을 하면 점수는 올라간다.

아직 코인이 사라지는 걸 하지는 않았다.

 

먼저 코인을 뚫고 갈 수 있게 해주었다. 보통은 게임은 그렇게 만드니까.

BP_Coin에서 SphereCollision, Coin 둘 다 해줘야 한다.

디테일 > 콜리전에서 할 수 있다.

 

 

코인을 먹으면 위로 잠시 떠올랐다가 획득하는 걸로 해보자.

 

BP_Coin에 'Add Timeline' 노드를 추가해주었다.

 

 

이 노드를 더블 클릭 하면 새로운 공간으로 들어가진다.

 

우리는 Z축 하나만 쓸꺼기 때문에 '+트랙' 누르고 'Float 트랙 추가'를 누른다.

 

 

마우스 우클릭을 하면 키를 추가 할 수 있다.

 

 

키는 무엇인가? 가로 축(시간)에 따른 세로 축(Float 값)을 정할 수 있다.

그니까 시간에 따라서 코인이 값에 따라 위로 갔다 내려오게 한다는 뜻이다.

 

 

저 키에 우클릭 해서 선의 모양을 결정할 수 있다. 직선일 때보다 곡선이면 코인이 스무스하게 위로 갔다 내려올 수 있을 것이다.

 

 

이러고 다시 이벤트그래프에 돌아오면, 'add timeline' 노드에 ZPos 값이 생겼다.

나머지 노드들은 이렇게 만들어주었다.

파괴까지 만들었다.

 

 

그리고 실행해보자.

 

 

코인이 잘 사라진다.

이번엔 코인이 스스로 자전하도록 해보자.

BP_Coin을 수정해주었다.

 

 

'Event Tick'노드의 Delta Seconds는 '1 / 프레임'을 말한다. 예를 들어 프레임이 60이면 1 / 60 이다.

Rotate Speed 변수를 Delta Seconds랑 곱하지 않으면 엄청 빨리 돌게 된다.

잘 도는지 확인해보자.

 

 

잘 돈다!

 

이렇게 하면 문제는 코인이 사라지기 전에 또 부딪히면 점수가 떠 오른다는 점이다.

한 번 충돌되면 충돌 기능을 못 하게 만들자.

한 번 충돌되면 SphereCollision을 없애면 된다.

 

 

이제 UI 기능을 해보자. UMG 기능이라고도 부른다.

 

폴더 빈 공간 마우스 우클릭 > 유저 인터페이스 > 위젯 블루프린트 > 사용자 위젯 선택.

들어가면 지금까지와는 조금 다른 화면이 나온다.

 

 

UI는 인게임적인 요소들이 다 그려진 다음에, 마지막에 창 크기에 맞춰서(PC, Mobile) 그려지는 시스템이다.

그래서 스크린 좌표계가 나오는 것이다. 우측 상단에서는 어떤 화면으로 출시할 건지 미리 볼 수 있다.

 

 

 

최종 결과로 이렇게 만들었는데 어떻게 만들었는지 하나 하나 보자.

 

 

우선 왼쪽의 팔레트의 검색 기능을 통해 패널을 가져올 수 있다.

원하는 패널을 찾은 후 드래그를 해주면 된다.

 

 

이건 '가로 박스' 디테일.

 

이미지 같은 것도 패널 가져와서 디테일로 이미지 삽입, 크기 조정 등등 하면 된다.

 

 

꽤 귀찮았던 것은 텍스트였는데, 텍스트를 먼저 입력 했다.

 

 

그 후 텍스트 오른쪽에 '바인드'를 눌러서 함수를 바인딩 해줬다.

왜냐하면 우리가 코인을 먹을 때마다 코인 수가 올라가게 만들고 싶기 때문에, 이를 반영하려고 함수를 만든 것이다.

 

 

'바인딩 생성'을 누르면 노드를 사용할 수 있는 곳으로 오고, 오른쪽 위의 디자이너 / 그래프를 통해서 전 화면으로 왔다갔다 할 수 있다.

 

 

저 노드를 만드는 과정에서 BP_MainGameMode를 수정했다. 

블루프린트 위젯에서 스스로를 사용할 수 있게 허락하는 과정 같았다.

 

 

'Create UMG Main UI Widget' 노드는 'Create Widget' 검색어를 통해 찾을 수 있다.

노드 안의 클래스를 지정해주자 이름이 저렇게 바뀐 것이야.

 

그리고 실행하면,,

 

 

숫자가 잘 올라간다!