[24강] Damaged Enemy - 2

이번 강의에서는 저번에 다루었던 피격처리를 이어서 진행하고, 저번시간에 하다 말았던 HP바 시스템을 완성할 예정이다.  

또한, 적(Enemy)이 공격당했을 경우 공격한 플레이어(Attacker)를 바라보도록 하고, 피격 후 붉은 색으로 바뀌었다가 돌아오는 것을 작업할 예정이다.   

 

저번 강의에서 Progress Bar 의 설정을 마쳤는데 HealthBar로 Rename 하여 준다 

Enemy 폴더 > WB_HealthBar

* Rename 단축키 : F2

컨트롤을 선택했을 때 오른쪽 위의 IsVariable이 체크되어 있다면 변수로 취급되며 "그래프" 탭으로 넘어갔을 때 입력을 받을 수 있는 컨트롤들이 자동으로 변수로 등록이 된다. 

 

그래프 탭에서 다음과 같이 "HealthBar" 변수가 등록되어 있는 것을 확인 할 수 있다. 

 

이제 이 외부에서 함수를 Call 해서 퍼센테이지를 적용하도록 해주는 함수를 제작할 예정이다.

 

1. Custem Event "Update HealthBar" 생성  

이 함수는 BP_Enemy 에서 Call 해주면서 Enemy 의 Health를 넘겨줄 것이다. 

 

2. 입력 > 변수 Health Float 형 추가 

 

3. 다음과 같이 블루프린트를 세팅하여 준다. 

이렇게 하면 Health 바에 함수 호출하면 값이 0~1 까지 해서 퍼센티지로 들어가게 된다  

Health는 0~100 까지의 수를 가지는데, 0은 사망을 의미하니 1~100의 범위를 가질 예정이므로 "Make Literal Float" 함수에 Value 100.0을 준다. 

0~1까지 나온 값을 헬스바를 가져와서 헬스바에 "Set Percent" 값으로 세팅 하여 준다

 

컴파일 후, BP_Enemy 에서 그래픽 작업을 하여준다. 

컴포넌트 추가 > Widget > Rename "HealthBar" 

캐릭터와 바가 같이 움직일 것이기 때문에 Component 바로 밑에 붙여도 상관은 없는데, 정석은 Mesh 밑에 달아주는 것이다. 

 

그후, HealthBar 의 Widger Class 를 다음과 같이 WB_HealthBar 로 변경하여 준다. 

그러면 그래픽이 화면에 생성되는데 사이즈를 120*20 에 위치를 0, 0, 190으로 변경하여 준다. 

 

우리가 만든 거 나오는데 사이즈를 다음과 같이 120* 20 으로 줄여 줌, 위치는 z 190으로 올려줌 

 

그 후, Space > screen 으로 변경 

월드에서는 보이지 않으나 실행하면 화면상에 나타난다. 

월드로 하였을 경우 렌더 방향 문제와 Backface Calling(게임 후면은 보이지 않는 현상) 등이 나타난다. 

 

World (월드공간) :  게임 3D 상에서의 공간 

Screen (화면 공간) : 화면에 배치되는 2D UI 상에서의 공간 

 

이 방식으로 처리하였을 경우의 문제는 HP 바가 인 게임 그래픽으로 가려지지 않는다는 것이다. 

만약에 가리는걸 원할 경우 머터리얼 쉐이더를 활용하여 편집을 하는 방법이 있다.

* 차후 따로 유튜브 알아보기 

 

여기까지 완료하였을 경우 HP바가 생성된 것을 확인 할 수 있다. 

 

BP_Enemy HealthBar 설정 

이제 Enemy 에 Health 값을 가져와 세팅하여 주어야 한다.

 

1. Update Health Bar 함수를 생성하여 준다. 

이 함수의 용도는 다음과 같다. 

- Begin Play 에 Update HealthBar 

- 맞을때마다 Health 값이 감소하는데,  Update HealthBar를 하는 방식으로 처리 

 

Health Bar 위젯을 형변환하여 가져와서, Health 값을 가져와 Health Bar 에 업데이트 한다. 

두 군데에서 호출하니 함수를 하나 묶어서 처리를 하는 것이 간편하다. 

 

그 후 이벤트 그래프로 돌아와 Begin Play 가 끝난 시점, Any Damage 이벤트가 발생하였을때 "Update Health Bar" 를 다음과 같이 세팅하여준다.  

 

플레이를 하여 보면 HP 바가 정상적으로 구현된 것을 확인 할 수 있다. 

 

데미지 처리 구현 정리 

1. 데미지 처리 구현이 완료되었으므로 이 부분을 노드접기하여 "Set Damage" 로 정리한다. 

 

2. "Set Damage" 내부로 들어간다

 

3. 입력을 다음과 같이 변경한다

 

4. 화살표를 눌러 Instigator 과 Damage 의 순서를 변경한다. 

 

다음과 같이 설정하면 밖에서 보기도 편하고, 뭐가 들어오는지 보기가 편하다는 장점이 있다

 

기본적인 데미지 처리는 완료되었다. 

 

다음으로는 피격시 Enemy가 Player를 바라보는 처리를 진행할 것이다. 

Set Damage에 노드를 잇기 위해 다음과 같이 설정하여 준다. 

컴파일 후 이벤트 그래프로 돌아오면 다음과 같이 노드가 이어진다. 

 

이어진 노드에 다음과 같이 세팅하여 준다. 

- GetActorLocation : 자기자신의 위치 

- Get Attacker > GetActorLocation : 공격자의 위치 

 

"위치 벡터 A - B"를 하면 B가 A를 바라보는 방향 벡터가 나온다

Find Look at Rotation 함수를 사용하여 피격 각도를  출력한 후 "Set Actor RoTation"으로 설정하여 준다 (자기자신의 각도 값)

 

* Find Look at Rotation : Start가 Target 을 바라보는 회전값이 리턴이 됨 

구현이 완료되었으므로 노드접기 > Look At Attacker 으로 정리한다. 

 

이제 피격 시 머터리얼 색을 일시적으로 붉은 색으로 바꾸었다가 돌아오는 구현을 진행한다. 

 

 

시작 머터리얼을 저장하기에 앞서 다음과 같이 노드를 정리한다.  

 

1. 아래 부분을 노드접기하여 "Spawn&Attach Sword" 로 정리한다.

 

2. Sequence 를 생성하고 다음과 같이 순차순으로 정리한다.  

 

 

머터리얼 색을 바꾸기 위해서, 가장 보편적인 구현은 Dynamic Material 을 생성하고 세팅해 준 후 Dynamic Material의 값을 변환하는 것이다. 

 

현재 "Enemy"  에셋에 할당된 머터리얼은 다음과 같다.

 

1. Material instance Dynamic 형 배열 변수생성 Materials 

* 배열 쓸때 복수형을 쓰면 구조체 구분되어 좋다 

 

2. "Create Dynamic Material Instance", 다이나믹 머터리얼을 생성한다. 

 

3. 상단 머터리얼 배열 넘버를 참고하여 적 에셋에 할당된 머터리얼 을 순차적으로 넣어준다.

 

0번 : M_UE4Man_Body_Enemy 

1번 : M_UE4Man_Chest_Enemy 

 

4. 노드접기 > SetMateirals 하여 정리하여 준다. 

 

5. "Change Material" 함수를 생성하고, 함수 안에 지역변수 Linear Color 변수를 생성한다. 

 

6. 함수를 다음과 같이 설정하여 준다. 

Material 을 반복문을 돌릴건데 처음 들어오면 0 가져와 LoopBody - 0객체, 숫자 리턴 다음 1 가져와 LoopBody - 1객체, 숫자리턴한 수 모두 완료되면 Completed 로 나가게 한 형식이다. 

 

- Array Element 에서 끌어다가 Set Vector Parameter Value 생성

- "Parameter Name" 에 Body Color 한 이유는 바꿀 변수명이 다 BodyColor(머터리얼 파라미터 변환 후 변수 이름) 이기 때문이다. 

 

* 반복문 돌리기 

For Each Loop : 배열을 순차적으로 실행 

Loop Body : 각 배열마다 실행될 핀

Array Element : 각 배열을 리턴 

Array Index : 실행되는 배열의 번호를 리턴

Completed : 반복이 모두 완료되면 실행될 핀 

 

* Color 

지역변수, 임시변수이다. 

함수내에서만 사용가능한 변수이며 이벤트 변수내에서는 사용불가능하다. 

Get Color 해도 안에서만 사용가능하니 뽑아서 연결해 주어도 된다. 

 

7. "Look At Attacker" 노드를 다음과 같이 열어준다. 

 

8. 컬러 변경 세팅 완료한 내용을 뒤에 실행노드 하여준다. 

 

9. Color 를 1, 0, 0, 1로 변환하여 주고, 테스트하여 보면 다음과 같다. 

 

 

적을 피격하면 붉은 색으로 변환되고 피격한 대상자의 방향 각도를 받아오는 구현이 완료되었다. 

* Find Look at Rotation : 시작지점 타겟 바라보는 회전값 리턴 활용 

 

다음 강의를 통해서는 색을 일정시간이 되면 돌려주고 HP가 0보다 작으면 사망처리 등을 진행할 예정이라고 한다 

무척 기대가 된다!