블루프린트로 간단한 이동식 플랫폼 게임 만들기

 

1. 플랫폼 게임이란?

 

플랫폼 게임이란(Platform game, Platformer) 비디오 게임 중 액션 게임의 하위 장르로 플랫폼이란 발판을 의미하며 이는 발판이 등장하는 게임을 뜻한다. 구체적으로는 플레이어가 캐릭터를 조종할 때 발판 위를 뛰어다니는 점프 컨트롤이 매우 중요한 게임 장르이다.

 

---

 

2. 대표적인 게임

• 슈퍼 마리오브라더스(1985)

슈퍼 마리오브라더스

• 소닉 더 헤지혹(1991)

소닉 더 헤지혹

 

위에 보이는 것처럼 간단하지만 컨셉과 재미요소를 적절히 배치하여 아주 재미있는 플랫폼 게임을 만들 수 있다.

 

---

 

3. 캐릭터에 무브먼트, 애니메이션 추가하기

게임을 하기 위해 가장 먼저 해야할 것은 캐릭터를 이동하게 만드는 것이다. 이를 위해서 언리얼에서 기본으로 제공하는 코드가 있지만 공부를 위해 처음부터 새로 만들었다.

 

- IA, IMC

우선 IA는 입력액션, Input Action의 줄임말이다. IMC는 입력 맵핑 컨텍스트, Input Mapping Context의 줄임말이다. 이동하기 위해서 가장 먼저 어떤 키를 입력해 이동할 것인지 정해야 한다. 컨텐츠 브라우저에서 우클릭 > 입력 > 입력 액션을 선택해 생성해준다.

 

입력 액션 생성 방법

 

   1. IA_Jump

 

가장 먼저 점프 액션을 입력 해주겠다. 점프는 누르거나 안 눌리거나 2가지로 판단할 것이기 때문에 값 타입을 Digital(bool)로 설정 해준다.

 

 2. IA_Look

 

캐릭터의 시선을 마우스로 컨트롤할 것이기 때문에 값 타입을 Axis2D(Vector2D)로 해주겠다. 마우스는 X, Y 2가지 축으로 움직이기 때문이다. 마우스 위로 들어서 캐릭터를 컨트롤 하는 경우는 아직 본 적이 없다.

 

 3. IA_Move

 

물론 설정할 수 있겠지만 현제 프로젝트 에서는 날기나, 수영 등 체공하거나 Z축으로 움직이는 것은 추가하지 않을 것이기 때문에 시선과 동일하게 값 타입을 Axis2D(Vector2D)로 해주겠다.

 

IA에서의 값 타입 설정

 

 

 4. IMC 설정

 

방금 입력 액션을 생성한 것과 동일하게 입력 맵핑 컨텍스트를 생성해 매핑을 추가하고 만들었던 IA들을 추가해준다. 그 후 이동키를 설정해줘야 하는데 IA_Moov에 동그란 + 버튼을 눌러 총 4개를 추가해 준후 각각 W, A, S, D를 추가해줬다. A, D는 Y축으로 이동할 것이기 때문에 Y축 매핑에 유용한 스위즐 입력 축 값을 추가해줬고 A는 -Y방향으로 이동하기 때문에 부정을 추가해줬다. S는 -X축으로 이동하기 때문에 부정만 넣어줬다. IA_Jump에는 Space를 설정해줬다.

 

IMC에 키를 설정한 모습

 

- 애니메이션 블루프린트

 

 1. 애니메이션 블루 프린트 생성

 

콘텐츠 드로어에서 우클릭 > 애니메이션 > 애니메이션 블루프린트를 선택 해 생성해준다. 그러면 스켈레톤 에셋을 선택하라는 창이 나오는데 자신이 애니메이션을 넣고 싶은 캐릭터에 해당하는 스켈레톤 에셋을 선택해 생성 버튼을 눌러주면 된다. 

 

2. 블렌드 스페이스

 

블렌드 스페이스를 사용하면 사용자의 설정에 따라 애니메이션을 자연스럽게 블렌드 할 수 있다. 나는 가만히 대기하는 애니메이션과 걷는 애니메이션을 "속도"에 따라 변경하고 싶다. 블렌드 스페이스 창 하단에 위치한 1. 표의 세로 축을 Speed라고 이름을 정하고 우측에 있는 2. 에셋 브라우저에서 애니메이션을 드래그 해 위치시켜 줬다. 

 

블렌드 스페이스

 

Shift를 누른채로 애니메이션을 드래그하면 스냅이 돼서 그래프에 배치되고 Ctrl을 누른채로 그래프 위에서 마우스를 이동하면 x자가 이동하면서 표에 배치된 애니메이션을 재생한다. 그 사이에 x를 두면 2개의 애니메이션이 섞인 동작이 나온다.

 

 

3. 애니메이션 블루프린트 이벤트 그래프

 

"속도"에 따라 애니메이션 재생을 달리할 것이기 때문에 캐릭터의 속도 값을 애니메이션 블루프린트에 가져와야 한다. 따라서

1. 플레이 캐릭터 가져오기
2. 속도 값 가져오기
3. 벡터로 만들기
4. 만든 벡터의 길이를 Speed에 저장한다.

 

캐릭터의 Speed 값을 저장하는 블루프린트

 

 

이제는 AnimGraph에 블렌드 스페이스를 가져와 저장한 Speed값을 연결해줘야 하는데 에셋 브라우저에서 만들었던 블렌드 스페이스를 가져와 배치한 후 Speed를 Get해 연결해준다.

 

AnimGraph에서 만든것을 연결

 

---

 

4. 장애물 이동시키기

 

이제는 맵에 배치 할 장애물을 만들겠다. 첫 번째로 회전하는 장애물, 두 번째로 이동하는 장애물이다.

 

 

 - 회전하는 장애물

 

• 액터의 위치를 옮겨주기

 

중심점을 기준으로 빙글빙글 돌아가는 장애물을 만들고 싶기 때문에 게임을 시작했을때 액터의 위치를 옮겨주겠다. 

1. 액터의 위치 값을 가져온다.
2. 액터의 X 위치 값과 Radius(반지름 값)을 더한 값, Y, Z값을 벡터로 만들어 준다.
3. 이를 월드 위치에 설정해준다.

중심을(기즈모) 기준으로 반지름(Radius)만큼 이동시켜 주는 블루프린트

 

• 이벤트 틱을 사용해 회전

이벤트 틱을 사용해 회전하는 블루프린트를 만들어 보겠다.

 

1. Delta Seconds와 Speed 변수를 곱해
2. 액터를 Z축을 기준으로 회전 시키겠다.

 

• Delta Seconds

Event Tick의 Delta Seconds를 아직 완벽하게 이해하지 못했지만 프레임 사이의 시간을 의미한다. Delta Seconds와 프레임을 곱하면 1초가 나온다. 이를 사용하는 이유는 각 PC의 사양마다 언리얼 엔진에서 프레임이 다 다르기 때문이다. 만약 두 PC에서 각각 30fps(Frame per second) 와 60fps가 나오는 경우를 생각 해보자 fps가 60인 PC는 DS(Delta Seconds를 줄여서 말하겠다.)가 1/60초이다. 반대로 fps가 30인 PC는 DS가 1/30초 이다. fps가 30인 PC의 DS는 fps가 60인 PC의 2배이다. 즉 PC마다 그리고 특정 상황마다 프레임이 바뀌기 때문에 DS가 시시각각 변하는데 이것이 중요한 점이다. 이 때 DS마다 A라는 속도로 움직이라고 명령을 내렸을 때 fps가 30인 PC는 1초 동안 1/30초(fps가 30인 PC의 DS) x A x 30, A만큼 이동하고 fps가 60인 PC는 1/60(DS) x A x 60, A만큼 이동한다. 결론은 모든 PC가 동일한 거리는 이동한다는 것인데 모든 플레이어의 PC사양과 상황이 같이 않기 때문에 DS라는 것을 사용해서 동일한 게임을 즐길 수 있게 해준다. (제가 잘못 이해하여 틀릴 수도 있습니다. 틀린 점 있다면 피드백을 정중히 부탁 드리겠습니다.)

 

 

• 회전하는 장애물과 '플레이어'가 부딪혔을 때  튕겨나감 구현

회전하는 장애물과 플레이어가 부딪힐 경우 튕겨나가는 것을 구현 했는데 이 때 중요한 것이 '플레이어'와 부딪혔을 때다. 어떤 말이냐면 회전하는 장애물이 플레이어가 아닌 다른 것들과 부딪혔을 때도 튕겨나간다면 제작 의도와 달라지기 때문이다. 즉

 

1. 회전하는 장애물에 어떤 것이 부딪혔을 때, 플레이어 인지 확인하고
2. 얼마나 날아갈 것인지 정해주고
3. '캐릭터'가 날아가게 해준다. 캐릭터가 회전하는 장애물과 부딪혔을 때 캐릭터가 아닌 뜬금 없이 박스가 날아가면 안되기 때문이다.

On Component Hit 노드를 이용해 충돌 이벤트 구현

 

 

    4. On Component Hit에서 Hit Normal은 부딪힌 물체의 표면 방향을 말한다. 노말의 반대방향으로 날아갈 것이기 때문에 다음과 같이 수식을 작성 해준다.

 

 - Radius와 Speed를 인스턴스로 편집 가능하게 해 액터별로 설정 가능하게 했다.

 

- 이동하는 장애물

 

다음으로는 장애물이 스타크래프트에서 Patrol처럼 왔다갔다 하기를 원했다.

1. 여기에서는 타임라인을 사용했는데 Float트랙을 사용해 간단한 그래프를 만들어 주었다.
2. 그 다음 액터의 시작 위치를 가져와 저장했고
3. 액터의 이동 속도를 컨트롤 하기 위해 타임라인의 재생 속도를 설정할 수 있게 했다.
4. 다양화를 더욱 추가하기 위해 딜레이를 추가했고
5. 타임라인 트랙에는 Y축이 1이기 때문에 큰 수를 곱해주었고 이를 이동 거리로 대체했다.
6. 처음 블루프린트를 만들 때 화살표 컴포넌트를 추가했는데 이를 X축과 동일한 방향으로 위치시켜 전방 벡터를 값으로 사용했다. 따라서 화살표 컴포넌트의 전방 벡터 값과 이동 거리를 곱해주었다.
7. 곱해준 값을 처음 저장한 액터의 시작위치와 더한 후 새로운 이동 위치를 설정해 주었다.

 

 - Moov Distance, Moov Speed, Delay를 인스턴스 편집 가능하게 해 액터별로 설정 가능하게 했다.

 

---

 

5. 레벨 디자인

언리얼에서 기본으로 제공하는 OnlineLearningKit를 사용해 레벨을 디자인했다. 사이버펑크한 느낌이 들어 꽤 재미있게 작업했다.

 

https://youtu.be/G1DvEJiwbr0

 

간단한 플레이 영상이다.

 

---

 

6. 마무리하며

 

아직 코드를 짤 때 많이 어렵고 이런저런 오류들을 많이 만나며 이해하지 못하고 일단 따라해 보기도 한다. 하지만 포기하지 않고 끝까지 진행해 이렇게나마 간단하게 완성을 하면 제법 짜릿하다. 앞으로 계속 발전해나 좋은 프로그래머가 될 것이다. 포기하지 말고 끝까지 나아가자. 아자아자 파이팅!!!