UI - 체력바 구현

🌝 공지 사항 이 포스트는 인프런의 입문자를 위한 UE5-Part2. 언리얼 엔진 2D 게임 개발 입문 강의를 통해 학습한 내용의 요약입니다. 자세한 내용은 해당 강의를 참고해주세요.

개요

각 액터의 상단에 체력바를 표시하고, 공격을 받으면 체력바가 줄어드는 UI를 구현하고 싶다.

1. User Interface » Widget Blueprint 를 생성한다.
2. widget BP 안에 Progress Bar를 하나 만들고 색깔을 지정한다.
3. 피해를 입는 쪽 로직에 최종 Set Hp 이후에 Progress Bar를 업데이트하는 로직을 추가한다.

1. Widget Blueprint 생성 후 ProgressBar 생성

• Progress Bar는 Detail 패널의 Percent 수치에 따라 움직인다.

2. On Damaged() 에 Progress Bar 관련 로직 추가

1. component에 위젯추가

2. widget component -> Get Widget Object -> Cast to WBP_HpBar 순서로 가져와야 함.

   • 순서대로 현재 BP의 Widget 변수(Component) -> Widget Object 형태 -> 우리가 만든 BP로 캐스팅

   • On Damaged 함수에서 Progress Bar를 연동시키는 경우

     • WBP_HpBar에서 HpBar를 만든 다음, Detail 패널에서 is_Variable을 체크해주어야 다른 BP에서 Get 해서 사용할 수 있다.

     • 이렇게 가져온 Progress Bar의 값을 current Hp / max Hp 로 구해서 넣어주는 방법이 있다.

     • 하지만 애초에 WBP(Widget Blueprint)에서 Bind를 이용하는 방법도 있다.

기타

• Widget Blueprint
  • Designer : UI는 여기에 배치
  • Graph : 로직은 그래프에서 BP로 연결