기록

마우스 커서 활성화

플레이어는 마우스 커서의 위치를 바라보도록 회전시킬 것이기 때문에 먼저 플레이 시 마우스 커서가 보이는 상태로 유지되도록 수정한다.

'BP_PlayerController' BeginPlay 노드에서 새로운 노드를 추가해 준다.

'Show Mouse Cursor'를 추가하고 체크박스에 체크를 해준다. 

플레이어 회전

플레이어의 회전을 구현하기 전에 현재 카메라는 캐릭터의 하위에 들어있다. 

이 상태로 플레이어를 회전시키면 카메라도 함께 회전하기 때문에 회전값이 카메라에는 적용되지 않도록 처리한다.

'Spring Arm'의 Camera Settings> Inherit Pitch, Inherit Yaw, Inherit Roll을 체크해제하면 카메라는 캐릭터의 회전에 영향을 받지 않게 된다.

그리고 마우스 커서의 위치를 가지고 플레이어를 회전시키도록 한다.

Event Tick 은 프레임마다 실행하는 유니티의 업데이트와 동일한 기능을 한다.

카메라의 회전은 매 프레임마다 마우스의 위치를 확인하고 그 위치를 변환해서 회전시켜야 하기 때문에 'Event Tick'에서 노드를 뻗어나간다.

마우스의 위치를 가져올 수 있는 걸 찾다 적당해 보이는 'Convert Mouse Location To World Space'를 사용하기로 한다.

이 함수를 사용하기 위해서는 'PlayerController'가 필요하기 때문에 'GetPlayerController'를 통해서 플레이어 컨트롤러를 가져온 다음 해당 함수를 불러온다.

'GetPlayerController'는 화면상에 위치한 마우스 커서의 위치를 게임 상의 월드 좌표로 변경한 값을 리턴한다. 

이 리턴값을 플레이어가 바라보도록 회전을 시키게 되면 원하는 기능의 구현이 완성된다.

'Find Look at Rotation'는 'Start' 위치에서 'Target'을 바라보도록 회전하는 값을 반환한다.

'Start'에는 'GetActorLocation'으로 캐릭터의 위치를 가져와 연결하고 'Target'에는 'ConvertMouseLocationToWorldSpace'의 'World Location'과 연결시킨다. 이렇게 구해온 회전값을 이제 캐릭터의 회전에 적용시키면 되는데 여기서 Z축의 회전값만 필요하기 때문에 'Break Rotator'와 'Make Rotator'를 사용해서 필요한 값만 리턴되도록 만들어 'Set Actor Rotation'의 'New Rotation'에 연결시킨다.

플레이를 해서 테스트를 해본다.

회전만 했을 때 원하는 대로 동작하지만 움직이면서 회전시킬 경우 캐릭터의 회전이 이상하게 동작한다.

아마도 움직이기 시작하면서 'Find Look at Rotation'에서 'Start'나 'Target'의 값에 문제가 생긴 거 같아 정확히 확인해 보기 위해서 디버깅을 해본다.

'Draw Debug Line'을 사용해서 시작점과 끝점을 각각 플레이어 위치, 마우스 커서의 위치로 값을 연결한다.

움직이기 전에는 라인이 제대로 캐릭터와 커서 사이에 그려지는 게 보이지만 움직이기 시작하면 커서의 위치가 이상하게 

리턴되고 있다.

혹시 현재 인풋 이벤트가 발생할 때 값을 'PlayerControlloer'에서 리턴하고 있는데 회전에 대한값을 'PlayerCharacter'에서 따로 추가해서 발생하는 문제일까? 

일단 한 곳에서 값을 리턴 받아 사용하도록  'BP_Player'에서는 회전의 기능만 추가하고 인풋처리는 'BP_PlayerController'에서만 하도록 수정해 본다.

플레이어 회전 함수

함수는 블루 프린트 창의 GRAPHS 탭에서 추가하고 커스텀하여 사용할 수 있다.

'BP_Player'에 Look Target이라는 타깃을 기능만 담당하는 함수를 추가한다.

필요한 값은 'Find Look at Rotation'에 필요한 'Start'와 'Target'의 벡터 값이다.

여기서 'BP_PlayerController'에서 호출하고 'Event Tick'으로 연결시킬 것이기 때문에 마우스 커서의 위치만 받도록 한다.

'Target Location'은 마우스 커서의 위치이고 나머지는 'BP_Player'의 값에서 가져다 사용한다.

플레이어 컨트롤러 함수 호출

이제 위에서 만든 함수를 'BP_PlayerController'에서 호출하도록 한다.

우선 해당 함수에 접근하기 위해서는 'BP_Player'를 가지고 와야 하는데 이걸 직접 가지고 올 수 있는 방법은 없는 건지 못 찾는 건지 일단 'GetPlayerController'를 가지고 온 다음 'BP_Player'로 캐스트 하여 접근한다.

('BP_Player'가 'PlayerCharacter'를 상속했기 때문에)

이렇게 접근한 'Look Target' 함수에 'Convert Mouse Location To World Space'의 'World Location' 값을 연결하고 이 함수를 'Event Tick'으로 호출한다.

수정 후 테스트

테스트 결과 움직일 때도 마우스 커서를 향하도록 제대로 회전하게 되었다.

하지만 여전히 디버그 라인에서 보이는 마우스 커서의 위치가 움직일 때 이상한 값이 리턴되는 걸로 보인다. 이 부분은 체크해 두고 나중에 다시 확인해야겠다.

추가 테스트

혹시 'BP_Player'에서 플레이어 컨트롤러를 가지고 올 때 'BP_PlayerController'로 캐스트 하지 않아서 생긴 문제인가 싶어서 테스트해 보았는데 문제가 있던 상황가 동일하게 플레이되어서 이 문제는 아닌 걸로 보인다.

정리

'PlayerController'에서는 전반적인 이벤트의 처리를 하도록 노드를 구성하고 'PlayerCharacter'에서는 기능만 가지고 있도록 하는 것이 문제를 줄일 수 있고 구조적으로도 정돈된 느낌을 주는 것 같다. 더 나은 구조에 대해서 판단하기 위해서는 나중에 예제를 따라 만들면서 정석적인 방법을 학습할 필요가 있을 것 같다.

이번에 발생한 문제의 원인은 아마도 이벤트 충돌이나 우선순위 문제라고 추측만 해본다. 추후에 정확한 원인 파악을 위해서 문제를 기록해 둔다.

에디터 언어 변경

에디터 언어를 영어로 변경하기로 한다.

이유는 영어로 된 자료의 양이 더 많고 번역된 한글이 직역으로 되어있는 단어들이 많다 보니 영어 그 자체로 의미를 파악하는 게 더 나을 것 같다는 판단에 있다.

플레이어

플레이어를 구현하기 위해서 Character 블루프린트를 상속해서 내가 사용할 캐릭터를 만든다.

콘텐츠 브라우저의 'BluePrints' 폴더에서 블루프린트를 추가한다. 'Character'를 상속하고 이름은 BP_Player로 한다.

생성한 'BP_Player'를 열고 세팅을 시작한다.

'Character'를 상속한 'BP_Player'는 'Capsule Component', 'Arrow', 'Mesh'로 구성되어있다.

우선 눈에 보이는 상태로 만들기 위해서 'Mesh' 컴포넌트에 기본 제공되는 리소스를 추가한다.

그리고 추가한 메시의 정면을 일치시켜 주기 위해서 회전시키고 높이를 캡슐 컴포넌트와 맞게 세팅한다.

참고로 유니티에서는 +z  forward, +x right, +y up 이였지만 언리얼의 경우 +x forward, +y right, +z up이다.

꼭 확인하고 가야 할 부분이다.

탑 다운 시점을 위해서 카메라도 추가해야 한다.

그전에 먼저 'SpringArm'을 살펴본다. 이 컴포넌트는 여러 가지 기본적인 카메라 제어 기능을 포함하고 있는데

유니티에서 카메라를 제어할 때는 Camera Rig라는 오브젝트를 추가하고 카메라를 회전하거나 트랙킹 시킬 때 이 오브젝트와 상호작용할 수 있도록 스크립트로 기능을 구현했는데 언리얼에서는 이러한 기능 자체를 가지고 있는 것이 'SpringArm'으로 보인다.

이 컴포넌트를 추가하고 살펴본다.

'SpringArm' 컴포넌트를 추가하면 이미지에서 처럼 레이를 -x 방향으로 쏘고 있다. 

이번에 카메라를 추가해서 'SpringArm'의 하위로 위치시킨다.

카메라는 'SpringArm'의 하위로 들어가는 순간 위치가 자동으로 쏘고 있던 레이의 끝부분에 위치하는데 이 거리를 조절하기 위해서는 카메라의 로케이션을 조절하는 게 아닌 'SpringArm'의 디테일에서 Camer > Target arm Length로 조절해야 한다.

이 값을 조절하면 카메라의 위치가 알아서 조절이 되는 걸 확인할 수 있다.

이렇게 구조를 해놓으면 카메라는 항상 스프링암을 바라보게 되고 카메라에 대한 대부분의 제어는 스프링암을 통해서 이루어지게 된다.

탑뷰로 하기 위해서 스프링암의 정면을 바닥을 향하게 한다.

이제 이 플레이어가 PlayLevel 이 시작될 때 생성되도록 한다.

플레이어 로드

플레이 시 자동으로 생성되던 Character나 PlayerController 등의 엑터들은 'GameMode'에 의해서 결정되던 것이다.

게임모드 역시 블루프린트로 상속해서 사용할 수 있으며 이 게임모드를  Project > Maps & Modes에 적용시켜 프로젝트 전체에 사용할 게임모드로 설정하거나 World Settings 창에서 GameMode Override를 통해서 사용할 수 있다.

월드 설정을 통해서 게임모드를 변경해 본다.

'BP_MyGameMode'를 생성하고 'World Settings'의 GameMode Override에 추가한다.

그리고 이 상태에서 플레이를 해서 내가 의도한 대로 동작하는지 확인해 본다.

플레이 시 원하는 대로 'BP_Player'가 PlayerStart 위치에 생성된다. 

이 플레이어를 조작하기 위해서는 이번엔 'PlayerController'를 만들고 마찬가지로 게임모드에 추가해 주면 될듯하다.

Enhanced Input

'BP_PlayerController'를 생성한다.

플레이어 컨트롤러를 열어서 'Event Graph'를 열고 노드를 생성하여 조작을 구현하면 된다.

그전에 플레이어를 조작하기 위해서는 입력을 받는 부분에 대한 정의가 필요하다.

이 부분은 키를 맵핑해 주는 작업을 통해서 처리되는데 Project Settings > Engine > Input > Bindings에서 맵핑을 한다.

그런데 기존에 일반적으로 사용하던 Axis, Action 맵핑 방식이 이제는 deprecated 되고 Enhanced Input Actions, Input Mapping Contests로 대체된다고 한다. 

새로운 방식인 Enhanced를 사용해 본다.

해당 기능을 사용하기 위해서는 우선 플러그인이 활성화되어있는지 확인한다. 

Edit > Plugins > Enhanced Input 

현재 사용 중인 버전인 5.4에서는 기본적으로 해당 플러그인이 활성화되어 있다.

콘텐츠 브라우저에서 인풋과 관련된 파일들을 관리할 'Inputs' 폴더를 새로 생성한다.

그리고 해당 폴더에서 Input Action을 생성한다.

간단하게 플레이어는 앞, 뒤, 좌, 우로만 조작할 것이기 때문에 두 개의 액션만 만든다.

'IA_MoveForwad',  'IA_MoveRight'

생성한 두 개의 인풋 액션 모두 'Value Type'을 'Axis 1D'로 설정한다.

아마도 키를 입력받으면 해당 값이 0~1 사이의 소수점으로 리턴하고 이걸 사용해서 움직이면 되는 듯하다.

그리고 다시 Input 폴더로 돌아와서 이번엔 'Input Mapping Context'를 추가한다. 

'IMC_Player'

생성한 인풋 맵핑 콘텍스트를 열고 맵핑을 시작한다.

사용할 인풋 액션을 선택하고 키를 설정해 주는데 키 입력은 드롭다운을 열어서 선택하거나 옆에 아이콘을 한번 클릭하면  주황색으로 바뀌면서 키를 입력을 받을 수 있는 상태가 되는데 이 상태에서 원하는 키를 입력하면 한 번에 설정된다.

플레이어의 움직임은 기본적인 WASD로 설정한다.

W, D의 경우 입력받은 값을 그대로 사용하면 되지만 A, S의 경우 입력받은 값을 반전시켜 사용할 수 있도록 해야 하는데 이때 Modifiers 배열에 Negate 요소를 추가하면 된다. 이외에도 다양한 요소들이 있는데 이건 나중에 정리해보기로 한다.

나머지 키 맵핑도 해준 후 이제 'PlayerController'와 'Character'의 이벤트를 추가하면서 조작을 완성해 본다.

플레이어 컨트롤러 이벤트 그래프

플레이어 컨트롤러는 시작할 때 컨트롤러를 가지고 온 다음 키 입력을 리턴하여 맵핑된 키들이 입력될 때 값이 리턴되는 구조로 만들어 놓는다.

캐릭터 이벤트 그래프

캐릭터에서는 인풋에 의해서 변경되는 값들을 가지고 와서 플레이어의 로케이션을 변경시키도록 하면 될듯하다.

이벤트는 아마도 다음과 같이 진행되는 것으로 예상된다.

"플레이 시 컨트롤러에서는 전체적인 키의 인풋을 감지하게 된다. 이 중, 따로 맵핑해 놓은 키들(Input Mapping Context)이 입력될 때 특정한 값이 리턴(Input Action) 되도록 한다. 그리고 캐릭터는 위에서 키 입력 시 리턴되는 값을 가져와서 움직이는 데 사용한다."

아직 정확한 흐름은 파악이 잘 안 되지만 일단 이렇게 이벤트 그래프를 만들고 플레이해본다.

카메라는 너무 가까운 거 같아서 Target arm Length를 조절해 주었다.

테스트해보니 입력한 키에 맞춰 원하는 대로 움직이는 게 확인된다. 이벤트 그래프가 복잡하다고 생각했는데 의외로 직관적으로 원하는 기능들을 이어가다 보니 동작이 완성되긴 하는듯하다. 익숙해지기만 한다면 정말 수월하게 작업이 가능할듯하다. 그리고 여기까지 코드 한 줄 없이 작업을 했다는 것도 신기한 부분이다.

UMG UI

Unreal Motion Graphic UI

언리얼에서 UI를 구현하는 데 사용할 수 있도록 제공되는 기능이다.

먼저 게임의 메인화면에서 게임시작 버튼을 눌러서 플레이 레벨로 전환되는 걸 만들어 본다.

레벨 추가

메인레벨과 플레이레벨 두 가지를 만든다.

MainLevel에서 게임시작 버튼을 누르면 PlayLevel로 넘어가는 구조이다.

콘텐츠 브라우저에 Level 파일을 저장할 Levels라는 폴더를 만든다. 대부분 이러한 폴더의 네이밍이나 파일의 네이밍은 일반적으로 많이 사용하는 규칙이 있지만 지금은 그것조차 모르는 상태이기 때문에 내 마음대로 만들 것이다.

Levels 폴더 내에서 우클릭하여 MainLevel과 PlayLevel을 추가한다.

언리얼에서 Map, Level, World라는 단어들이 자주 사용되는데 이 용어들이 혼용돼서 사용되기도 하다 보니 헷갈리는 개념들이다. 

검색해 보니 이 부분에 대해서 혼동하는 사람들이 꽤 있어 보인다.

글들을 읽어보면 level=map으로 보인다. level을 저장하면 파일의 확장자가 .umap인데 그렇기 때문에 level을 map이라고 부르기도 하는 것 같다.

level은 게임의 플레이 공간을 정의하는 기본 단위이고 지형, 라이트, 액터, 블루프린트, 사운드 등의 게임요소들을 포함하고 있다. 유니티의 scene이 level과 유사해 보인다.

world는 단일 또는 복수의 level로 구성되고 그 안에 포함된 모든 컴포넌트 등을 관리하는 개념으로 보이는데 여러 레벨을 로드 또는 언로드 하거나 전반적인 게임 환경을 관리하는 데 사용되는 걸로 보인다.

글들을 읽던 중 눈에 띄는 답변이 있었다.

'언리얼의 모든 모호한 용어들을 정리하면  일을 못할 것이다.'라고 하는데 이외에도 애매한 용어들이 많을 것으로 예상된다. 하나하나 이해하려고 하지 말고 그냥 사용해 보면서 그대로 받아들이는 방법이 최선인 거 같다.

UI 배치

블루프린트를 추가해서 UI를 만들어 본다.

마찬가지로 BluePrints 폴더를 만들고 이 안에서 파일을 생성한다.

콘텐츠 브라우저 창에서 우클릭하여 User Interface > Widget Blue Print를 생성한다.

파일이름은 BP_MainMenuWidget

1. 팔레트 : 여기에서 필요한 컴포넌트를 골라서 빈 공간이나 계층 구조에 끌어다 놓으면 UI가 생성된다.

2. 계층구조 : 생성된 UI의 계층구조를 보고 수정할 수 있다.

3. 디테일 : 생성한 UI에 대한 세부사항을 설정한다.

4. 디자인/그래프 : 디자인은 UI의 배치, 스타일 등 외부적인 것들을 세팅하고 그래프에서 동작들을 구현한다.

원하는 UI 배치는 화면 전체를 기준으로 가운데 버튼 몇 개를 세로로 정렬하려고 한다.

UI의 전체 틀을 담당할 Canvas Panel을 먼저 생성하고 세로로 정렬시키기 위해 세로 박스(vertical box)를 추가한다.

이 세로 박스 안에 사용할 버튼들을 자식으로 넣어준다.

세로 박스의 디테일을 설정한다.

앵커는 가운데로 맞춰준다.

이때 Shift와 Ctrl을 누른 상태에서 앵커 포지션을 선택하면 위치와 정렬이 함께 업데이트된다.

하위 버튼들은 동일하게 크기와 정렬을 맞춰준다.

각 버튼의 하위에는 텍스트를 추가해서 무슨 버튼인지 알 수 있도록 한다.

계층구조에서 텍스트를 선택하고 디테일에서 '콘텐츠> 텍스트'에 값을 변경해 원하는 텍스트를 입력할 수 있다.

색상은 버튼의 배경색과 구분되도록 '컬러 및 오파시티'에서 색만 바꾼다.

이렇게 만들고 실행을 해보면 아무것도 뜨지가 않는다. 

UI  생성

이제 만들어 놓은 UI를 Level에서 생성할 수 있도록 한다.

레벨 창을 열어서 블루프린트 리스트를 열고 '레벨 블루프린트 열기'를 선택한다.

열린 '이벤트 그래프' 창에서 빈 공간에 우클릭을 하여 기능을 추가하여 플로우를 만들 수 있다.

UI는 게임이 시작될 때 바로 보이게 할 것이기 때문에 'Event  BeginPlay'를 추가하고 실행을 끌어다 놓고 위에서 만들어 놓은 'BP_MainMenuWidget'을 불러온다.

그리고 'BP_MainMenuWidget'의 'Return Value'를 끌어서 'Add to Viewport'를 만든다.

그러고 나서 다시 플레이를 해보면 프리뷰 창에서 내가 만든 UI가 뜨는 걸 확인할 수 있다.

레벨 전환

세 개의 버튼 중 '새로 하기' 버튼을 클릭했을 때 레벨이 전환되도록 해본다.

다시 'BP_MainMenuWidget'을 열고 '계층구조'에서 원하는 버튼을 선택하고 디테일의 가장 하단으로 내려서 이벤트 탭을 연다. 

이벤트를 보려면 변수 여부 세팅을 활성화해야 한다고 한다.

디테일의 상단을 보면 이름을 수정하는 곳 옆에 변수 여부를 설정하는 체크 박스가 있다.

이제는 이벤트 탭에서 사용할 수 있는 이벤트 리스트가 보인다.

원하는 기능은 클릭 시 밖에 없다.

'클릭 시' / '눌림 시'가 있는데 '클릭 시'가 버튼이 눌렸을 때 이벤트가 호출되고 '눌림 시'는 버튼이 눌린 동안 호출된다. 

'클릭 시'의 우측에 있는 + 를 누르면 그래프 창으로 전환되고 해당 버튼의 On Clicked 가 이벤트 그래프에 추가된다.

버튼의 기능은 레벨 전환이기 때문에 해당 이벤트의 실행을 끌어다 'Open Level (by name)'을 만든다.

그리고 'Level Name'에 만들어 놓은 'PlayLevel'을 써준다.

PlayLevel 수정

씬 전환이 된걸 제대로 확인하기 위해서 한눈에 확인 가능하도록 'PlayLevel'에 몇 가지 추가한다.

PlayerStart를 추가해서 플레이 시 화면이 보이도록 한다.

정확하게 이 클래스를 어떻게 사용하는지 모르겠지만 일단 화면만 확인하는 용도로 추가했다.

'MainLevel'과 구분될 정도로만 'PlayLevel'을 세팅한다.

다시 'MainLevel'로 돌아와서 플레이해 본다.

'MainLevel' UI 생성 > 버튼 클릭, 레벨 오픈> 'PlayLevel' 오픈

언리얼은 유니티처럼 씬의 편집을 담당하는 뷰와 인풋을 받아 게임 플레이가 가능한 게임 뷰의 구분이 없는 것 같다.

플레이를 하면 레벨에 자동으로 생성되는 엑터들이 있는데 이 중에 Player Controller가 있어서 별도로 추가한 게 없음에도 PlayLevel에서 움직이는 게 가능하다.

추가로 정리가 필요한 부분

- 구현된 플레이어가 있으면 플레이 시 Player Controller가 자동으로 생성되지 않는지 여부

- level 뿐만 아니라 world도 로드할 수 있던데 level을 로드하는 것과 world를 로드하는 방식의 차이