내일배움캠프 언리얼트랙 19일차 - UI

2026. 5. 19. 09:25·내일배움캠프

커피 한잔 하고 구현 시작합니다!

팀프로젝트

< 구현/수정 항목 >

[Refactor] 플레이어 목숨 UI 적용 #36

플레이를 시작하면 목숨 UI를 출력하고 플레이어가 몬스터와 충돌해서 목숨이 깎이면 하트 줄어듭니다.

WBP_HP
WBP_HP의 Graph에 UpdateHP 함수 작성

HP가 1 이상이면 첫번째 하트의 visibility visible로 설정, HP가 1 보다 작다면 hidden으로 설정

HP가 2 이상이면 두번째 하트의 visibility visible로 설정, HP가 2 보다 작다면 hidden으로 설정

HP가 3 이상이면 세번째 하트의 visibility visible로 설정, HP가 3 보다 작다면 hidden으로 설정

이렇게 설정하면 플레이어 목숨이 최대(3개)일 때 하트 3개 다 보이고 목숨이 깍일때마다 우측에서 좌측 방향으로 하트가 하나씩 숨김처리 됩니다.

 

DDE_Player.h

DDE_Player.h에 HP UI 갱신 이벤트(OnHeartChanged)를 선언합니다.

플레이어의 현재 목숨 값을 UI에 전달하기 위한 이벤트입니다.

플레이어의 목숨값이 변경될 때 호출됩니다.

BluprintImplementableEvent를 사용해서 블루프린트(WBP_HP) 에서 UI를 업데이트 할 수 있도록 하였습니다.

DDE_Player.cpp

DDE_Player.cpp의 BeginPlay()에서 최신 목숨 개수를 초기화합니다.

DDE_Player.cpp의 TakeDamage()에도 같은 코드를 추가해서 플레이어가 타격을 입었을때 최신 목숨 개수를 변경한 값을 넣도록 합니다.

BP_DDE_Player에서 OnHeartChanged 이벤트에 Is Valid를 추가해서 HPWidgetRef가 진짜 존재하는지를 확인한 다음, 만약 존재한다면 UpdateHP를 실행합니다.

UpdateHP는 WBP_HP의 함수입니다. UpdateHP의 HP에 CurrentHeart값을 전달합니다.


[Refactor] 타이머/승패 UI 적용 #41

게임 플레이 시 작동할 타이머를 구현합니다.

플레이어의 목숨이 0이 되거나 타이머 시간이 0이 되면 패배, 몬스터를 잡으면 승리합니다.

WBP_Main
재시작 버튼 On Clicked

재시작 버튼을 누르면 Map_Stage01을 열어서 게임을 다시 시작합니다.

종료 버튼 On Clicked

종료 버튼을 누르면 Quit Game을 실행해 게임을 종료합니다.

Tick 이벤트
UpdateRemainingTimer 이벤트

 

Tick이벤트를 사용해 타이머를 작동시킵니다. 00:00형식으로 출력하기 위해 Format Text를 사용합니다.

타이머의 남은 시간이 0이하가 되면 타이머를 00:00으로 설정하고 LoseGame이벤트를 실행합니다.

WinGame Event
LoseGame Event

WinGame 이벤트는 GameStarted를 false로 설정하고 IsWin을 true로 설정합니다. 이후 WBP_Main의 Result 텍스트를 '승리했습니다!'로 설정합니다.

LoseGame 이벤트는 GameStarted를 false로 설정하고 IsWin을 false로 설정합니다. 이후 WBP_Main의 Result 텍스트를 '패배했습니다!'로 설정합니다.

이후 뒷 부분은 공통입니다.

Win/Lose의 공통 부분1
Win/Lose의 공통 부분2

WBP_Main의 Result, Restart, Exit의 visibility를 visible로 설정합니다.

이후 플레이어의 Input을 비활성화해서 플레이어 조작을 못하게합니다.

1초 Delay를 추가해서 플레이어/몬스터의 애니메이션이 전부 동작된 다음에 UI가 출력되게 합니다.

Set Input Mode UI Only를 설정해 입력 모드를 게임 조작 -> UI 조작 전용으로 변경합니다.

이후 Show Mouse Cursor를 true로 설정해 마우스 커서가 보이도록 합니다.

BP_DDE_Player

BP_DDE_Player의 OnHeartChanged의 UpdateHP 노드 바로 뒤에 HP가 0일때에 대한 노드를 추가합니다.

NewHeart <= 0 이 true일 때 LoseGame을 실행하도록 합니다. ( 플레이어 HP <= 0 )

BP_Monster

BP_Monster의 OnMonsterStateChanged 이벤트에서 몬스터의 상태가 Dead 일때 플레이되는 애니메이션 노드 뒤에 사진의 노드를 추가하여 WinGame을 실행하도록 합니다. ( 몬스터 HP <= 0 )


[Feat] 타이틀 화면 제작 #51

타이틀 화면을 제작하고 게임시작, 옵션, 게임종료 등 버튼을 배치한다.

WBP_Title
WBP_Title의 HelpWindow
게임 시작 버튼 OnClicked

게임 시작 버튼을 클릭하면 타이틀화면을 제거하고 StartGame을 실행합니다.

BP_MainGameMode의 StartGame1

StartGame에서는 플레이어의 게임 입력 모드를 활성화하고 메인 HUD(WBP_Main)를 생성합니다.

이후  화면에 HUD를 추가하고 플레이어의 HP UI를 초기화합니다.

BP_MainGameMode의 StartGame2

GameEnded를 false로 설정하고 GameStarted를 true로 설정합니다. TimeRemaning를 120으로 초기화 합니다.

이후 게임의 pause를 비활성화하고 마우스커서를 숨깁니다.

BP_MainGameMode의 BeginPlay
BP_GameInstance의 bRestarting변수

 

BeginPlay에서는 지금 실행이 처음 실행인지 재시작인지 판단합니다. 

GameInstance 가져와서 Restarting 값을 확인합니다. ( 언리얼 에디터에서 변수명 앞의 접두어 b를 생략하여 표시함 )

만약 Restarting값이 true(재시작) 이라면 Restarting을 false로 설정하고 StartGame을 실행합니다.

만약 Restarting값이 false(처음 실행) 이라면 타이틀 UI를 생성하고 게임을 pause시킨 다음 마우스 커서를 표시합니다.

 

  • 처음 실행 → 타이틀 화면 표시
  • Restart 버튼으로 재시작 → 바로 게임 시작

 

게임 종료 버튼 OnClicked

게임 종료 버튼을 누르면 Quit Game을 실행해 게임을 종료합니다.

우측 상단의 ? 아이콘 OnClicked, 도움말 창의 X버튼 OnClicked

도움말 아이콘 버튼을 누르면 HelpOverlay의 visibility를 visible로 변경합니다.

도움말 창의 x버튼을 누르면 HelpOverlay의 visibility를 collapsed로 변경합니다.

 

[Refactor] WBP_Main 수정 #57

다시하기 버튼을 누르면 게임화면으로 돌아가도록 수정한다.

타이틀 화면으로 돌아가는 버튼을 추가한다.

WBP_Main

타이틀로 돌아가기 버튼을 추가합니다.

재시작 버튼 OnClicked

재시작 버튼을 누르면 GameInstance 가져옵니다.

BP_GameInstance로 Cast하고 Restarting을 true로 설정합니다.

이후 맵을 다시 엽니다.

타이틀 화면으로 돌아가기 버튼 OnClicked

타이틀 화면으로 돌아가기 버튼을 누르면 현재 맵을 다시 로드합니다.

'내일배움캠프' 카테고리의 다른 글

내일배움캠프 언리얼트랙 21일차 - 패키징  (0) 2026.05.20
내일배움캠프 언리얼트랙 20일차  (0) 2026.05.19
내일배움캠프 언리얼트랙 18일차 - commit  (0) 2026.05.15
내일배움캠프 언리얼트랙 17일차 - git문제  (0) 2026.05.14
내일배움캠프 언리얼트랙 16일차  (0) 2026.05.13
'내일배움캠프' 카테고리의 다른 글
  • 내일배움캠프 언리얼트랙 21일차 - 패키징
  • 내일배움캠프 언리얼트랙 20일차
  • 내일배움캠프 언리얼트랙 18일차 - commit
  • 내일배움캠프 언리얼트랙 17일차 - git문제
thinklikethink
thinklikethink
생각처럼 개발 공부 블로그입니다.
  • thinklikethink
    생각처럼
    thinklikethink
  • 전체
    오늘
    어제
    • 분류 전체보기 (53) N
      • 사전캠프 (13)
      • 내일배움캠프 (40) N
  • 블로그 메뉴

    • 홈
    • 내일배움캠프
    • 사전캠프
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
thinklikethink
내일배움캠프 언리얼트랙 19일차 - UI
상단으로

티스토리툴바