미션 선택 화면

미션 선택 화면은 주로 게임 시작 시 나타나 플레이어가 미션을 선택할 수 있게 해 줍니다. 경우에 따라 간단한 게임 튜토리얼로 플레이어가 게임 규칙과 메커니즘을 익히도록 후 미션 선택 화면이 나타나기도 합니다.

미션을 선택하면 게임이 시작되고 해당 미션을 위한 섬의 특정 시작 지점으로 플레이어를 안내합니다. 이러한 화면은 미션 통계에 대한 세부 정보를 포함하거나, 플레이어가 선택할 수 있는 미션 타입에 대한 정보를 제공할 수 있으며, 단순히 플레이어를 선택된 미션으로 데려가기만 할 수도 있습니다.

다음 튜토리얼은 플레이어를 선택된 미션 장소로 데려가는 미션 화면을 만드는 방법을 알려줍니다.

1단계: 미션 선택 스타일 조사

 플레이어에게 제공하고자 하는 정보의 양에 따라 메뉴 선택 화면을 디자인하는 다양한 방법이 있습니다. 정보는 미션 설명이나 미션 레벨의 텍스처 이미지 형태가 될 수 있습니다. 여기에서 머티리얼만으로 제작한 예시와 디자인에 텍스처를 전략적으로 추가한 예시를 모두 확인해 각각 어떤 느낌을 주는지 확인할 수 있습니다.

미션 선택 화면에 포함할 정보량을 결정하면 디자인 단계를 수월하게 진행할 수 있습니다.

2단계: 레이아웃 디자인

UMG를 열기 전에 미션 화면 레이아웃을 디자인합니다. 이 시점에서 정하는 디자인상의 선택은 최종이 아니며, UI 기능에 영향을 주지 않고도 다시 디자인할 수 있습니다. 화면 레이아웃은 미션 선택 화면에 포함된 요소에 따라 달라집니다.

이 단계에서 결정할 수 있는 4개의 초기 레이아웃은 다음과 같습니다.

• 컬러 배합 - UI에 컬러를 사용할 때 60/30/10 규칙을 사용합니다.

• 폰트 선택 - 현재 Burbank와 HeadingNow 두 폰트를 선택할 수 있습니다.

• 머티리얼 - UI 기능 템플릿 머티리얼을 사용하여 UI에 자신만의 독특한 룩을 연출합니다.

• 이미지/텍스처 - 텍스처는 캐릭터나 예술적인 컨테이너처럼, 머티리얼만으로는 손쉽게 재현할 수 없는 복잡한 아트에 사용하는 것이 좋습니다.

컬러 배합을 결정했다면, UI 디자인에 사용할 머티리얼과 머티리얼 인스턴스를 생성합니다.

이 예시의 디자인은 단순합니다. 화면 상단에는 플레이어에게 '미션을 선택'하라고 알려주는 행동 개시가 있으며, 그 아래에는 미션 1, 2, 3으로 라벨링되어 있고 각각 시작 버튼이 포함된 이미지 세 개가 있습니다.

3단계: 위젯 레이아웃 디자인

위젯 레이아웃 예시는 다음과 같이 주요한 4개 부분으로 구성되어 있습니다.

1. 배경 디자인

2. 미션 1 타일 디자인

3. 미션 2 타일 디자인

4. 미션 3 타일 디자인

작동하는 버튼이 포함된 위젯을 생성하려면 모달 대화창 베리언트(Modal Dialog Variant) 위젯을 사용해야 합니다. 모달 대화창 베리언트 위젯과 함께 사용하는 특수한 뷰모델이 있는데, 이를 통해 버튼을 장치에 바인딩할 수 있습니다.

1. User Interface 폴더를 생성한 후 엽니다.

2. 폴더 내부에 모달 대화창 베리언트 위젯을 생성합니다.

3. 위젯을 Mission_Select_UI로 명명합니다.

4. Mission_Select_UI 위젯을 더블클릭하여 위젯 에디터(Widget Editor)를 엽니다.

배경 디자인

이 예시에서는 머티리얼을 사용해 배경에 컬러 블록을 추가하고, 화면 상단에 행동 개시를 추가하고, 캐릭터의 텍스처 이미지를 추가하는 과정을 통해 미션 선택 화면의 배경을 디자인합니다.

위젯 에디터에서 다음 작업을 수행합니다.

1. 팔레트(Palette) 패널에서 오버레이(Overlay) 위젯을 위젯 그래프로 드래그합니다. 이 위젯이 루트 위젯이 되며, UI가 표시되는 화면 역할을 합니다.

2. 위젯 그래프에서 오버레이 위젯의 크기가 1920 X 1080이 될 때까지 확장합니다.

   

3. 계층구조(Hierarchy) 패널에서 오버레이 위젯을 우클릭하여 컨텍스트 메뉴를 엽니다. 드롭다운 메뉴에서 이름변경(Rename)을 선택하여 위젯을 Root로 명명합니다. 이 위젯이 미션 선택 화면을 구성하는 모든 위젯을 포함합니다.

   

4. 그래프 레이아웃을 원하는 크기(Desired)로 변경합니다. 이렇게 해야 UI가 화면에 표시하고자 하는 정확한 크기로 설정할 수 있습니다.

   

   화면 크기 드롭다운 메뉴에서 화면을 선택하면 플랫폼에 따라 UI가 어떻게 달라지는지 볼 수 있습니다.

   

5. 오버레이 패널을 팔레트 패널에서 Root 위젯 아래로 드래그하고 이름을 Parent Container로 변경합니다. 이 오버레이 위젯이 미션 선택 화면의 모든 부분을 담게 됩니다.

   

   이 위젯은 루트 위젯과 크기가 동일해야 합니다. 

6. Parent Container 위젯의 정렬 옵션을 가로로 채우기 및 세로로 채우기로 변경합니다.

   

7. 팔레트 패널에서 이미지 위젯을 Parent Container 위젯 아래의 계층구조 패널로 드래그합니다.

8. 이미지 위젯을 우클릭하여 컨텍스트 메뉴를 엽니다. 드롭다운 메뉴에서 이름변경(Rename)을 선택하여 위젯 이름을 UI Background Color로 명명합니다.

   

9. 계층구조 패널에서 UI Background Color 위젯을 선택하여 디테일(Details) 패널에서 해당 위젯의 옵션을 엽니다.

10. 슬롯(오버레이 슬롯)(Slot (Overlay Slot)) 옵션에서 정렬을 다음과 같이 설정합니다.

    1. 가로 정렬(Horizontal Alignment) = 가로로 채우기(Fill Horizontal)

    2. 세로 정렬(Vertical Alignment) = 세로로 채우기(Fill Vertical)

    

11. 외형(Appearance) 옵션에서 브러시(Brush) > 이미지(Image) 드롭다운 메뉴를 사용하여 주요 색상 머티리얼을 선택합니다. 이렇게 하면 이미지 위젯이 머티리얼의 컬러로 바뀝니다.

    

12. 그리드 패널(Grid Panel) 위젯을 팔레트 패널에서 Parent Container 위젯으로 드래그하고 이름을 Body로 변경합니다. 그리드 패널은 모든 UI 콘텐츠를 위한 컨테이너 역할을 하며, 레이아웃에 자손 위젯을 행과 열로 정리하는 유연한 그리드도 추가할 수 있습니다. 이 샘플에서는 미션 화면의 콘텐츠와 캐릭터 이미지를 정리해 줍니다.

    

13. 슬롯(오버레이 슬롯) 옵션에서 다음 세팅을 사용합니다.

    1. 가로 정렬(Horizontal Alignment) = 가운데 가로 정렬(Center Alignment Horizontally)

    2. 세로 정렬(Vertical Alignment) = 가운데 세로 정렬(Center Alignment Vertically)

    3. 패딩(Padding) = 64.0

    

14. 스택 박스(Stack Box)를 Body 위젯으로 드래그하고 이름을 Content로 변경합니다. 스택 박스는 자손 위젯을 배치하기 위해 세로 정렬이나 가로 정렬 중 하나를 사용합니다.

    

15. Content 위젯의 정렬 세팅을 가로로 채우기 및 세로로 채우기로 변경합니다.

    

16. 동작(Behavior) 옵션에서 방향(Orientation) 세팅을 세로(Vertical)로 변경합니다.

    

콜아웃 텍스트 추가하기

1. 팔레트 패널에서 텍스트 박스(Text Box) 위젯을 드래그하여 Content 아래 놓습니다. 이 박스는 플레이어에게 미션을 선택하도록 안내하는 콜아웃 텍스트가 됩니다.

2. 텍스트 박스 이름을 Choose Your Mission으로 변경합니다.

   

3. 계층구조 패널에서 Choose Your Mission 위젯을 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

4. 슬롯(슬롯 오버레이) 옵션에서 다음 세팅을 사용합니다.

   1. 크기(Size) = 자동(Auto)

   2. 가로 정렬(Horizontal Alignment) = 왼쪽 가로 정렬(Left Alignment Horizontally)

   3. 세로 정렬(Vertical Alignment) = 세로로 채우기(Fill Vertical)

   

5. 텍스트 필드를 클릭하고 기본 텍스트를 삭제한 후 Choose Your Mission을 입력합니다.

   

6. 외형 옵션에서 다음 세팅을 사용합니다. 

   1. 컬러 및 오파시티(Color and Opacity) = 16진 선형 E0137CFF

   2. 폰트 패밀리(Font Family) = HeadingNow

   3. 타입페이스(Typeface) = 86 Bold

   4.  크기(Size) = 85

   5. 윤곽선 크기(Outline Size) = 2

   6. 연귀이음 모서리(Mitered Corners) = 선택

   7. 윤곽선 컬러 = 16진 선형 FFFFFFFF

   

7. 이미지(Image) 위젯을 Content 위젯으로 드래그하고 이름을 Spacer로 변경합니다. 이 위젯이 콜아웃 및 미션 타일 사이에 공간을 넣기 위한 스페이서로 사용됩니다.

   

미션 타일 공간 추가하기

1. 오버레이 위젯을 Content 위젯으로 드래그하고 이름을 Tiles로 변경합니다.

   

2. 이미지 위젯을 타일(Tiles) 위젯으로 드래그하고 이름을 TileBG로 변경합니다.

   

3. 계층구조 패널에서 TileBG 위젯을 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

4. 슬롯(오버레이 슬롯) 옵션에서 다음 세팅을 사용합니다.

   1. 가로 정렬(Horizontal Alignment) = 가로로 채우기(Fill Horizontal) 

   2. 세로 정렬(Vertical Alignment) = 세로로 채우기(Fill Vertical)

   

5. 외형 옵션에서 다음 세팅을 사용합니다.

   1. 브러시(Brush) > 이미지(Image) = 보조 백그라운드 머티리얼

   2. 이미지 크기(Image Size):

      1. X = 1200

      2. Y = 32.0

   

6. 스택 박스 위젯을 타일 위젯으로 드래그하고 이름을 Mission Tiles로 변경합니다. 이 스택 박스는 미션 타일을 왼쪽에서 오른쪽으로 정리합니다.

   

이것으로 배경 레이아웃이 완성되었습니다. 여기까지 진행하면 아직은 미션 선택 화면이 비어 보입니다.

다음으로, 세 개의 미션 선택 타일을 배치하고 스택 박스 위젯 내부에서 타일을 완성해 보겠습니다. 또한 시각적인 흥미를 더하기 위해 디자인에 캐릭터 텍스처를 추가해 보겠습니다.미션 1 타일 디자인

미션 타일 디자인은 레벨과 목표에 관한 정보를 제공하고, 플레이어 목표에 대한 통계를 표시하며, 해당 목표에 대한 플레이어의 진행률까지 추적할 수 있습니다. 이 타일 예시에서는 보다 단순한 디자인을 제공하는데, 레벨을 표현해 주는 배경 텍스처, 미션 번호, 시작 버튼이 포함되어 있습니다. 여러 개의 스택 박스를 사용하면 위젯을 좌우 또는 상하로 배치할 수 있습니다. 세로 또는 가로 레이아웃을 구성할 때 스택 박스를 사용하면 레이아웃의 일관성을 유지할 수 있습니다. 미션 타일 세 개는 모두 동일한 디자인 패턴을 따릅니다. 아래 단계를 따라 세 개의 선택 타일을 모두 만들어 보세요.

1. 오버레이 위젯을 계층구조 패널의 그리드 패널(Grid Panel)로 드래그하고 이름을 Mission 1로 변경합니다. 이 위젯이 미션 1 타일의 모든 디자인 엘리먼트를 담는 버킷이 됩니다.

   

2. 계층구조 패널에서 Mission 1 위젯을 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

3. 슬롯(스택 박스 슬롯)(Slot (Stack Box Slot)) 옵션에서 다음과 같은 패딩(Padding) 세팅을 사용합니다.

   1. 왼쪽(Left) = 0.0

   2. 상단(Top) = 0.0

   3. 오른쪽(Right) = 24.0

   4. 하단(Bottom) = 0.0

   

4. Image 위젯을 계층구조 패널의 Mission 1 위젯으로 드래그하고 이름을 Mission1Image로 변경합니다. 이 위젯이 Mission1을 시각적으로 표현한 것입니다.

   

5. 계층구조 패널에서 Mission1Image를 선택하여 디테일 패널에서 위젯의 옵션을 엽니다.

6. 슬롯(스택 박스 슬롯) 옵션에서 다음 세팅을 사용합니다.

   1. 가로 정렬(Horizontal Alignment) = 가로로 채우기(Fill Horizontal) 

   2. 세로 정렬(Vertical Alignment) = 세로로 채우기(Fill Vertical)

   

7. 외형 옵션에서 다음 세팅을 변경합니다.

   1. 이미지 = Mission 1 텍스처

   2. 이미지 크기(Image Size):

      1. X = 256.0

      2. Y = 256.0

   

   이미지 크기를 설정하면 타일 디자인을 한층 더 제어할 수 있습니다.

타일 콘텐츠 정렬하기

1. 스택 박스 위젯을 Mission 1 위젯으로 드래그하고 이름을 M1Content로 변경합니다.

   

2. 계층구조 패널에서 M1Content를 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

3. 슬롯(오버레이 슬롯) 옵션에서 다음 세팅을 변경합니다.

   1. 가로 정렬(Horizontal Alignment) = 가운데 가로 정렬(Center Alignment Horizontally)

   2. 세로 정렬(Vertical Alignment) = 가운데 세로 정렬(Center Alignment Vertically)

   

   이렇게 하면 모든 스택 박스의 자손 위젯이 중앙에 정렬됩니다.

4. 동작 옵션에서 방향을 세로로 설정합니다. 이렇게 하면 모든 자손 위젯이 세로로 중첩됩니다.

   

5. 오버레이 위젯을 M1Content로 드래그하고 이름을 M1Header로 변경합니다. 이 오버레이가 모든 헤더 에셋을 담는 버킷 역할을 하며, 오버레이의 세팅에 따라 에셋의 스타일을 지정합니다.

   

6. 계층구조 패널에서 M1Header를 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

7. 슬롯(스택 박스 슬롯)에서 다음 옵션을 변경합니다.

   1. 패딩:

      1. 왼쪽(Left) = 0.0

      2. 상단(Top) = 0.0

      3. 오른쪽(Right) = 0.0

      4. 하단(Bottom) = 128.0

   2. 크기(Size) = 자동(Auto)

   3. 가로 정렬(Horizontal Alignment) = 가운데 가로 정렬(Center Alignment Horizontally)

   4. 세로 정렬(Vertical Alignment) = 세로로 채우기(Fill Vertical)

   

   고유한 패딩 세팅 값을 사용하면 미션 1 타일의 오른쪽에 패딩을 적용할 수 있습니다.

미션 타일 텍스트 스타일링

1. 이미지 위젯을 M1Header로 드래그하고 이름을 M1Stroke로 변경합니다.

   

2. 계층구조 패널에서 M1Stroke를 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

3. 슬롯(오버레이 슬롯)에서 정렬을 완전히 가로 및 완전히 세로로 설정합니다.

   

4. 외형 옵션에서 다음 세팅을 사용합니다.

   1. 이미지(Image) = 슬라이스 머티리얼

   2. 이미지 크기(Image Size):

      1. X = 200.0

      2. Y = 32.0

   

5. 텍스트 박스 위젯을 M1Header 위젯으로 드래그하고 위젯 이름을 Mission_1로 변경합니다.

   

6. 계층구조 패널에서 Mission_1 텍스트 위젯을 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

7. 슬롯(오버레이 슬롯) 옵션에서 정렬을 다음과 같이 설정합니다.

   1. 가로 정렬 = 가운데 가로 정렬(Center Alignment Horizontally)

   2. 세로 정렬(Vertical Alignment) = 상단 정렬(Top Alignment)

   

8. 텍스트(Text)를 Mission 1로 변경합니다.

   

9. 브러시 > 이미지 툴에서 색 선택 툴(Color Picker)을 열어 텍스트의 강조 색상을 선택합니다.

10. 폰트(Font)에서 옵션을 다음과 같이 설정합니다.

    1. 타입페이스(Typeface) = 굵게(Bold)

    2. 크기(Size) = 25.0

    3. 문자 간격(Letter Spacing) = 65

    4. 왜곡량(Skew Amount) = 0.28

    

11. 윤곽선 세팅(Outline Settings)에서 옵션을 다음과 같이 설정합니다.

    1. 윤곽선 크기(Outline Size) = 1

    2.  별도 알파 채우기(Separate Fill Alpha) = 선택

    3. 윤곽선을 적용하여 섀도 드롭(Apply Outline to Drop Shadow) = 선택

    4. 윤곽선 컬러 = 색 선택 툴에서 주요 컬러 선택

    

12. 섀도 컬러(Shadow Color)를 색 선택 툴의 주요 컬러로 변경합니다. 폰트가 살짝 3D처럼 보여야 하며, 콜아웃 텍스트와 구별되는 독특한 스타일이어야 합니다.

    

시작 버튼 추가하기

1. 음소거 버튼(Quiet Button) 위젯을 M1Content 위젯으로 드래그하고 이름을 START_M1_Button으로 변경합니다.

   

2. 계층구조 패널에서 START_M1_Button을 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

3. 버튼의 텍스트를 START로 변경합니다.

   

4. 슬롯(스택 박스 슬롯) 옵션에서 최소 높이(Min Height)를 56으로 설정합니다. 이렇게 하면 버튼의 높이가 줄어듭니다.

   

5. 선택(Selection) > 선택 가능(Selectable)에 체크 표시합니다. 이렇게 하면 플레이어가 버튼을 선택할 수 있습니다.

   

6. 입력(Input)에서 옵션을 다음과 같이 설정합니다.

   1. 터치 메서드(Touch Method) = 아래(Down)

   2. 프레스 메서드(Press method) = 버튼 누르기(Button Press)

   

7. 이 단계를 따라 미션 2 및 미션 3의 레이아웃도 만듭니다.

미션 2 및 미션 3 타일을 추가하기 전에 아래 이미지와 같이 디자인되어야 합니다.

모든 미션 타일이 완성되면 UI에 약간 시각적으로 흥미를 줄 수 있도록 디자인에 캐릭터를 추가합니다.

캐릭터 텍스처 추가하기

UI에 캐릭터 텍스처를 추가하면 디자인을 위해 선택한 모든 색상이 적용되어 UI의 시각적 스타일이 강화됩니다. 2의 거듭제곱 크기를 사용해야 하며, 사용하는 텍스처가 어떤 크기로든 스케일 조절할 수 있는 고퀄리티여야 합니다.

1. 이미지 위젯을 바디 위젯으로 드래그하고 이름을 Character로 변경합니다.

   

2. 계층구조 패널에서 캐릭터(Character) 위젯을 선택하여 디테일 패널에서 해당 위젯의 옵션을 엽니다.

3. 외형에서 다음 세팅을 사용합니다.

   1. 브러시(Brush) > 이미지(Image) = 캐릭터 텍스처

   2. 이미지 크기(Image Size):

      1. X = 700

      2. Y = 700

   

4. 슬롯(그리드 슬롯)(Slot (Grid Slot)) 옵션에서 다음 세팅을 사용합니다.

   1. 가로 정렬(Horizontal Alignment) = 오른쪽 정렬(Right Alignment)

   2. 세로 정렬(Vertical Alignment) = 세로로 채우기(Fill Vertical)

   3. 스텝이동 = X축 및 Y축 툴을 사용하여 캐릭터 텍스처를 제자리에 정확하게 배치합니다.

   

미션 섹션을 완성했으면, 이제 UI에 있는 버튼의 기능을 연결할 준비가 된 것입니다.

4단계: 뷰모델 추가

뷰모델은 함수 목록을 통해 플레이어 정보를 제어하며, 특정 방식으로 UMG 위젯을 포크리 장치에 바인딩할 수 있게 해 줍니다. 버튼과 연동되는 CreativeModalDialogViewmodel이라는 특정 뷰모델이 있습니다. 이 뷰모델은 모달 대화창 베리언트 위젯에서만 작동하며, 다양한 버튼 기능을 제공합니다.

뷰모델을 사용하려면 다음 단계를 따릅니다.

1. 메인 메뉴 바의 창(Window) 메뉴를 엽니다.

   

2. 드롭다운 메뉴에서 뷰모델(Viewmodels)을 선택합니다. CreativeModalDialogViewmodel 패널이 위젯 에디터 창에 자동으로 도킹됩니다.

   

모든 버튼 기능이 위젯이 추가되었으니, 이제 버튼을 작동하게 만드는 바인딩을 추가할 수 있습니다.

5단계: 장치 추가

미션 영역이 구성되고 나면, 각 영역마다 플레이어를 수신할 순간이동 장치를 구성해야 합니다. 팝업 대화창 장치는 모달 대화창 베리언트 위젯을 사용하여 트리거 시 위젯 UI를 표시합니다.

팝업 대화창 장치

프로젝트에 팝업 대화창 장치를 추가하는 것부터 시작합니다. 옵션을 수정한 다음, 장치에 모달 대화창 베리언트 위젯을 추가합니다.

1. 팝업 대화창 장치를 뷰포트로 드래그합니다.

2. 디테일 패널에서 다음과 같은 사용자 옵션을 설정합니다.

   1. 설명(Description) = 미션 선택 화면(Mission Select Screen)

   2. 자동 표시(Auto Display) = 게임 시작(Game Start)

   3. 응답 유형(Response Type) = 버튼 3개(3 Buttons)

   

   이러한 옵션은 위젯을 식별하고, HUD에 UI를 표시할 시점과 위젯에 어태치된 버튼의 수를 결정합니다.

3. 고급(Advanced) 옵션에서 다음과 같은 옵션을 설정합니다.

   1. 기본 뒤로가기 버튼(Default back button) = 없음(None)

   2. 버튼 1 텍스트(Button 1 Text) = START

   3. 버튼 2 텍스트(Button 2 Text) = START

   4. 버튼 3 텍스트(Button 3 Text) = START

   5. 배경 가리기(Mask background) = 선택

   6. 사용 단계(Enabled During Phase) = 게임플레이만(Gameplay Only)

   

   

4. 모달 위젯(Modal Widget) > 템플릿 오버라이드 클래스(Template Override Class)로 스크롤을 내려 드롭다운 메뉴에서 Mission_Select_UI 위젯을 선택합니다.

   

5. 사용자 옵션 - 기능(User Options - Functions)으로 스크롤을 올려 표시(Show)에서 배열 엘리먼트(Array Element)를 엽니다.

6. 상단 필드에 플레이어 1 생성 패드(Player 1 Spawn Pad)를 추가합니다.

7. 생성 패드 기능에서 플레이어 생성 시(On Player Spawned)를 선택합니다.

   

순간이동 장치

개발 시간을 절약하기 위해, 첫 번째 순간이동 장치를 생성해 옵션을 수정한 다음 해당 장치를 복사하여 추가 장치를 각 미션 영역에 배치합니다. 

1. 순간이동 장치(Teleporter)를 뷰포트로 드래그합니다.

2. 디테일 패널의 사용자 옵션에서 순간이동 장치 균열 표시(Teleporter Rift Visible) 및 시각 효과 재생(Play Visual Effects)을 체크 해제합니다.

   

3. 사용자 옵션 - 기능으로 스크롤을 내려 순간이동(Teleport)에서 배열 엘리먼트를 엽니다.

4. 상단 필드에 팝업 대화창을 추가합니다.

5. 버튼 1 응답 시(On Responding Button 1)를 선택합니다.

   

6. 순간이동 장치를 2번 복제합니다.

7. 추가된 각 순간이동 장치의 사용자 옵션 - 기능 > 순간이동 > 팝업 대화창 장치 기능 항목마다, 기능을 해당하는 버튼으로 변경합니다(버튼 2 응답 시(On Responding Button 2), 버튼 3 응답 시(On Responding Button 3)).

미션을 시작하기 위해 플레이어가 미션 영역과 연결된 버튼을 클릭하면 선택된 미션 영역으로 순간이동됩니다. 이러한 기능을 생성하려면 버튼 기능을 선택 화면의 버튼에 바인딩해야 합니다.

6단계: 뷰 바인딩

뷰 바인딩은 장치와 위젯 기능을 바인딩하는 로직을 추가해 줍니다. 

이 예시에서 순간이동 기능을 통해 버튼이 순간이동 장치에 바인딩됩니다. 플레이어가 미션을 선택하면, 시작(START) 버튼을 클릭함으로써 연결된 순간이동 장치가 활성화되고 플레이어를 해당 미션 영역으로 순간이동시킵니다.

바인딩을 추가하려면 다음 단계를 따릅니다.

1. 계층구조 패널에서 Start_Mission_1_Button을 선택하여 하이라이트한 다음, 하단 툴바에서 뷰 바인딩(View Bindings)을 선택합니다. 음소거 버튼이 선택된 상태로 뷰 바인딩 창이 열립니다.

   

2. +Start_Mission_1_Button 위젯 추가(+Add Widget Start_Mission_1_Button)를 선택합니다. 그러면 아래처럼 바인딩 뷰가 생성됩니다.

   

3. Start_Mission_1_Button이 포함된 왼쪽 필드를 선택하고 드롭다운 메뉴에서 클릭 시(On Clicked) > 이벤트(Event)를 선택합니다. 클릭 시 이벤트가 음소거 버튼에 추가됩니다.

   

4. 다음에는 오른쪽 필드를 선택하고 드롭다운 메뉴에서 CreativeModalDialogViewmodel > 응답(Response) > 선택(Select)을 고릅니다. 이렇게 하면 버튼의 클릭 시 이벤트에 응답(Response) 기능이 추가됩니다.

   

5. 응답 드롭다운 메뉴에서 버튼 1(Button 1)을 선택합니다. 기능이 첫 번째 음소거 버튼에 바인딩됩니다.

   

6. 이러한 단계를 반복하여 다음 두 개 버튼도 바인딩합니다.

   

여기까지 진행하면 모든 버튼이 순간이동 장치에 바인딩되어 있어야 하며, 게임 시작 시 플레이어가 게임에 생성되면 미션 선택 화면이 나타나야 합니다.

결과

프로젝트를 플레이테스트하는 마지막 단계로, UI가 의도한 대로 작동하는지 확인해야 합니다. 세션을 실행한 후 플레이어가 섬에 생성되면 미션 선택 화면이 나타나야 하며, 플레이어가 UI에서 선택된 미션으로 순간이동해야 합니다.

직접 해보기

자신의 프로젝트에 맞게 미션 선택 화면의 디자인을 변경할 수 있는 몇 가지 방법이 있습니다. 

• 배경 미션 타일을 텍스처가 아닌 머티리얼로 바꾸어 볼 수도 있습니다. 이렇게 하면 미션 화면에서 다른 룩을 연출할 수 있습니다.

  

• 플레이어 통계나 수집된 오브젝트를 추적하기 위해 각 미션에 추적기를 추가할 수도 있습니다.

• 라운드 설정 장치를 추가하여 플레이어를 부활시키고, 미션 선택 화면을 다시 띄워서 플레이어가 아직 플레이하지 못한 다른 미션을 선택할 수 있도록 하고, 선택한 미션을 성공적으로 완료한 후에는 이용 불가능하게 만들 수도 있습니다.