안녕하세요 이영훈 입니다
이번 시간에 알아볼 내용은 게임오버 처리 입니다
이번 단원에서는 플레이어의 체력을 구현하고
체력이 0이 되면 게임오버 위젯을
화면에 출력하는 방법에 대해 학습하겠습니다
그리고 게임오버 위젯의 버튼 이벤트를
처리하는 방법에 대해 학습하겠습니다
플레이어 체력 관리와 피격 이벤트 처리
게임오버 처리를 위해서는 플레이어 체력을 만들고
그리고 적이 플레이어를 공격하고 체력이 줄어든 다음에
체력이 0이 되면 게임오버 UI가 나오는 형태로 구현하면 될 것 같습니다
자 그래서 먼저 플레이어 체력을 만들어 줄 건데요
플레이어의 헤더 파일로 가서 여기에 체력이라는 변수를 만들겠습니다
int 32로 해주고요, HP라고 할게요
그리고 체력은 최대 체력도 있어야 겠죠
그래서 int 32, MaxHP 3으로 하겠습니다
체력은 MaxHP로 초기화를 해 주도록 하겠습니다
이 두 녀석은 유프로퍼티 속성을 줄게요
이렇게 만들어 주시고요
그 다음에 UI 작업을 먼저 해 볼까요
여기다가 체력 UI를 만들도록 하겠습니다
위젯 블루프린트로 유저 위젯을 상속받기 한 후
WBP 플레이어 HP라고 하겠습니다
플레이어 HP를 열어서 여기에 캔버스를 하나 만들고요
그리고 좌측 상단 여기에 UI를 그릴 거거든요
UI는 일단 프로그레스 바로 할 겁니다
이렇게 배치를 하고요
그리고 HP라고 표현해 줄게요
텍스트를 이렇게 넣어서 '너는 HP야'라고 표현해 보겠습니다
크기를 한 50 정도로 키우고요
이거는 사이즈 투 콘텐트를 체크해서
레터 박스가 딱 맞게 구성을 하도록 하겠습니다
자 그리고 프로그레스 바를 그냥 이렇게 구현해도 되는데
우리가 보통 게임 같은데 보면은 이렇게 구성을 많이 하죠
이렇게 체력 바가 있으면은
예를 들어 이 정도 지금 빨간색으로 채워져 있어요
여기는 이제 백그라운드고
자 그런데 데미지를 입어서 이만큼 줄일 겁니다
자 그러면 이제 색깔을 3단계로 표현을 할 수도 있잖아요
예를 들어서 이제 이거는 빨간색인데
자 여기는 이제 빨간색으로 이렇게 칠하고
여기는 검은색 같은 거라고 해보죠
이렇게 검은색이고
그럼 흰색으로 이렇게 색깔을 칠한 다음에
이 흰색 부분이 이렇게 해가지고
자 여기 있는 녀석이 이렇게 줄어드는 거죠
쑝 줄어들어서 탁 이렇게 맞는
네 이러한 연출 있잖아요
이렇게 제가 표현을 잘 하고 있는지 모르겠는데
자 이렇게 해서 탁 이렇게 줄어드는 개념이죠
그러면은 데미지를 입을 때마다 먼저 빨간색이 줄어들고
흰색이 쭉 따라와서 탁 닿는 그런 식의 어떤 연출
그런 걸 많이 하거든요
자 그래서 간단하게 한번 만들어 보도록 할게요 이런 식으로
자 그러면 체력 게이지를 처리를 할 건데
근데 3개의 색깔을 칠하려면
이게 이 프로그래스바는 2개 거든요
자 보시면은 여기 스타일이라고 있는데
펼쳐보시면은 백그라운드와 그 다음에 필 이미지
2개 이미지로 이렇게 되어 있습니다
자 이렇게 보통 2개로 배치가 되어 있고요
자 그래서 이거를 퍼센트를 이렇게 올려 보면은
이렇게 칠해지는 개념입니다
자 그래서 이거를 하나 더 만들어서 겹쳐놓을게요
자 그러면은 이거를 겹칠 건데
겹치려면은 여기 보면은 패널 중에 오버레이라는 녀석이 있는데요
자 이걸 이용하면 좀 간단하게 할 수가 있어요
자 오버레이를 하나 넣은 다음에
거기에 이 프로그래스바를 이렇게 넣어줍니다
자 그러면은 사이즈가 좀 안맞죠
그래서 이거를 이렇게 잠깐 펼치고요
자 프로그래스바는 여기 오버레이 안에 꽉 채우도록 할게요
상단에 보시면 여기 채우는 메뉴가 있는데
2개를 이렇게 눌러서 꽉 채우도록 하겠습니다
자 오버레이를 이렇게 해주고요
조금 더 길게 할까요
자 그리고 여기서 프로그래스바를 하나 더
Ctrl-D 눌러서 복제를 해서 겹쳐놓겠습니다
자 그 다음에 이거는 이제 앞쪽에 있는 프로그래스바고요
이거는 뒤쪽에 있는 거예요
그럼 앞쪽에도 이 백그라운드 이미지를 가지고 있거든요
자 그래서 앞쪽에 있는 녀석은
백그라운드 컬러를 투명으로 해버리겠습니다
그래서 여기서 이 색을 이렇게 알파 값을 0으로 빼겠습니다
자 그리고 여기 백그라운드 뒤에 있는 거
여기에 백그라운드 색을 좀 다른 색으로 해볼게요
좀 어두운 계열로 할 거고요
이런 느낌으로
어두운 회색 톤으로 이렇게 처리를 할게요
자 그리고 이거는 퍼센티지를 조금 더 올려보면 이렇게 되죠
자 지금 앞에 전경색이 똑같아서 그런데
이 색깔을 좀 바꿔볼게요
=뒤쪽에 있는 색은 이거를 흰색으로 하겠습니다
자 이렇게 하면 흰색이 되죠
그리고 체력은 저는 이제 앞쪽에 있는 프로그래스바의 색깔은
붉은색 계열로 해서 체력을 표현해 보도록 할게요
자 이렇게 3가지 3단계 색을 표현해 보도록 할 거고요
그래서 이 흰색이 이 빨간색 끝선에 쭉 맞게 쭉 따라오는 형태로
이렇게 구현해 보도록 하겠습니다
자 그러면 이거를 처리하기 위해서는 코딩을 해야 되는데요
지금 유저 위젯이니까 우리 위젯을 하나 만들어서
이 블루프린트 위젯의 붐으로 상속받게 한 후에
처리를 해 보도록 할게요
자 그러면 이거 이름을 이거는 바니까요
HP바니까 이거는 백이고요
그 다음에 이거는 HP바라고 하겠습니다
이렇게 구성을 해 줄게요
컴파일하고 세이브 해 주시고요
그러면은 클래스를 하나 만들게요
C++ 클래스를 만들 거고요
올 클래스스를 선택한 후에 유저 위젯
이렇게 상속받게 하겠습니다
자 이거는 플레이어의 HP UI니까요
자 이렇게 구성을 해 줄게요
자 여기죠
플레이어의 HP UI의 퍼블릭이라고 만들어 주시고
그 다음에 여기에서 하고 싶은거는
일단 저 프로그레스 바, 바죠
바 두개를 일단 바인드를 하고 싶어요
자 그래서 유 프로퍼티
에디트 애니웨어 한 다음에 메타 라고 하시고
그 다음에 괄호를 꼭 하신 다음에
이 안에다가 바인드 위젯이라고 작성을 합니다
자 클래스라고 하고요
저 녀석은 유 프로그래스바 이거든요
여기 보시면은 저 UI의 이름은
저 위젯이죠
위젯의 이름은 프로그레스 바 라고 되어있습니다
자 이걸 클릭해 보시면은 더 확실하게 알 수 있죠
자 이렇게 유 프로그래스 바 라고 되어있습니다
자 이거를 여기다가 선언을 해 줄게요
자 이렇게 해서 HPBar Back 이라고 하나 만들었고요
그 다음에 복사해 가지고 HP바라고 하겠습니다
여기 있는 이름과 동일하게 해 주시면 되겠죠
그리고 여기다가 두 개의 함수를 구성을 할 건데
하나는 틱 함수를 하나 만들 거에요
자 그래서 틱이 하나 있어야 되고요
그리고 체력 정보를 얻어서
그거를 이 프로그래스 Bar UI로 표현을 해야겠죠
자 그러니까 그 정보를 세팅할 SetHP라는
함수를 이렇게 구성을 해 줄게요
자 틱은요, 여기 보면 버추얼 보이드 네이티브 틱 이라는 게 있습니다
이런 함수가 있고요
여기 탭 누르면은 이렇게 구성이 되죠
자 이걸 잘 못 찾으시겠으면은
그대로 여기 유저 위젯 으로 컨트롤 누르고 클릭하신 다음에
여기 가서 네이티브 틱 을 검색을 해보시면 이렇게 있으니까요
이것을 그대로 복제해서
들어오신 후에 여기다 이렇게 작성해 주셔도 되겠습니다
이렇게 작성하시고 뒤에는 오버라이드라고 써주시면 되겠죠
그리고 함수도 만들게요
함수는 SetHP니까요, 보이드 SetHP라는 함수를 만들 거고요
그리고 여기에는 두 개의 정보를 받을 거에요
여기에서 int 32로 현재 HP를 받을 거고
int 32로 MaxHP를 받겠습니다
왜 두 개를 받는 이유는 퍼센티지를 만들고 싶어요
여기 이 프로그래스바 는 퍼센티지를 넣어야 되거든요
그래서 현재 값과 최대 값 두 개를 받으면 퍼센트를 만들 수 있잖아요
자 그래서 이렇게 두 개의 함수를 구성을 했구요
자 구현을 해 주겠습니다
자 먼저 SetHP는 일단 HP바를 설정할 거에요
백이 아니고 HP바를 이것에 셋퍼센트를 해주도록 할 건데요
자 그러면 float per는 curHP 나누기 maxHP 하면 되죠
자 근데 문제는 이게 둘 다 integer이기 때문에
그래서 정수 나누기 정수는 소수점을 버림하거든요
자 그러니까 예를 들어서 뭐 0.5 그리고 1 이다
아니면 뭐 이게 int죠
10 이게 5, 10이다 그러면은
10을 5로 나누면 0.5 잖아요
그런데 int로 나눠 버리면 0이 되어버리거든요
그래서 이것을 하나라도 플로트로 이렇게 / 캐스팅을 해 주시면
결과가 플로트로 이렇게 나오게 됩니다
그래서 이렇게 구성을 하고 여기다가 퍼센트를 넣어 주도록 할게요
이걸 사용하려면 헤더를 추가를 해야겠죠
이렇게 인클루드 프로그래스바라는 헤더를 이렇게 추가하겠습니다
ProgressBar 헤더 추가
자 이렇게 작성을 해주고요
그 다음에 네이티브틱에서는 HP 100 있죠
HP바의 백이 있는데요
이 백의 색을 흰색이잖아요
흰색이 HP바의 퍼센트를 쭉 따라오게 만들고 싶어요
자 이것을 처리하기 위해서 우리가 또 공식을 하나 알 필요가 있는데
굉장히 많이 사용되는 공식 중에 linear interpolation 이라는 게 있습니다
그게 뭐냐면 선형보간 이라고 해요
linear interpolation이라고 하는데 줄여서 '럽'이라고 얘기를 합니다
들어보신 분도 있고 처음 듣는 분도 있을텐데
자 이거는요 간단하게 말하면
이렇게 매개변수를 3개를 받아요
a, b, t 혹은 알파 이렇게 얘기를 하는데
이렇게 3개의 값을 받거든요
자 a는 시작이고 b는 끝이라고 보시면 돼요
그 t는 0에서 1 사이 값을 갖습니다
예를 들어서 이걸 선이라고 한다면 이런 선이 있겠죠
자 여기서부터 이렇게 선이 있어요
자 이렇게 생긴 선이 있는데 여기가 a고 여기가 b라는 거죠
자 그러면 여기 끝에 있는 t는 뭐냐면
이건 플루트 타입인데 0에서 1 사이 값을 가지는 그러한 값입니다
예를 들어서 이걸 0이라고 한다면 t를 그러면 a를 반환하게 돼요
자 a 자체를 반환하고 1이라면 b를 반환하고
0.5라면 a와 b의 중간 지점 여기를 반환하는 그런 개념입니다
그래서 보간하는 거예요
자 선형보간 이라고 하고요
자 그러면 이렇게 사용을 t를 움직이는 방법이 하나 있고
럽를 사용할 때는 이렇게 하는 방법도 있습니다
자 이렇게 했을 때 이렇게 할 수가 있어요
자 원래는 a, b 한 다음에 이걸 받아서 어떤 값을 쓰면 되는데
이거를 다시 a에다 덮어 쓰고요
이 t 값을 이렇게 조정하는 것이 아니라 t 는 조정하지 않고
0.1 이런 식으로 딱 고정해 놓는 거죠
자 그럼 어떻게 되냐면 처음에 럽이 한번 호출되잖아요
그러면 a와 b의 10퍼센트의 위치인 한 이 정도 되겠죠
여기에 a를 새로 갖다 놓습니다
자 a의 위치가 움직이는 거죠
자 그 다음에 한번 또 호출하면은 여기에서부터 여기까지 10퍼센트
한 이 정도 되겠죠
자 여기다가 a를 갖다 놓습니다
이걸 계속 반복하는 거예요
그러면은 이렇게 또 계속 이쪽으로 진행을 하겠죠
예를 들어 여기까지 왔어요
그러면은 여기서 여기까지 10퍼센트만 이 정도 되겠죠
처음에는 이렇게 구간이 큰데
b에 수렴할수록, b에 가까워질수록 굉장히 작아진다 라고 생각하시면 돼요
그래서 그 움직임이 슝 하고 천천히 도달하는 거죠
처음에 크게 움직이다가 도착 위치에서는 굉장히 작게 움직이는
그러한 어떤 형태를 우리가 구현할 수가 있는데
이걸 한번 사용해서 저기 있는
지금 하려는 게 이거잖아요 그렇죠?
그래서 이렇게 있는데
이렇게 여기잖아요
여기가 이쪽으로 슝 오는데
슝 해서 슝 탁 도착하는
그러한 어떤 연출을 한번 해보려고 하는 거예요
한번 해볼게요
그러면 일단 럽 이라는 걸 사용할 건데
이거는 플로트 타입으로 하고 있어요
이 값이 플로트니까
Fmath에 보면 럽 이라고 있습니다
자 럽 이라는 함수가 있구요
자 이걸 이용해서 처리를 할 수 있고
여기에는 a, b 그리고 알파 이렇게 들어갑니다
자 그럼 저는 알파를 고정한다고 했어요
저는 0.1 이렇게 고정하고 싶은데
이렇게 하는 것보다는 이것도 움직임이니까요
이 델타 타임을 이용해서 제어를 할까 해요
그러면 0.1 이라는 것은 실제로는 10분의 1 이잖아요
그쵸?
그러면은 보통 우리가 60분의 1 이거든요
델타 타임이?
자 여기다가 곱하기 6 하면 60분의 6 이렇게 되니까
이게 10분의 1이 되겠죠
그러니까 델타 타임에다가 곱하기 6 하면은
대략적으로 10분의 1 정도 됩니다
자 이렇게 해주고요
그 다음에 a와 b를 넣어야 될 텐데
자 a는 플로트 a 라고 할까요
자 이거는 현재 값이죠, 현재 값
현재 값은 이 백에 있는 값이에요
그래서 겟 퍼센트해서 가져오고요
그리고 목표 값은 이거죠
HP바의 플로트 b는 HP바의 겟 퍼센트가 됩니다
자 그럼 a, b 이렇게 넣으면 되겠죠
자 이거를 다시 a에다 담을 거에요
자 그리고 이 a 값을 다시
이 HB100의 퍼센트 값으로 다시 돌려서 넣어 주겠습니다
이렇게 셋 퍼센트 이렇게 해서
a를 다시 넣어 주도록 할게요
자 이렇게 하면은 보간한 다음에
그 값을 받은 다음에
이 값을 다시 여기다 반영하는 거죠
자 이렇게 선형 보간을 이용해서 이런 처리를 할 수가 있습니다
그럼 이렇게 진행을 하고요
그럼 이 UI를 화면에 나오게 해야겠죠
그래서 플레이어로 가서
플레이어의 UI를 붙이는 행위를 하도록 하겠습니다
여기다가 유 프로퍼티 에디트 애니웨어 해주시고요
그 다음에 T 서브 클래스 오브로
클래스 유 유저 위젯
자 여기는 플레이어의 HPUI죠
HPUI 팩토리라고 하겠습니다
그럼 이거를 만들어서 계속 사용해야 되니까요
이거를 클래스 하고요
우리가 만들었던 UI 이름이 플레이어 HPUI거든요
유 플레이어 HPUI 이렇게 되겠죠
여기 포인터로 HPUI라고 하겠습니다
이렇게 구성을 해 주고요
이걸 만들어서 붙여서 가지고 있으면 되겠죠
자 그러면 플레이어의 비긴플레이로 가서
이곳에서 작업을 해 줄게요
제일 여기 플레이어 컨트롤러를 가져와서
처리한 곳 바로 밑에다가 해 주도록 할게요
여기 크리에이트 위젯을 하고요
자 이렇게 하고
HPUI 팩토리를 넣어줍니다 이렇게
자 그럼 이거를 얘가 받아야겠죠
HPUI 받아주고요
캐스팅해서 가지고 있겠습니다
유 플레이어 HPUI 이렇게 캐스팅해서 가지고 있을게요
이걸 가지고 있으려면 헤더 추가를 이렇게 해 줘야겠죠
상단에 헤더를 이렇게 추가를 해 주도록 하겠습니다
그리고 화면을 일단 붙일게요
이렇게 해서 에드 투 뷰포트 이렇게 붙여주고요
자 그 다음에 HPUI에 SetHP 해서
체력과, 현재 체력과 맥스 체력을 넣어 주도록 할게요
하는 김에 현재 체력에도 맥스를
초기화해 주는 일도 여기서 해 주도록 할게요
그러면 이제 언리얼로 와서
플레이어한테 체력 게이지를 넣어 주고요
컴파일 한 다음에
자 그러면 여기 있죠
여기다가 WVP 플레이어 HP 이렇게 넣어 주도록 할게요
자 컴파일 하고 실행해 볼까요
오류가 났는데요
85라인에서 오류가 났습니다
플레이어 85라인이면은 여기인데요
이게 제대로 만들어지지 못했다고 이렇게 나오네요
다시 한번 껐다가 다시 한번 해 볼게요
자 컴파일 하고요
여기를 런타임 디버깅 해서 볼게요
자 실행합니다
F5로 실행했어요
다시 플레이어를 열고요
자 여기 잘 들어갔는지 확인해 볼게요
여기에 팩토리는 잘 채워져 있거든요
다시 한번 실행해 보겠습니다
이쪽으로 와서 여기는 채워져 있고
이렇게 보면 여기가 널이네요
아 그러면 이런 경우에는
UI의 부모를 아직 교체를 안 한 거죠
팩토리는 존재하는데
이렇게 캐스팅해서 실패했다는 거는
우리가 생각해 볼 수 있는 거죠
자 그러면 다시 한번 실행해서
HPUI의 부모 클래스를 교체를 해 주겠습니다
HP 플레이어, HP 이거 교체 안 했죠
유저 위젯이니까
자 이것을 여기서 리페어런트 블루프린트
이렇게 해서 플레이어 HP UI 이걸로 교체를 해 줄게요
자 그리고 바인드된 걸 보면은 잘 돼 있죠
자 컴파일 해주고요
다시 한번 실행해 보면 UI가 잘 나오는 걸 볼 수 있죠
자 그리고 보면은 에너미가 공격을 계속 반복적으로 하지 않고요
한 번만 하거든요
이것도 뭔가 작업하다가 우리가 좀 놓친 부분이 있는 것 같습니다
에너미 FSM으로 가서 여기를 보면은
아 여기인 것 같아요
공격 동작이 끝났을 때
이거는 이제 공격을 재시도 해야 되잖아요
근데 이거는 트루를 해 줘야지 공격을 하는 거잖아요
폴스로 하면 더 이상 공격하지 않고 대기해라
이런 뜻이니까요
이제 공격을 다시 해야 되니까
트루라고 이렇게 바꿔줘야 될 것 같습니다
그러면 다시 컴파일 하고요
실행해서 가까이 가볼게요
자 이제 공격을 반복적으로 하는 걸 볼 수 있고
도망가면 다시 쫓아오고 공격하고
이제 정상적으로 동작을 하는 것 같습니다
자 그러면 에너미가 플레이어한테 공격을 해야겠죠
피격 처리를 해야 되는데
자 그러면 주인공 쪽에다가
피격에 대한 처리를 하는 함수를 만들어야겠죠
그래서 여기다가 보이드 테이크 데미지라는 함수를 하나 만들어줄게요
네 이렇게
자 이거는 온 테이크 라고 그럴까요, 마이 온 테이크
온 마이 테이크 이렇게 할게요
온 마이 테이크 데미지
자 데미지는 일단 무조건 1점만 받도록 하겠습니다
자 이렇게 해서 구현부를 이렇게 만들어 주시고요
그리고 이제 구현을 해야겠죠
자 이쪽으로 와서
일단 여기에는 체력을 1 감소하고 싶다
자 그리고 만약에 체력이 0 이하라면
게임오버 처리를 하고 싶다
자 이렇게 해야 되고요
그리고 이를 감소하면은 UI도 같이 해야겠죠
UI에도 반영하고 싶다
이런 일을 하고 싶습니다
한 개씩 해볼게요
자 체력을 일단 감소를 합시다
체력은 HP 하나씩 감소를 시켜주고요
UI에 반영하는 것은 이렇게 하는 거죠
HPUI
여기에 보면은 SetHP가 있죠
여기다가 HP와 maxHP를 이렇게 넣어주면 될 것 같습니다
자 그리고 if
만약에 저 HP가 0 이하예요
그러면 게임오버 처리를 하고 싶고요
일단 게임오버 처리는 일단 일시정지를 할 겁니다
그리고 UI를 만들어서 화면에 탁 출력하는 일을 할 거예요
그래서 일시정지를 하기 위해서 이걸 처리하려면
플레이어 컨트롤러가 있어야겠죠
자 그래서 오토 피시는 겟월드에서 가져올게요
여기에서 겟 퍼스트 플레이어 컨트롤러를 가져옵니다
자 그리고 플레이어 컨트롤러를 가지고
Set Pause를 시켜줄게요
자 그리고 우리 슈팅 할 때도 잠깐 했었는데
인풋모드라는 개념이 있고
마우스 커서를 보였다 안 보였다 이렇게 제어를 할 수가 있잖아요
자 여기에도 그게 좀 필요할 것 같아요
게임오버 같은 경우에는 마우스가 이렇게 보여야 되니까요
자 그래서 일단은 여기다가 처리를 해볼까요
플레이어 컨트롤러의 Set Show Mouse Cursor에서 트루 해주고요
그 다음에 플레이어 컨트롤러의 인풋 모드를
셋 인풋 모드죠
자 이거를 F 인풋 모드에 UI 온니로 이렇게 해주겠습니다
자 그럼 반대로 처음에 게임 시작할 때는
이걸 다 반대로 해놔야겠죠
그리고 여기에서 이제 게임오버 처리니까
여기에서 게임오버 UI를 생성해서 화면에 보이게 하고싶다
자 이걸 해야 될 것 같아요
일단은 이거를 반대로 처리하는 것도 한번 먼저 현행으로 해놓고
이거 작업을 추가로 할게요
자 이쪽으로 와보시면 비긴플레이가 있죠
비긴플레이에서 이미 플레이어 컨트롤러 이렇게 가져오고 있네요
자 여기에서 같이 처리를 해주도록 할게요
자 그러면 여기다가 이렇게 붙여서
이거는 굳이 다시 가져올 필요 없겠죠
이렇게 가져온 다음에
자 포즈는 하지 않을 거고요
폴스
그 다음에 커서는 안 보이게 할 거고요
그리고 이거는 게임 온니로 하겠습니다
그럼 처음에 시작하면은 이제 잘 진행이 되다가
게임오버가 되면 UI 온니로 바뀌고
이제 거기서 다시 재시작하거나 그러면 다시 이게 불리겠죠
그러면은 다시 세팅이 되는 이제 그러한 구조로 구성을 해주겠습니다
게임오버 처리
자 그럼 게임오버 UI가 나오려면 이제 구성을 먼저 해야겠죠
게임오버 UI를 만들어야겠죠
자 그래서 헤더로 와서
게임오버 UI를 똑같이 이 형태로 하나 더 만들어줄게요
자 이렇게 해서 이거는 게임오버 팩토리라고 하겠습니다
이렇게 게임오버 UI 팩토리를 하나 만들어주고요
이쪽으로 와서 여기서 그걸 생성해 줄게요
여기도 크리에이트 위젯 하고요
겟월드 넣고요
그 다음에 여기다가 게임오버 UI 팩토리를 넣어줍니다
자 이거는 오토를 해서 UI는 처리할게요
자 일단은 버튼 처리는 이번에는 블루프린트 상에서 한번 해볼까 해요
자 이렇게 UI를 만든 후에 이거를 뷰포트에 붙여야겠죠
자 UI에서 에드 투 뷰포트 이렇게 붙여주시고요
자 그러면 다시 이쪽으로 이동해서
게임오버 UI도 만들도록 할게요
유저인 인터페이스에서 위젯 블루프린트
자 유저 위젯이라고 하고 WBP
게임오버라고 하겠습니다
이렇게 해서 구성을 해줄 거고요
여기 캔버스 패널을 넣고
그리고 글씨를 넣어야겠죠
이렇게 해서 저는 이것도 센터를 기준으로 할게요
자 텍스트를 하나 넣습니다
이건 게임오버라고 할 거고요
글씨 크기는 한 150 정도로 할게요
자 이것도 사이즈 투 콘텐트로 핏을 맞춰주고요
자 이거는 일단 센터에 놓기 위해서 0.5
이렇게 하고 센터 이렇게 놓고
자 이거는 0이라고 하겠습니다
조금 위로 올리고요
색상도 여러분도 원하시는 색으로
저는 게임오버니까 약간 노란색 계열로 할게요
자 그리고 버튼도 이렇게 만들어주면 되겠죠
여기다가 버튼을 하나 놓고요
좀 큼지막하게 이렇게 넣겠습니다
자 이것도 센터에다 놓고요
텍스트도 넣어줍니다
자 이거는 이제 재시작이라고 할 거고
이거는 재시작이라고 할게요
리스타트
자 큼지막하게 써주겠습니다
그러면 하나 더 만들어줘야겠죠
Ctrl-D 해서 이거는 이제 종료
자 이렇게 이름을 지어줄게요
이렇게 구성을 하고요
이거는 리스타트고요
이거는 종료입니다
자 그리고 백그라운드도 하나 깔아줄 건데
이번에는 블러라는 게 있어요
백그라운드 블러라고 하는데
이렇게 작성을 합니다
블러는 이렇게 해서 넣어준 다음에
제일 위쪽에다가 배치를 하겠습니다 이렇게
자 그리고 이거는 전체를 다 세팅하고요
자 그리고 이거는 다 0으로 해주시면은 꽉 채워줍니다
자 그리고 여기 블러 스트렌스가 있는데
이거 값을 이렇게 올리시면은 뒤에가 이렇게 뿌얘집니다
너무 많이 올리시면은 너무 뿌옇고요
적당한 값으로 저는 한 5 정도만 넣겠습니다
5도 좀 높은 것 같긴 해요
사실 이 블러라는 거는 이미지 픽셀이잖아요
우리가 화면에 보시면은
지금 모니터 같은 데 보면
이게 점점점 하나하나들이 픽셀이라고 합니다
자 픽셀인데 이 픽셀 정보들을 연산을 하는 거예요
그러면은 좌측 상단부터 쭉 있을 텐데
픽셀은 결국은 이렇게 사각형 형태로 되어 있습니다
그림을 좀 잘 못 그렸는데 다시 그릴게요
자 이렇게 픽셀이 있으면
이거를 9개 픽셀이 있다고 해 볼게요
현재 이 픽셀이 현재 계산을 하는데
순서를 쭉 해 오는데
만약 현재 여기를 계산할 거예요
그러면은 어떻게 계산하는 거냐면
여기가 이제 다 색깔이 있을 거 아닙니까
그러면 RGB 색상이 있을 거예요
레드 그린 블루죠
그러면 RGB 색을 전부 다 더합니다
그러니까 R색끼리 더하고 G색
그 다음에 B색끼리 다 더합니다
그리고 이거를 평균을 내요 에버리지로
그 색을 여기다가 표현하는 거예요
사실 그 정확하게 평균이라기 보다는 그 농도가 있는데
그 농도가 바로 스트랜스가 된다고 보시면 돼요
그래서 뿌옇게 되는 그러한 어떤 알고리즘이거든요
자 그래서 이제 블러라는 건 이렇게 많이 합니다
제가 실무 했을 때도 이 블러를 아티스트들이 굉장히 좋아해요
그래서 꼭 블러를 넣어서 구성을 해달라고 했던 그런 기억이 있네요
자 그래서 블러로 이렇게 UI를 구성해 보도록 할게요
그리고 이거를 버튼을 눌렀을 때 이 동작을 하게 할 건데
색깔도 좀 줄까요
이거 너무 색이 리스타트니까 약간 푸릇푸릇하게 하고요
종료는 약간 붉은 계열로 이런 식으로 해줄게요
자 그럼 이거를 버튼 눌렀을 때 버튼 처리를 할 건데
이렇게 보시면은 버튼 이벤트를 넣을 수가 없어요
왜냐면은 이 버튼을 이벤트를 추가하려면
여기 이즈 베리어블 체크를 해야 됩니다
이걸 체크하셔야지 이렇게 이벤트를 추가를 할 수 있어요
이것도 마찬가지구요
자 그럼 하나씩 넣어 보도록 할게요
클릭하면 이렇게 되구요
디자인으로 와서 퀵을 선택하고
온 클릭 이렇게 하시면 이벤트가 이렇게 배치가 됩니다
자 그러면 여기 이제 재시작을 먼저 해 볼게요
재시작은 오픈 레벨 해서 현재 레벨을 다시 오픈할 거구요
그럼 여기 이름을 넣어야 되는데
이름은 커렌트 레벨 네임
이렇게 보시면 이런 누드가 있습니다
겟 커렌트 레벨 네임 이라고 가져올 수 있구요
이 이름을 여기다가 넣어 주시면은
이렇게 변환하는 누드도 생기죠
이렇게 해서 FString인데 FName으로 변환해서
이렇게 넣어 줄 수 있습니다
자 그럼 종료도 해 볼게요
종료도 큇 이라고 보시면 큇 게임이 있어요
자 이걸 클릭하시고
여기는 딱히 안 건드려도 되겠죠
종료할 거니까
자 이거에 대한 설명을 저번에 한번 했으니까요
자 이렇게 구성을 해 주도록 할게요
자 그러면 이제 플레이어 쪽에다가 전 UI를 나오도록 배치를 해야겠죠
이렇게 해서 컴파일을 한번 하고요
게임을 할 때 이렇게 만들어서 붙였으니까요
플레이어에서
아 이거 아니죠 주인공
자 플레이어의 제일 밑에 보면 있겠죠
여기에다가 게임 오브 UI도 이렇게 배치를 해 주도록 하겠습니다
자 그럼 실행을 해보면 이렇게 되구요
자 에너미가 플레이어를 때리면은
아 이거 처리를 해 줘야죠
그러면은 이제 실제로 에너미가 플레이어를 이렇게 때렸을 때
이 On My Take Damage 함수가 호출되면은 이제 되겠죠
자 이거를 처리하기 위해서
FSM으로 갑니다
자 여기에서 위로 올려 보면은 히트가 있겠죠
바로 위에 있네요
자 히트에서 우리가 로그만 출력했는데
여기에서 이제 주인공 타겟이죠
타겟이 지금 자료용이 어떻게 되어 있나요
ATPS 플레이어니까 바로 사용할 수 있을 것 같아요
자 여기에서 On My Take Damage 함수를 이렇게 호출해 주도록 하겠습니다
자 저장하고 다시 컴파일 하고요
자 한번 실행해 볼게요
자 그러면 데미지가 팍팍 들어가죠
그리고 흰색도 쭉 따라오는 거 보여주시구요
그리고 게임오버가 되면 이렇게 블러 처리가 되고
화면에 UI가 나오죠
재시작을 누르면 다시 재시작할 수 있구요
같은 방식으로
네 종료도 됩니다
자 그러면 방금 만든 게임오버 UI를
C++로 다시 만들어서 처리를 하고 마무리를 해 볼게요
자 툴스에서
여기서 유저 위젯을 상속 받습니다
이렇게 받구요
넥스트 합니다
이번에는 게임오버 UI 라고 할게요
구성이 되었고요
그러면 기존에 블루프린트를 했던 내용은 일단 제거하도록 할게요
이거는 삭제를 하고요
디자인으로 와서
여기 있는 이름 버튼 리스타트, 퀵 이 두개를
이제 바인드를 해주면 되겠죠
부문도 바꾸고
자 다시 이쪽으로 와서
자 게임오버 헤더로 갑니다
자 이쪽으로 와서
퍼블릭이라고 하고요
자 유프로퍼티
에디트 애니웨어
자 그리고 메타라고 하고
바인드 위젯 해줄게요
자 그리고 저거 버튼이죠
클래스 유 버튼 포인터
그 다음에 이름이 똑같아야 되죠
버튼 리스타트
똑같이 하나 더 만들고요
자 버튼 종료
이렇게 처리를 해주시구요
그 다음에 이거를 버튼을 연결을 해줘야 되죠
그러면은 함수도 두 개 있어야겠네요
그래서 두 개 함수인
자 보이드 온 클릭
자 온 클릭 리스타트
이거는 항상 유 펑션이 꼭 들어가야 됩니다
왜냐면은 이렇게 바인드 해줄 거잖아요
자 에드 다이나믹 해서 이 델리게이트 에다가
이거 등록할 거기 때문에
이거는 유 펑션 매크로를 꼭 적어줘야 됩니다
그렇게 안하면은 제대로 호출이 되지 않을 거에요
똑같이 유 펑션이라고 하고요
보이드 온 클릭, 종료 퀵
이렇게 만들어 줄게요
자 그러면 버튼과 함수를 만들었으니
이것을 연결할 수 있는 시점이 있어야겠죠
그래서 이 UI가 생성될 때
자 그때는 virtual void native construct라는 함수에서
우리가 처리를 했었던 것 기억나시나요
자 일단 오버라이드 키워드 주고요
이렇게 해서 Alt 엔터
구현부를 다 만들어 주도록 하겠습니다
자 그리고요
이 함수로 와서 연결을 해줄게요
여기서는 버튼을 함수에 연결하고 싶다
버튼의 함수죠
버튼의 함수를 연결하고 싶다
이렇게 작성해야겠죠
자 그러면 버튼 리스타트에다가
에드 다이나믹 아 이게 아니죠
자 여기 보면 온클릭이 있죠
온 클릭 뒤에 에드 다이나믹 이라고 쓰고
그 다음에 디스 이렇게 넣었죠
자 그 다음에 이제 펑션 네임 부분에다가
우리가 호출하고 싶은 함수의 주소를 이렇게 넣어 주면 됩니다
리스타트니까 이 함수를 연결해 줄게요
자 이렇게 해서 리스타트 라고 합니다
자 이걸 사용하려면 버튼이라는 헤더를 꼭 추가해야겠죠
이렇게 이거를 좀 수정을 해 줄게요
이렇게 쓰고 이렇게 하면 되겠죠
자 그 다음에 마찬가지 복사를 하고요
종료도 똑같이 연결합니다
온 클릭 큇 이렇게 연결해 주시고요
자 그 다음에 리스타트와 큇 이렇게 있는데
이거는 저번에도 보았지만 여기에서 우리 지웠죠
근데 여기 보면은 더블 클릭해 보면 이렇게 나오죠 심볼로
자 오픈레벨 이런 것도 나옵니다
자 얘도 있네요 전부 다 있네요
자 그래서 이 함수들을 이용하면 될 것 같고요
종료 같은 경우에는 키스멧 시스템 라이브러리에 있는
이 함수를 이용하면 될 것 같습니다
자 이것부터 한번 해볼까요
이렇게 해서 이렇게 붙여 놓아 보면 이렇게 생겼습니다
이것도 마찬가지 헤더를 이렇게 추가를 해 주셔야 되고요
키스멧부터 하면 되겠죠
그 다음에 여기다가 겟 월드 넣고요
그리고 겟 월드를 넣고
여기서는 겟 퍼스트 플레이어 컨트롤러를 가져옵니다
그 다음에 여기는 이
네 이렇게 해서 큇 종료를 이렇게 넣어 주시면 되고요
그 다음에 마지막 인자 값은 폴스 이렇게 넣겠습니다
이렇게 하면은 종료를 할 수가 있죠
그리고 재시작도 해줄게요 이렇게 해서
재시작은 여기 보면은 오픈 레벨
게임 플레이 스태틱스를 이용했네요
자 이쪽으로 와서 이거를 이용해서
오픈 레벨 이렇게 해주면 됩니다
여기 이름을 넣게 되어있고
먼저 월드 컨텍스트를 넣으니까
겟 월드 이렇게 넣어 주시고요
자 그 다음에 이름을 넣으면 될 것 같은데요
이것도 마찬가지로 헤더를 추가를 해 주셔야겠죠
이렇게 해서 헤더 추가를 하겠습니다
여기까지 이렇게 해주시면 되고요
자 그러면 이름을 현재 이름을 가져올게요
이렇게 해서 커렌트 레벨 네임 이렇게 가져옵니다
자 여기도 월드를 넣고요
자 이것은 스트링이고 여기에는 F-네임이 들어가죠
자 그래서 fstring으로 레벨의 네임 이렇게 가져오고요
그 다음에 이것을 F-네임으로 캐스팅해서 넣어주면 됩니다
F-네임 이렇게 쓰고요
자 이렇게 작성해 주시면은 넣을 수 있습니다
이거는 다시 삭제를 하고요
자 컴파일을 해줍니다
한번 껐다가 다시 한번 컴파일 할게요
자 그러면 다시 실행해서 결과를 볼게요
자 잘 되구요
네 게임오버 잘 나오고
동작을 하지 않네요
자 잠깐만 봅시다
아 부모를 안 바꾼 것 같아요 또
네 여기서 또 부모를 안 바꿨네요
자 이렇게 해서 리페어런트
이거는 게임오버죠
게임오버 UI로 이렇게 부모를 교체를 합니다
자 그러면 잘 연결이 되구요
자 컴파일하고 다시 한번 실행해서 결과를 보겠습니다
네 재시작 되고요
자 당연히 종료도 잘 되겠죠
자 그래도 확인해야 되니까요
네 그러면 게임오버가 되고
종료 이렇게 해서 잘 처리되는 걸 확인했습니다
이번 단원에서 학습한 내용을 정리하도록 하겠습니다
정리하기 플레이어 체력 관리와 피격 이벤트 처리 체력 UI 만들기
플레이어의 체력 기능을 구현하고 체력 UI를 화면에 출력하는 방법 캠버스의좌측 상단에 Progress Bar 클릭 앤 드래그 후 Percent 게이지를 조정함
Oberlay PANEL을 사용하여 Progress Bar 2개를 겹친 후 HPBarBack와 HPBar로 이름 수정
class UProgressBar* HPBarBack 선언 후 virtual boid NatibeTick() 함수 구현함
class UProgressBar* HPBarBack 선언 후 void SetHP() 함수 구현함
알파값을 고정하는 Lerp 함수 구성함
플레이어 체력 관리와 피격 이벤트 처리 피격 이벤트 처리
적이 플레이어를 공격 시 체력이 소모되고 체력이 0이 되면 게임을 일시 정지하는 방법
Void OnMy TakeDamage() 함수 구현함 SetHP(HP, MaxHP)로 UI에 반영함
게임오버 처리 게임오버가 되면 GameOver UI 위젯을 화면에 출력하고 버튼을 누르면 재시작 또는 나가기 되도록 처리하는 방법
Auto ui=CreateWidget() 함수를 구현하고 블루프린트에서 버튼을 처리함 버튼 이벤트를 추가하기 위해서 is Variable에 체크
Open Leverl 노드를 연결하여 Restart 버튼 이벤트 처리 Quit Game 노드를 연결하여 Quit 버튼 이벤트 처리