UE4 Chapter 6-3. UI : 스테이지 선택 (게임 인스턴스)

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

스테이지 선택

🔔 스테이지 선택 위젯 블루프린트

원하는 스테이지를 선택할 수 있는 “StageSelect” 이름의 위젯 블루프린트 만들기.

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

이미지를 배치하여 배경을 하얗게 했다.

🔔 게임 인스턴스

스테이지 선택 창을 보이게 하고 사라지게 하는 것은 게임 인스턴스를 상속 받은 블루프린트에서 기능하게 할 것이다.

• 게임 인스턴스 특징
  • 레벨이 바뀌어도 계속 유지가 된다.
    • 게임이 시작되고 게임이 끝날 때까지 쭉 존재한다.
    • 게임 인스턴스 블루프린트 내에서 만든 변수는 게임 내내 유지가 되서 좋다.
  • 스테이지 선택 위젯을(“StageSelect”) 불러올 때마다 계속 생성하는 것은 너무 비효율적이다. 딱 한번만 기존에 생성해두고 변수에 저장해두었다가 보이게 하고 안보이게 하고 하는게 더 효율적이다.
  • 싱글톤과 거의 비슷한 개념이다.
    • 싱글톤과 게임 인스턴스의 차이 참고 블로그
• 스테이지 선택 창은 어느 레벨에서든, 언제 어디서든 플레이어가 원할 때 불러올 수 있어야 하므로 게임 내내 유지가 되야 하고, 스테이지 선택 창을 띄울 때마다 그 때마다 새로 생성하고 띄우는 것은 너무 비효율적이므로 최초에 한번만 생성하고 그 이후엔 이때 만들어 둔 것을 띄우는 것이 더 효율적이다.
  • 따라서 스테이지 선택 위젯은 게임 인스턴스 블루프린트에서 제어하는 것이 적합하다.

게임 인스턴스 블루프린트

부모 클래스를 GameInstance로 하여 블루프린트를 생성한다. 이름은 “SideScrollGameInstance”

편집 - 프로젝트 세팅 - 맵 & 모드 - Game Instance - Game Instance Class 에 방금 만든 “SideScrollGameInstance” 블루프린트를 할당하여 적용해준다. 게임 인스턴스 블루프린트의 적용은 이 과정이 반드시 필요하다.

🚩 “SideScrollGameInstance” 게임 인스턴스 블루프린트

• 사용자 지정 함수인 Show Stage Select Widget 이름의 함수를 직접 만들어주었다.
  • 왼쪽 상단의 ‘함수’ 에서 플러스 버튼을 누르면 함수를 생성할 수 있다.
  • 디테일 패널에서 ‘입력’. 즉, 이 함수의 ‘파라미터’를 isShow라는 Boolean 타입의 매개 변수으로 지정해주었다.
    • 다른 블루프린트에서 스테이지 선택 위젯을 불러오려는 작업을 할 때 Show Stage Select Widget 함수를 실행하고 파라미터인 isShow에 True 값을 넘길 것이다.

• StageSelectWidget 이라는 User Widget 클래스 레퍼런스 타입의 변수를 추가해주었다.
  • ⭐스테이지 선택하는 UI 위젯은 최초에 단 한번만 생성된 후 이 변수에서 레퍼런스로 저장할 것이다. 즉, 한개를 계속 유지하고 재활용 함.
    • 이 레퍼런스 변수가 이미 참조하는게 있다면(Valid) 이미 한번 생성된 스테이지 선택 위젯을 참조하고 있다는 뜻이니, 위젯을 생성할 필요 없이 StageSelectWidget가 참조한느 스테이지 선택 위젯을 가져오기만 하면 된다.
      • 싱글톤 !!

• Show Stage Select Widget 함수가 실행되면
  • StageSelectWidget 변수가 유효한지를 검사해야 한다.
    • 유효하다면 👉 StageSelectWidget 레퍼런스 변수가 이미 기존에 생성된 스테이지 위젯 오브젝트가 있으므로 위젯을 새로 생성해줄 필요가 없다. 바로 isShow Branch 노드로 이동
    • 유효하지 않다면 👉 StageSelectWidget 레퍼런스 변수가 이미 기존에 생성된 스테이지 위젯 오브젝트가 없다는 뜻이므로 위젯을 새로 생성하고 StageSelectWidget에 이를 할당해준 후에 isShow Branch 노드를 실행하러 가야 한다.
• Show Stage Select Widget 함수에 isShow 파라미터 값이 True 라면 👉 스테이지를 선택하는 위젯을 뷰포트에 띄워야 한다. (Add to Viewport)
• Show Stage Select Widget 함수에 isShow 파라미터 값이 False 라면 👉 스테이지를 선택하는 위젯을 뷰포트에서 지워야 한다. (Remove from Parent)

🔔 스테이지 위젯 불러 오기 or 내리기

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

메인 메뉴 위젯에서 Play 버튼을 누르면 스테이지를 선택하는 위젯을 띄우는 “SideScrollGameInstance” 게임 인스턴스 블루프린트 의 함수인 Show Stage Select Widget를 실행시킨다. 스테이지 선택 화면을 띄워야 하므로 입력 파라미터는 IsShow를 True로 넘겨준다. (체크)

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

스테이지 클리어 위젯에서 Close 버튼을 누르면 스테이지를 선택하는 위젯을 화면으로부터 내릴 수 있는 “SideScrollGameInstance” 게임 인스턴스 블루프린트 의 함수인 Show Stage Select Widget를 실행시킨다. 스테이지 선택 화면을 띄워야 하므로 입력 파라미터는 IsShow를 False로 넘겨준다. (체크 해제)

🔔 스테이지 버튼 비활성화/활성화하기

🚩 “SideScrollGameInstance” 게임 인스턴스 블루프린트

• 어떤 스테이지가 클리어 됐는지를 저장하는 ClearStage 변수를 추가한다.
  • 타입은 Integer.
  • 현재까지 클리어한 스테이지의 수를 뜻한다.
    • 5개의 스테이지 선택 버튼을 배열에 넣은 후 인덱스가 ClearStage와 같거나 작은 버튼들만 활성화시킬 것이다.
      • 즉, 클리어한 스테이지만 다시 플레이할 수 있고 아직 클리어 하지 못한 스테이지로 가는 버튼은 선택하지 못 하도록 비활성화

게임 인스턴스 블루프린트 내에서 변수를 추가하면 게임 플레이 하는 내내 끝까지 변수의 수명이 유지가 된다. 이렇게 스테이지 클리어 됐는지를 저장하는 변수는 게임 내내 유지가 되야 하므로 게임 인스턴스 블루프린트에 생성한다.

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

• 5 개의 Stage 선택 버튼을 배열로 관리하기 위해 StageButtonArray라는 배열 변수를 추가
  • 우선 타입을 ‘Button 오브젝트 레퍼런스’로 지정한 후 (단순히 단일 변수 레퍼런스가 될 뿐임)
  • 오른쪽 네모를 클릭하면 단일 변수, 배열, Set, Map 중 어떤 것으로 만들겠냐는 메뉴가 나온다. 배열을 클릭해주면 StageButtonArray는 ‘Button 오브젝트 레퍼런스가 모인 배열’이 된다.

• “SideScrollGameInstance” 게임 인스턴스 블루프린트 의 ClearStage 변수를 가져오려면 “SideScrollGameInstance” 를 참조하는 레퍼런스 변수가 필요하므로 GameInsRef 변수를 추가해 주었다.

• 이 “StageSelect” 위젯이 생성될 때 GameInsRef 변수에 “SideScrollGameInstance” 게임 인스턴스 블루프린트 를 담는다.
  • Contruct 이벤트 👉 해당 위젯이 생성될 때 딱 한번 발생하는 이벤트가. BeginPlay 처럼.
• “StageSelect” 위젯이 만들어질 때 StageButtonArray 배열에 버튼 5 개를 원소로 담는다.
• (인덱스 < ClearStage) 인 원소는 활성화 시킨다.

🔔 스테이지 버튼 이벤트 처리 (스테이지 레벨과 연결)

🚩 “SideScrollGameInstance” 게임 인스턴스 블루프린트

현재 내가 들어가 있는 스테이지가 뭔지 알아야 하므로 이를 저장할 Integer 타입의 EnterStage 변수를 추가한다. 보스가 죽어서 해당 스테이지가 클리어 된 상태에서 EnterStage > ClearStage 조건을 검사한다. 현재 스테이지인 EnterStage을 클리어 상태인데 여태 클리어한 스테이지 수인 ClearStage보다 크다면 이제 ClearStage를 현재의 EnterStage로 업데이트 해주어야 한다. 그래야 이제 다음 스테이지가 활성화 된다. EnterStage의 기본값은 1 로 해준다. 스테이지 1이 시작이므로!

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

• 해당 스테이지 버튼을 누르면
  • “SideScrollGameInstance”의 EnterStage 값을 해당 스테이지로 설정하고
  • 해당 스테이지 레벨을 연다.

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

• 보스가 죽어서 스테이지가 클리어 되면
  • EnterStage > ClearStage 조건을 검사
    • True 면 ClearStage - EnterStage 해준 후 다음으로
    • False 면 그냥 다음으로

그리고 실제로 레벨 5 개를 만들어 주자. Stage 5 까지

---

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

맨 위로 이동하기