커스텀 스킬 판정 상호작용 생성하기

이 워크스루에서는 스킬 판정 상호작용 장치를 위한 커스텀 UI를 생성하는 데 사용할 수 있는 언리얼 모션 그래픽(Unreal Motion Graphics, UMG) 디자인과 뷰모델 바인딩의 예시를 살펴봅니다.

커스텀 스킬 판정 상호작용을 생성할 때 상호작용을 시작하는 이벤트를 설정해야 합니다. 성공적으로 스킬 판정 상호작용을 완료한 플레이어에게 아이템을 제공하는 이벤트 트리거를 설정할 수도 있습니다.

플레이어나 오브젝트가 특정 구역을 조준한 경우 시네마틱 컷씬을 설정하는 방식으로, 이 예시에서 추가로 진행해 볼 수 있습니다.

이 튜토리얼에서는 플레이어가 트리거 입력을 계속 누르고 있으면 정확한 구역을 조준할 수 있는 간단한 스킬 판정 상호작용의 생성 방법을 알아봅니다.

UI 커스터마이징을 시작하기 전에 먼저 디자인에 사용할 에셋을 생성하고 임포트해야 합니다. 디자인에서 머티리얼을 사용하는 방법에 대한 자세한 내용은 머티리얼로 커스텀 UI 만들기를 참고하세요.

장치 구성하기

다음 단계를 따라 플레이어가 특정 구역을 정확하게 조준하여 명중 시 보상을 받을 수 있는 골프 게임 예시를 만들어 보겠습니다. UI를 디자인할 때에는 계층구조(Hierarchy) 패널에 배치하는 패널의 이름을 자유롭게 변경해도 괜찮습니다.

1. 콘텐츠 브라우저(Content Browser) 에서 스킬 판정 상호작용 장치를 프로젝트로 가져와 배치합니다.

2. 장치의 디테일(Details) 패널에서 다음 세팅을 수정합니다.

   

   옵션	값	설명
   UI 타입(UI Type)	바	표시할 사용자 인터페이스의 유형을 결정합니다.
   커스텀 위젯(Custom Widget)	커스텀 사용자 위젯 추가	상호작용에 사용할 커스텀 위젯을 설정합니다.
   상호작용 타입(Interaction Type)	눌렀다 떼기	트리거 버튼을 누르고 있는 동안 애니메이션이 적용되고 떼면 활성화됩니다.
   미터 컬러(Meter Color)	컬러 선택	이 예시에서는 빨간색을 사용합니다.
   좋음 구역 크기(Good Zone Size)	80.0	좋음 구역의 크기를 전체 미터 대비 퍼센티지로 설정합니다.
   좋음 구역 위치(Good Zone Position)	0.0	좋음 구역의 위치를 설정합니다.
   완벽 구역 크기(Perfect Zone Size)	15.0	완벽 구역의 크기를 좋음 구역 대비 퍼센티지로 설정합니다.
   완벽 구역 위치(Perfect Zone Position)	100.0	완벽 구역의 위치를 설정합니다.
   좋음 구역 컬러(Good Zone Color)	컬러 선택	이 예시에서는 어두운 초록색을 사용합니다.
   완벽 구역 컬러(Perfect Zone Color)	컬러 선택	이 예시에서는 연두색을 사용합니다.

백그라운드 이미지 추가

다음 단계를 따라 이 예시에 사용할 세로 미터 바의 백그라운드 이미지를 생성합니다. 이 워크스루에서는 모서리가 둥근 검은색 바 형태의 백그라운드 위에 구역을 배치할 예정입니다.

위 이미지를 참고하여 튜토리얼 단계를 진행해 주세요.

1. 상호작용을 위한 사용자 위젯 을 만듭니다.

2. 장치에 어태치된 사용자 위젯 을 찾아 더블클릭하여 사용자 위젯 에디터(User Widget Editor) 를 엽니다.

3. 계층구조 패널에서 전체적인 캔버스 역할을 할 오버레이 를 드래그해 중첩합니다. 이 예시에서는 'Overlay'로 명명했습니다. 그런 다음 백그라운드를 담을 오버레이 를 하나 더 드래그합니다. 이 예시에서는 이름을 SID로 지정했습니다.

4. 이미지 하나를 자손 오버레이 로 드래그해 중첩합니다. 이 예시에서는 이미지를 'Bar'로 명명했습니다.

5. 이미지머티리얼이나 텍스처 의 디테일 패널에서 백그라운드의 를 설정합니다.

구역 구성하기

여기서 조준 시 자동으로 실패가 주어지는 나쁨 구역을 만들 수도 있지만, 이 예시에서는 완벽 구역만 사용합니다. 완벽 구역은 다음과 같은 세 개 컨테이너로 구성되어 있습니다.

• 처음 빈 영역, PerfectZoneStart

• 좋음 또는 완벽 구역, SizeBox

• 이후 빈 영역, PerfectZoneEnd

아래 단계를 따라 이 예시의 완벽 구역을 만들어 보겠습니다.

1. 팔레트(Palette) 패널에서 스택 박스 를 자손 오버레이 로 드래그해 중첩합니다. 이 예시에서는 박스를 SID로 명명했습니다.

2. 그런 다음 아래 자손을 스택 박스: 스케일 박스 > 크기 박스 로 드래그해 중첩합니다.

   1. 스케일 박스 의 디테일 패널에서 스트레치(Stretch) 옵션을 사용자 지정(User Specified) 으로 설정합니다. 이후 완벽 구역 위 공간의 크기를 결정할 사용자 지정 스케일(User Specified Scale) 을 설정합니다. 이 예시에서는 스케일을 0.27 로 설정했습니다.
   2. 크기 박스 에서 높이 오버라이드(Height Override) 세팅을 상단 미터의 높이로 설정합니다.

3. 마찬가지로 같은 스택 박스 에서 크기 박스 > 스케일 박스 > 오버레이 > 이미지 를 드래그합니다.

   1. 크기 박스 의 디테일 패널에서 높이 오버라이드 를 완벽 구역의 크기로 설정합니다.

   2. 스케일 박스 의 디테일 패널에서 스트레치 세팅을 사용자 지정 으로 설정합니다. 그런 다음 사용자 지정 스케일 세팅을 1 로 설정합니다.

   3. PerfectZone 오버레이 에는 완벽 구역의 머티리얼이나 텍스처가 들어갑니다.

4. 마찬가지로 같은 스택 박스 에서 오버레이 > 크기 박스 를 드래그합니다.

   1. 오버레이 PerfectZoneEnd의 디테일 패널에서 스트레치 세팅을 사용자 지정 으로 설정합니다. 이후 완벽 구역 위 공간의 크기를 결정할 사용자 지정 스케일 을 설정합니다. 이 예시에서는 스케일을 0.49 로 설정했습니다.
   
   1. 크기 박스 의 디테일 패널에서 높이 오버라이드 세팅을 하단 미터의 높이로 설정합니다.
   

5. 디테일을 위해 스택 박스 에 이미지 를 추가해 백그라운드 구역에 결과를 보여주는 눈금을 만들어도 좋습니다. 이 예시에서는 이미지를 Notches로 명명했습니다.

스크러버 구성하기

이 예시에서는 스크러버가 움직이는 컨테이너 안에 있어야 하는데, 그러려면 항목 두 개가 포함된 스택 박스 를 생성해야 합니다.

첫 번째 항목은 사용자 스케일 로 설정된 크기 박스 를 가집니다. 이 크기 박스는 나중에 뷰모델 에서 스킬 판정 상호작용 미터 스케일 에 바인딩하게 됩니다. 두 번째 항목은 스크러버가 들어 있는 컨테이너를 가집니다.

1. SID 오버레이 에 스택 박스 를 드래그해 중첩합니다. 이 예시에서는 스택 박스를 ScrubberStackBox로 명명했습니다. 이렇게 하면 오버레이 > 크기 박스, 그리고 크기 박스 > 스케일 박스 > Scrubber로 명명된 이미지 로 이루어진 두 개의 자손 구성을 포함하게 됩니다.

   1. ScrubberMovingZone 오버레이 의 디테일 패널에서 스트레치 세팅을 사용자 지정 으로 설정합니다. 그런 다음 사용자 지정 스케일 세팅을 0 으로 설정합니다.
   
   1. 크기 박스 의 디테일 패널에서 높이 오버라이드 세팅을 상단 미터 높이로 설정합니다.
   
   1. ScrubberContainer 크기 박스 의 높이 오버라이드 세팅을 0 으로 설정합니다.
   
   1. 스케일 박스 오버레이 의 스트레치 세팅을 사용자 지정 으로 변경합니다. 사용자 지정 스케일 세팅을 1 로 설정합니다.
   
   1. 스크러버 이미지 의 이미지 세팅에서 스크러버의 머티리얼이나 텍스처를 설정합니다.
   

뷰모델 구성하기

다음 단계를 따라 커스텀 UI를 스킬 판정 상호작용 장치에 연결합니다.

1. 사용자 위젯 에서 창(Window) > 뷰모델(Viewmodels) 을 선택하여 뷰모델 창을 엽니다.

2. +뷰모델(+Viewmodel) 을 클릭합니다. 그런 다음 장치 - 스킬 판정 상호작용 뷰모델(Device - Skilled Interaction View Model) 을 선택하고 선택(Select) 을 클릭합니다.

3. 하단 툴바 또는 창 탭에서 뷰 바인딩(View Bindings) 을 선택합니다.

4. 아래 이미지와 같이 뷰 바인딩 을 구성합니다.

   
   1. +위젯 추가(+Add Widget) 를 클릭해 ScrubberMovingZone 을 추가합니다.
   2. ScubberMovingZone 을 사용자 지정 스케일(User Specified Scale) 로, UEFN_SkilledInteraction_ViewModel 을 현재 미터 값(Current Meter Value) 으로 설정합니다.
   3. +위젯 추가 를 클릭해 PerfectZoneStart 를 추가합니다.
   4. PerfectZoneStart 을 사용자 지정 스케일 로, UEFN_SkilledInteraction_ViewModel 을 완벽 구역 최소(Perfect Zone Min) 로 설정합니다.
   5. +위젯 추가 를 클릭해 PerfectZoneEnd 를 추가합니다.
   6. PerfectZoneStart 를 사용자 지정 스케일 로 설정하고 인티저 더블 추가(Add Int Double) 에 대한 변환 함수를 추가합니다.
   7. A 를 1 로 설정합니다.
   8. B 를 UEFN_SkilledInteraction_Viewmodel/완벽 구역 최대(Perfect Zone Max) 로 설정합니다.
   9. Negate B 를 True 로 설정합니다.