[Unreal] UMG 사용 UI 제작

* 앞서 제작한 슈팅 게임에서 적을 격추시켜 얻은 점수를 화면 상에 나타내기 위한 UI를 제작한다.

1. 점수 변수 및 점수 누적 함수 구현

• 점수 누적은 게임 룰의 일종이기 때문에 GameModeBase 클래스 상에 구현한다.
  1) 점수를 저장할 int형의 CurrentScore 변수를 만든다.
2) Add Score 함수를 만들고, CurrentScore에 1을 더하도록 구현한다.

2. 점수 누적 함수 실행

• Bullet이 Enemy와 충돌할 때 점수가 누적되므로 Bullet 액터의 블루프린트에서 ActorBeginOverlap 함수를 수정해야 한다.
  1) 점수 누적 전에 Bullet(본인)이 파괴되면 안되므로 Destroy Actor를 맨 뒤로 놓는다.
2) Get Game Mode 노드를 통해 현재 실행 중인 게임 모드 클래스를 가져온다.
3) 가져온 클래스는 BP_GameModeBase의 부모 클래스이므로 BP_GameModeBase로 Cast (형변환)한다.
4) 해당 클래스에서 Add Score 함수를 실행한다.

3. 점수 UI 제작하기

1) Add/Import -> User Interface -> Widget Blueprint로 위젯 블루프린트를 생성한다.

2) UI 캔버스의 해상도를 설정한다. (일반적으로 1920x1080으로 설정)

3) 좌측 Palette에서 Text를 꺼내서 캔버스에 집어넣는다. 그럼 자동으로 Hierarchy에 Text 오브젝트가 추가된다.

4) 이후 텍스트 크기, 색상, 내용 등을 수정한다.

5) 적을 격추할 때마다 UI가 변화하도록 점수 Text와 CurrentScore 변수를 바인딩 해야한다.

6) Bind -> Create Binding을 누르면 바인딩 그래프로 들어오게 되는데, 여기에서 BP_GameModeBase 클래스 내의 CurrentScore를 가져와 Text와 연결한다.

7) 화면 상에 UI를 띄우기 위해서는 위젯 블루프린트를 뷰포트에 생성해야 한다. 해당 부분은 BP_GameModeBase의 블루프린트에 추가한다.
a. Create Score UI Widget : 위젯을 메모리 공간에 로드한다. 'Class'에 로드하고자 하는 위젯 블루프린트를 선택한다.
b. Add to Viewport : 로드된 위젯을 뷰포트 상에 출력한다.

4. 게임 오버 UI 제작하기

1) 위젯 블루 프린트를 생성해 Game Over 텍스트와 아래 두 개의 버튼을 추가한다.

* 텍스트나 버튼을 가운데에 정렬하는 방법
a) Anchors를 눌러 창을 연다.
b) 가운데 버튼을 눌러 앵커를 캔버스 중앙으로 맞춘다.
c) 옮기고자 하는 오브젝트를 누르고, Ctrl 버튼을 누른 상태로 가운데 버튼을 눌러 해당 오브젝트를 앵커 위치로 이동시킨다.

2) 버튼들의 Details에서 이벤트를 추가해줘야 한다. (On Clicked == 버튼을 눌렀을 때)

a. Restart 버튼을 누르면 다시 첫 레벨이 시작되도록 Open Level 노드를 추가한다.
b. 또한 기존에 메모리에 로드했던 게임오버 UI 위젯을 제거하기 위해 Remove from Parent 노드도 추가한다.
c. Exit 버튼을 누르면 게임을 끝내도록 Quit Game 노드를 추가한다.

3) 화면 상에 UI를 띄움과 동시에 게임이 일시정지되고 마우스 커서가 보이도록 한다.

a. 마우스 커서 출력을 제어하기 위해 Get Player Controller 노드를 통해 컨트롤러 클래스를 가져온다.
b. Set Show Mouse Controller 노드를 추가하고 Show Mouse Cursor를 활성화해 마우스 커서가 출력되게 한다.
c. Set Game Paused 노드를 추가하고 Paused를 활성화해 게임이 일시정지 되게 한다.

5. 최고 점수 데이터 저장 및 불러오기

1) BP_GameModeBase 블루프린트에 최고 점수 저장할 MaxScore 변수를 선언한다.
2) MaxScoreUI 위젯 블루프린트를 새로 생성한다.
3) 점수 Text와 MaxScore 변수를 바인딩 해야한다. Bind -> Create Binding에서 BP_GameModeBase 클래스 내의 MaxScore를 가져와 Text와 연결한다.

4) 이제 점수를 파일로 저장하고 불러와야 한다. 이를 위해 SaveGame 클래스를 상속 받는 BP_SaveGame 블루프린트를 만든다.

5) BP_SaveGame 블루프린트에 점수를 저장할 ScoreData 변수를 만든다.

6) BP_GameModeBase 블루프린트에 BP_SaveGame을 파일로 저장할 SaveScoreData 함수를 만든다. (입력값으로 Save Value 추가)

a. Create Save Game Object를 추가해 파일로 저장할 클래스를 Save Game Class로 선택한다.
b. Create Save Game Object의 출력으로 나오는 데이터는 임시 존재하는 인스턴스 형태로 되어있으므로, 이를 실존하는 변수로 승격시켜야 한다. 이를 위해 핀을 끌어 Promote to variable을 선택하면 자동으로 새 변수가 생성된다..

c. 승격된(생성된) 변수의 이름을 SaveInstance로 변경한다. 이 변수는 BP_SaveGame 클래스 형식이다.

d. SaveInstance 변수 내의 데이터인 ScoreData를 입력받은 값으로 저장한다.
e. Save Game to Slot 노드를 추가해 데이터를 저장한 SaveInstance 변수를 슬롯 형태로 언리얼 시스템 파일에 저장한다. Slot Name을 입력해 슬롯 이름을 저장할 수 있다.

7) 이번엔 저장한 데이터 파일을 불러올 LoadScoreData 함수를 만든다.

a. Does Save Game Exist 노드를 추가해 불러오려는 슬롯이 존재하는지 확인해 존재할 때만 불러온다.
b. Load Game Slot 노드를 추가해 Slot Name을 입력하여 이전에 저장한 슬롯으로부터 데이터를 불러온다.
c. 불러온 Game Object 데이터를 다시 SaveGame 형식으로 Cast 한다.
d. 최대 점수인 MaxScore에 저장한다.

8) SaveScoreData 함수와 LoadScoreData를 실행한다.
a. BP_Bullet 블루프린트에서 Enemy와 부딪힐 때 BP_GameModeBase의 CurrentScore와 MaxScore를 비교해 CurrentScore가 더 크다면 MaxScore를 CurrentScore의 값으로 갱신해주고, MaxScore를 입력값으로 하는 SaveScoreData 함수를 실행해 최고 점수를 파일로 저장해둔다.

b. BP_GameModeBase의 BeginPlay에서 LoadScoreData 함수를 실행해 파일로 저장되어있던 최고 점수를 MaxScore에 대입해준다.