👱‍♀️ ansohxxn

👱‍♀️ ansohxxn

개인적인 필기 노트

UE4 Chapter 6-1. UI : 스테이지 클리어 작업

Date:     Updated:

카테고리:

태그:

인프런에 있는 황대희님의 언리얼 엔진4 3D 횡스크롤 게임 만들기 강의를 듣고 정리한 필기입니다. 😀
언리얼 엔진 공식 문서 https://docs.unrealengine.com/ko/index.html

스테이지 클리어 작업

보스가 죽으면 스테이지를 깼다고 판정한다.

🙋‍♂️ Game Mode 블루프린트

게임에 대한 기본 규칙들이 지정된다.

  • 존재하는 플레이어와 관람자의 수는 물론, 허용된 플레이어와 관람자 최대 수
  • 플레이어가 게임에 들어오는 방식, 스폰 위치 선택 규칙과 기타 스폰/리스폰 동작 포함 가능
  • 게임 일시정지 가능 여부, 게임 일시정지 처리 방식
  • 레벨간의 전환, 게임의 시네마틱 모드 시작 여부 포함

게임 모드 블루프린트를 사용하면, 레벨마다 게임 모드를 지정해줄 수 있다. 개발자가 직접 게임 모드 블루프린트를 생성하지 않으면 언리얼 엔진에 기본적으로 마련이 되어 있는 GameMode 블루프린트가 사용된다.


🙋‍♀️ 스테이지 클리어 했는지 체크하기

보스를 변수로 가져온 후, 가져온 보스의 상태가 Death 상태인지를 체크하자.

게임 모드 블루프린트 만들기

image

부모 클래스를 Game Mode Base 로 하여 클래스 블루프린트 만들어주기. 이름은 “DefaultPlayGameMode”.

image

월드 세팅 패널에서 Game Mode - Game Mode Override 에 방금 만든 “DefaultPlayGameMode” 블루프린트를 할당해준다.


게임 시작시 보스 변수에 보스 할당

🚩 “DefaultPlayGameMode” 게임 모드 블루프린트 이벤트 그래프

image

  • 우선 “Boss1MonsterBP” 타입의 Boss 변수를 추가한다.
  • 게임이 시작되는 이벤트가 발생하면 (BeginPlay)
  • “Boss” 태그를 가진 모든 Actor들을 배열로 리턴한다. (액터들이 모인 배열)
    • Get All Actors with Tag
      • 해당 Tag를 가진 액터들을 배열에 담아 리턴한다.
      • “Boss” 태그를 가진 Actor는 “Boss1MonsterBP” 하나 일테니, 인덱스 0 인 원소를 가져오면 그것이 바로 “Boss1MonsterBP”가 된다.
  • 배열 원소인 Actor 레퍼런스를 “Boss1MonsterBP”로 형변환한다.
  • Boss 변수에 이를 세팅한다.


🚩 “Boss1MonsterBP” 보스 블루프린트 이벤트 그래프

image

“Boss1MonsterBP” 액터 컴포넌트를 클릭한 후, Actor의 태그 배열 원소로 "Boss"를 추가한다. 이 태그로 게임 모드 블루프린트에서 Boss 액터인지를 판가름한 후 변수에 할당할 것이다.


매 프레임마다 보스가 죽었는지 체크

🚩 “DefaultPlayGameMode” 게임 모드 블루프린트 이벤트 그래프

image

  • 매 프레임마다 (Tick)
  • Boss의 Cur State가 ‘== Death’ 인지를 검사한다. (Branch)


🙋‍♀️ 스테이지 UI Widget 만들기

보스가 죽어서 스테이지가 Clear 됐을 때 띄울 UI 만들기

위젯(widget) 블루프린트

게임을 구성하는 UI 요소

image

위젯 블루프린트 만들기. 이름은 “StageClear”


🚩 “StageClear” 위젯 블루프린트 디자이너 모드

image

  • 디자이너 모드
    • UI 요소들을 시각적으로 배치해볼 수 있는 Canvas 가 있다.
  • 그래프 모드
    • 이벤트 그래프

image

  • 왼쪽 상단의 팔레트에서 텍스트, 버튼 같은 UI 요소들을 Canvas 위로 드래그 하여 배치해주면 된다.
  • 복사한 UI를 붙여 넣기 할 때, 꼭 Canvas를 한번 클릭해서 Canvas를 선택한 상태에서 붙여 넣기를 해주어야 한다. 예를 들어 버튼을 복사한다면, 버튼이 여전히 선택된 상태에서 붙여 넣기를 할 때 버튼 안에다가 버튼을 붙여넣기 하는게 되서 크기가 충분하지 않아 경고 메세지가 뜨며 붙여넣기가 이루어지지 않음.
  • 버튼 위의 텍스트는 그냥 텍스트 UI를 버튼 UI 위에 그대로 복붙 해주면 된다.
  • Canvas
    • Text - “Stage Clear!”
    • Button 1 - Main Menu Button
      • Text - “Main Menu”
    • Button 2 - Retry Button
      • Text - “Retry Button”
    • Button 3 - Next Button
      • Text - “Next Button”


위젯 화면에 띄우기

🚩 “DefaultPlayGameMode” 게임 모드 블루프린트 이벤트 그래프

image

위셋을 사용하기 위해선 게임 모드 블루프린트 안에서 만들어 둔 위젯 블루프린트를 생성해주어야 한다.

  • Get Player Controller
    • 위젯의 Owining Player에 Player Controller를 연결해준다.
      • Player Controller 가 HUD를 실질적으로 소유한다.
        • HUD
          • 👉 HUD 는 게임플레이 도중 화면 위에 겹처놓이는 계기판이나 정보를 가리킵니다. HUD의 목적은 플레이어에게 점수, 생명력, 남은 시간 등 게임의 현재 상태를 알리는 것입니다. HUD는 보통 상호작용적이지 않습니다. 즉 플레이어는 HUD 요소를 클릭할 수 없다는 뜻으로, 어떤 게임 유형에서는 이 부분이 회색으로 변해 HUD와 UI의 구분이 힘들어지기는 합니다. - 언리얼 공식 문서
      • PlayerController 클래스는 HUD를 멤버 변수로써 가지고 있는데, GameMode에서 PlayerController 클래스에 HUD Class를 전달하여 설정하도록 한다.
      • HUD의 기능을 HUD 클래스 외부에서 사용하고자 할 경우, PlayerController의 GetHUD 함수를 사용하면 해당 플레이어 컨트롤러에 대한 HUD를 취득할 수 있다.
      • 설명 출처 블로그
  • Create Widget
    • 위젯을 생성한다
      • Class 👉 "StageClear" 위젯 블루프린트 할당
  • Add to Viewport
    • 위젯 블루프린트를 화면상에 그린다.

image


위젯이 한번만 생성될 수 있도록 하기

Tick 을 통해 매 프레임마다 보스가 죽었는지 체크하고, 매 프레임마다 위젯을 생성하고 화면에 그리고 있으므로 성능상 부담스럽다.

🚩 “GamePlayState” Enumeration

image

“GamePlayState” 이름의 Enumeration을 추가로 생성하였다.

  • Ready
    • 추후 설명
  • Play
    • 게임 플레이 상태일 때만 보스가 죽었는지를 체크하고
  • Stage Clear
    • 보스가 죽었다면 이 상태로 바뀌며
    • 더 이상 보스가 죽었는지 체크하지 않는다.
  • PlayerHeroDeath
    • 추후 설명


🚩 “DefaultPlayGameMode” 게임 모드 블루프린트 이벤트 그래프

image

  • “GamePlayState” Enum 타입의 CurGamePlayState 변수 추가
    • 디폴트 값은 Play
  • CurGamePlayState 값이 게임 플레이 중인 상태를 나타내는 Play 상태일 때, 그리고 동시에 보스가 죽은 상태인 CurState 값이 Death 상태일 때만 그 뒤에 처리를 진행한다. (위젯 생성 같은)
    • 보스가 죽으면 CurGamePlayState 값이 StageClear 로 설정한다.
      • Play 가 아닌 StageClear 값이 되었기 때문에 다음 프레임부터는 그 뒤에 노드들이 실행되지 않는다.
        • 따라서 위젯이 딱 한번만 생성되고 뷰포트에 그려진다.

image

보스가 죽고난 후엔 CurGamePlayState 값이 StageClear 가 되었기 때문에 보스가 죽은 그 순간에만 한번 생성하고 그 다음 프레임부터는 생성되지 않는다는 것을 확인할 수 있다.


스테이지 클리어하면 커서 보이게 하기

🚩 “DefaultPlayGameMode” 게임 모드 블루프린트 이벤트 그래프

image

스테이지 클리어되면 커서를 보이게 하여 UI 버튼 같은 것들을 클릭할 수 있도록 해주자.

  • Set Show Mouse Cursor
    • Player Controller를 입력으로 받으며, 마우스 커서를 보이게 할건지 아닌지를 설정할 수 있다.


🙋‍♀️ 스테이지 클리어 처리

스테이지가 클리어 되면 더 이상 몬스터들도 플레이어를 공격하지 않고, 플레이어의 입력도 막히도록 해보자.

스테이지 클리어 되면 몬스터가 플레이어를 쫓고 공격하지 않도록

🚩 “DefaultMonsterBP” 몬스터 블루프린트 이벤트 그래프

플레이어가 보스를 죽여서 스테이지가 클리어 되면 몬스터들이 플레이어를 공격하지 않게 한다.

image

  • 몬스터 블루프린트 내에서 스테이지가 클리어 되면 플레이어를 더 이상 쫓지 않도록, IsStageClear boolean 타입의 변수를 추가한다.

  • 1️⃣ IsStageClear 값 설정

    • 몬스터가 플레이어를 쫓도록 거리와 방향을 설정하는 부분에서 위와 같이 “DefaultPlayGameMode” 게임 모드 블루프린트 의 CurGamePlayState 값이 StageClear 라면 IsStageClear 값을 True로 설정한다.

image

image

  • 2️⃣ IsStageClear 값이 True 이거나, 혹은 플레이어가 죽어서 IsDeathPlayerCharacter 값이 True 라면
    • 몬스터가 플레이어를 쫓지 않도록 CurState 값이 Idle_Ready 가 되게 한다.


스테이지 클리어 되면 플레이어를 움직일 수 없도록

스테이지 클리어 되면 플레이어의 Input을 비활성화 시켜야 한다.

🚩 “DefaultPlayGameMode” 게임 모드 블루프린트 이벤트 그래프

image

  • Disable Input
    • 타겟 👉 Get Player Character
      • 현재 Player Index 0 에 해당하는 Player Character 액터
    • 타겟으로 들어온 Actor 의 Player Controller에 대하여 입력을 비활성화 한다.
      • 즉, Player Index 0 에 해당하는 Player Character 액터인 “MoveCharBP”에 대한 입력을 비활성화 한다.


🙋‍♀️ Stage 2 만들기

image

Stage 1 레벨을 우클 - 복제 하여 Stage 2 레벨을 만들었다.

라이트 컬러 바꾸기

두 번째 스테이지를 차별화 하기 위해 컬러를 바꿔주었다.

image

image

Light Source 오브젝트를 찾아 클릭한 후 디테일 패널 - Light - Light Color 에서 색상 설정


Next 버튼을 누르면 Stage 2 로 갈 수 있도록 하기

다시 Stage 1 레벨로 돌아가자.

🚩 “StageClear” 위젯 블루프린트 디자이너 모드

image

Next 버튼 UI 를 클릭하면 위와 같이 버튼을 클릭하거나 클릭을 뗐을 때 등등 여러 상황에 대한 버튼 이벤트를 추가할 수 있다. OnClicked 이벤트를 추가하자.

🚩 “StageClear” 위젯 블루프린트 이벤트 그래프

image

Next 버튼을 누르는 이벤트가 발생하면 “Stage 2” 레벨이 열리게 한다.


🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

댓글남기기

참고