UE4 Chapter 10-3. HUD : 보스 HP Bar

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

🚖 보스의 HP Bar UI 만들기

보스에게 가까이 가면 플레이어처럼 우측 상단에 보스의 HP Bar 를 띄우도록 한다. Canvas Panel을 하나 더 추가해서 Canvas Panel 하나만 보이게 하면 보스의 UI 들이 나오게끔 구현할 것이다.

🚩 “GamePlayMain” 위젯 블루프린트(플레이어 Hp Bar 작업했었던) 디자이너 모드

Boss 의 UI를 띄울 CanvasPanel_Boss라는 이름의 Canvas Panel을 기존의 Canvas Panel 자식으로 추가한다. 플레이어의 UI와 똑같이 만들어주고 적절히 배치하고 크기를 조절한다.

• 보스 UI 캔버스 패널은 보스에게 가까이 갔을 때만 띄울 것이다.
  • CanvasPanel_Boss
    • Visibliity 를 hidden 으로 바꾼다.
      • 보스와 가까이 있지 않는 디폴트 상태에선 보스 UI 캔버스는 안보이게 할 것이다.
    • IsVisible(변수인지)를 체크하여 이 캔버스를 참조하는 레퍼런스 변수를 만들어준다.
      • 다른 UI 요소들은 이게 디폴트로 체크가 되어 있는데 캔버스는 체크되어 있지 않다.
      • 이 변수를 통하여 이 캔버스를 보이게끔 켜줄 수 있다.
      • CanvasPanel_Boss를 참조하는 CanvasPanel_Boss 레퍼런스 변수가 생김.

🚕 보스 HP Bar UI 생성 및 띄우기

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

보스의 UI 캔버스를 보이게 하기 위한 함수 Show Boss UI를 만든다. 이 함수의 파라미터는 boolean 타입의 IsShow이다.

• 파라미터가 True면
  • “GamePlayMain” 위젯의 CanvasPanel_Boss를 Visible 보이게 한다.
• 파라미터가 False면
  • “GamePlayMain” 위젯의 CanvasPanel_Boss를 Hidden 보이지 않게 한다.

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

“SideScrollGameInstance” 게임 인스턴스 블루프린트의 Show Boss UI 함수를 호출하기 위하여 “SideScrollGameInstance” 게임 인스턴스 블루프린트 레퍼런스를 먼저 가져와야 한다.

1. Get Game Instance로 “SideScrollGameInstance” 게임 인스턴스 블루프린트로 생성된 오브젝트를 가져온다.
   • 게임 인스턴스는 싱글톤으로 게임 내에 단 하나만 존재하기 때문에 이런 함수로 가져올 수 있는 것!
2. Object로 가져왔으므로 “SideScrollGameInstance”로 형변환한다.
3. SideScrollGameInsRef 변수를 만들어 이에 저장한다.

보스와의 거리가 5미터 이하라면 보스 캔버스 UI를 띄우도록 하기 위하여 SideScrollGameInsRef로부터 Show Boss UI 함수를 호출한다. 파라미터 값은 True 여야 보스 UI가 보일 수 있으므로 Is Show는 체크해준다.

🚕 보스의 이미지

보스 이미지 Image_BossPic에 진짜 보스의 이미지를 설정해줄 것이다.

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

UI 요소의 디테일 패널에서 볼 수 있는 사진 속 각각의 모듈들이 Slate 이다. 이미지 UI 요소엔 이렇게 Brush라는 Slate 가 있다. 이 Brush Slate의 Image에서 이미지 파일을 설정할 수 있기 때문에 따로 Brush Slate 를 만들어서 이 Image_BossPic의 Slate로 적용시켜줄 것이다~!

• Change Boss Image라는 함수를 만든다. 이 함수는 Texture 2D 타입의 Boss Texture 매개 변수를 가지도록 설정해주었다.
  • Texture 2D 타입 변수는 이미지 파일 (.png)를 참조한다.
  • 우선 Brush Slate를 만든다. (Make SlateBrush)
    • Image에 파라미터로 들어온 Boss Texture 매개 변수값을 연결해준다.
  • 방금 만든 이 Brush Slate를 보스 이미지 Image_BossPic의 Brush Slate로 세팅해준다.(Set Brush)

Change Boss Image라는 함수가 실행되면 파라미터로 받은 이미지 파일을 Image_BossPic 이미지 UI 요소의 Brush 슬레이트의 Image에 설정한다.

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

Show Boss UI 함수의 매개 변수를 하나 더 추가해주었다. 이 함수로 이미지 파일 또한 입력을 받을 것이다. 이미지 파일을 받을 수 있는 Texture 2D 타입인 Boss Texture이라는 매개 변수를 추가해주었다. 보스 UI 를 띄워야 할 때면 “GamePlayMain”의 Change Boss Image도 실행시켜 보스의 이미지 UI 요소인 Image_BossPic의 이미지 파일을 입력 받은 Boss Texture로 설정한다.

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

보스랑 거리 5미터 이내시 Show Boss UI 함수 호출할 때

• Texture 2D 타입인 Boss Texture라는 변수를 만들고 기본 값으로 보스의 얼굴 이미지 파일(bosspic.png)을 설정해준다.

• 이 변수 값을 보스랑 거리 5미터 이내시 Show Boss UI 함수 호출할 때 파라미터로 넘겨준다.

• 보스와 500 미터 이내일시
  • 👉 “SideScrollGameInstance”의 ShowBossUI 함수 실행
    • 👉 보스 캔버스 보이게하기 및 “GamePlayMain”의 ChangeBossImage 함수 실행

🚕 HP 를 HP Bar UI 에 적용시키기

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

보스의 HP Bar 값 설정하는 Update Boss HPBar 함수 생성.

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

보스도 데미지를 입을 때 마다(Any Damage) “GamePlayMain”의 Update Boss HPBar 함수를 호출하여 HP Bar를 갱신한다.

---

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

맨 위로 이동하기

UE4 Lesson 1 카테고리 내 다른 글 보러가기