UE4 Chapter 10-4. HUD : 몬스터 데미지 Text + TimeLine

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

🚖 몬스터 데미지 Text 액터 만들고 몬스터 위에 띄우기

Text 액터

몬스터를 때릴 때마다 들어간 데미지가 숫자 Text 로 뜨게 하자. 메이플처럼!

🚩 “CharDamageTextBP” 액터 블루프린트 뷰포트

몬스터 Hp Bar 와 마찬가지로 데미지 Text는 몬스터 위치에 생성시키되 컴포넌트로서 몬스터에 종속되진 않게 할 것이다. 몬스터와 같이 회전하면 텍스트도 같이 회전하여 반전되거나 보이지 않는 등 문제가 생길 수 있기 때문이다. 데미지 Text도 액터로서 만들고 몬스터 위치에 스폰하는 식으로 구현할 것이다. “CharDamageTextBP” 액터 블루프린트를 생성해주자.

먼저 Text Render 컴포넌트를 추가하여 텍스트를 나타낸다. 가운데 정렬도 해주고 크기도 좀 키워주고 색깔도 넣었다. z 축으로 -180도 회전 시켜야 게임 월드에서는 제대로 나오길래 이렇게 회전해주었다. (게임 스테이지 좌표상 월드 기준 X 축이 뒤쪽에 가있어서 ㅠ)

Damage Text 액터는 몬스터 위치에서 스폰되고, 애니메이션을 주어 일정시간 후에 하늘로 승천하며 사라지도록 만들 것이다. 이런 애니메이션을 주기 위해선 언리얼의 타임라인 기능을 사용하면 된다.

타임라인

위와 같이 타임라인 만들기 노드를 추가한다. 이 타임라인의 이름은 Damage Text TimeLine으로 지어보았다. 타임 라인 노드를 더블 클릭하면 타임 라인 편집기가 나오는데 이 편집기를 통해 시간에 따라 어떤 값을 리턴시킬지 그래프를 그릴 수 있다. 타임 라인 노드는 매 시간마다, 시간에 따라 바뀌는 값을 리턴할 수 있다.

• 🌼타임라인 노드🌼
  • 입력
    • Play : 현재 시간에서 정방향으로 타임라인 재생
    • Play from Start : 처음부터 정방향으로 타임라인 재생
    • Stop : 현재 시간에서 타임 라인 재생을 정지
    • Reverse : 현재 시간에서 타임 라인을 역방향 재생
    • Reverse from End : 끝 시간에서부터 타임 라인을 역방향 재생
    • Set New Time : 현재 시간을 New Time 입력에 설정된 값(이나 입력)으로 설정
    • New Time : Set New Time 입력이 호출되었을 때 타임라인이 점프해 갈 수 있는 시간을 초 단위로 나타내는 float 값을 받는 데이터 핀
  • 출력
    • Update : 타임 라인이 실행되는 동안, 매 시간마다 이 신호가 출력된다. 즉, 이 핀과 연결되면 매 시간동안 실행될 수 있다.
    • Finished : 타임 라인 재생이 다 끝났을 때 한번 출력되는 신호다. 타임라인 재생이 다 끝난 후 실행시킬 것이 있을 땐 이 핀에 연결한다. Stop 함수로는 발동되지 않는다.
    • Direction : 타임라인 재생 방향을 나타내는 Enum 데이터를 출력
    • 만든 트랙들.. : 타임라인은 Vector Track, Float Track 등등 여러 타입의 트랙을 가질 수 있는데 각각의 트랙에서 매 시간마다 출력되는 값.

노드를 더블 클릭하면 타임 라인 편집기를 실행할 수 있다. 아래처럼!

🚩 “CharDamageTextBP” 액터 블루프린트 DamageTextTimeline 타임라인

왼쪽 상단의 두 번째 버튼을 클릭하면 Vector Track 을 추가할 수 있다. 이렇게 벡터 트랙을 추가하면 X, Y, Z 이렇게 3 가지 커브를 사용할 수 있는데 시간에 따라 각기 다른 3 가지 값을 출력해야 한다면 3 개 커브를 다 사용하는거고, 나는 Damage Text 를 하늘로 승천시킬거라 Z 축 값을 변경시킬 한 가지의 값만 있으면 된다. 따라서 Z 커브 하나만 사용하였다.(단순히 X, Y, Z 이름의 3 개의 커브를 사용하는 것일 뿐 실제 X, Y, Z 축에 대응하는건 아니다.) 편하게 Z 커브에만 Key 를 추가하기 위해 X, Y 커브는 자물쇠로 잠그고 안보이게 눈 감겨 줌.

• 타임 라인의 가로축은 시간, 세로축은 값이다.
  • Z 커브에 Key 2 개 추가함
    • 시간 0.7 의 값은 0
    • 시간 1.1 의 값은 125
  • 이 타임 라인의 전체 길이는 1.10 으로 설정하였다.

위 타임 라인은 0.7초까지는 Z=0 만 출력하다가 [0.7 초 ~ 1.1 초] 구간 동안에는 Z 값을 0 에서 부터 125에 가까워지는 값을 출력한다. 대략 0.9 초에는 약 Z=67 정도의 값을 출력할 것이다.

이렇게 이 타임라인 노드로 0.7초이후부터 1.1초까지 (0 👉 125)에 가까워지는 Z값들을 매 시간마다 리턴할 것이다. 그리고 (0 👉 125)이 값들을 Damage Text의 초기 Z 축 위치에다가 매 시간마다 델타 값으로 더해주어 서서히 하늘로 승천하게 할 것이다.

🚩 “CharDamageTextBP” 액터 블루프린트 이벤트그래프

• 게임이 시작되면, “CharDamageTextBP” 액터가 생성 및 활성화 되자마자 Damage Text 의 시작 위치를 저장해둔다.
  • Vector 타입의 StartPos 변수를 만들어 이에 저장.
    • Get Actor Location으로부터 (self = Damage Text인 “CharDamageTextBP” 액터 블루프린트) 현재 위치를 받아와서 StartPos에 저장.
    • 시작 위치가 아닌현재 위치에다가 더해주면 계속해서 매 프레임마다 누적되어 미친듯이 하늘로 승천해버릴 것이다. 초기 위치에다가 타임 라인에서 출력되는 값을 매 시간마다 더해주어야 함.
• 타임 라인을 실행한다. 👉 0 ~ 1.1 초 동안 실행 됨
  • Update 출력핀 👉 타임 라인이 실행되는 동안 매 프레임 마다 실행 됨
    • Damage Text의 초기 위치인 StartPos로부터 타임 라인이 매 시간동안 출력하는 Vector 값을 더한 값을 Text Render 컴포넌트의 위치로 설정한다.(Set World Location)
      • X, Y 커브는 쓰지 않아 내내 값이 0 이긴 하지만 그래도 Break Vector로 Z 값만 추출한 후, 이를 (0, 0, Z) 벡터로 만든다. 이것이 데미지 텍스트의 초기 위치로부터 더해주어야 할 값읻. 평행 이동할 델타 벡터.
    • Set World Location 은 컴포넌트의 위치를 설정하는 함수이다.
  • Finished 출력핀 👉 타임 라인이 전체 길이에 도달해 끝나면 실행 됨
    • 타임 라인이 끝나면, 즉 1.1 초동안 다 실행 완료 됐다면 Destroy Actor(타겟 self)를 실행하여 “CharDamageTextBP” 액터를 파괴한다.

몬스터 블루프린트

🚩 몬스터 블루프린트 뷰포트

“CharDamageTextBP” 액터 오브젝트를 생성할 위치 역할을 할 Dummy 컴포넌트를 추가해준다. 몬스터에게 큐브(아무거나 상관 없다.) 컴포넌트를 추가해주었고 몬스터의 배꼽 정도에 위치하게 하였다.

• 콜리전 프리셋을 No Colision 으로 하여 콜리전을 꺼주고
• Hidden in Game 에 체크하여 플레이 중엔 렌더링에서 제외하여 안보이도록 함. (그냥 위치로 쓰려고 하는거라 큐브는 쓸데 없으므로)

텍스트는 몬스터의 앞에 띄울 건데 여기에서부터 위치 역할 할 Dummy 컴포넌트 X, Y 축 위치값을 수정하여 몬스터 배 밖으로 나오게 하면 몬스터가 회전할 때 얘도 몬스터의 컴포넌트라 같이 회전해버리기 때문에 안보일 수 있다. 따라서 스폰만 몬스터 위치에서 하고 (상하 위치 즉 Z축 위치 값만 조정하고) 앞으로 좀 땡겨서 위치하게 하는 것은 아래 이벤트 그래프에서 구현할 것이다.

🚩 몬스터 블루프린트 이벤트그래프

• 데미지 텍스트가 생성될 위치 역할 Dummy 컴포넌트인 Cube_DamageTextPosDummy컴포넌트의 현재 위치를 가져온다. (Get World Location) 여기에 (-50, 0, 0) 벡터 값을 더해주어 앞으로 좀 땡겨 위치하게 한다.
  • 이건 Transform이 아니라 Transform 중 하나인 Location이다. 따라서 Make Transform 함수를 통해 더한 이 위치를 Transform으로 만든다.
• 예전에 만들었던 Damage Effect 커스텀 이벤트는 몬스터가 데미지를 입을 때마다 입혀야할 효과를 구현하기 위해 만들었었다. 따라서 여기에 데미지 텍스트 띄우는 기능을 구현하고자 했다.
  • 몬스터가 데미지를 입으면 Spawn Actor from Class 함수를 통해 위에서 구했던 Cube_DamageTextPosDummy컴포넌트 위치 Transform을 가져와 “CharDamageTextBP” 타입의 오브젝트를 생성(스폰)한다.

🚖 맞은 데미지 숫자를 데미지 Text에 반영하기

🚩 “CharDamageTextBP” 액터 블루프린트

• Set Damage Text 함수를 만든다. Float 타입의 매개 변수가 있으며 이를 통해 데미지를 입력 받아 Text Reneder 컴포넌트의 Text 값으로 세팅할 것이다.
  • Float 으로 받은 데미지를 Floor 함수로 정수로 내림하고, ToText 함수를 통해 이를 String 값으로 변환한다.

🚩 몬스터 블루프린트 이벤트그래프

몬스터가 데미지를 받을 때 Damage 변수에 들어온 데미지 값을 저장한다.

Damage Effect 이벤트에서 데미지 텍스트를 스폰한 후 이를 통해 Set Damage Text 함수를 호출한다. 파라미터로 Damage를 넘겨준다. 이제 몬스터가 맞으면 데미지 텍스트에 받은 데미지 숫자값이 설정될 것이다.

🚖 맞은 데미지 크기에 따라 데미지 텍스트 크기도 변경

위에서 타임라인이 출력하는 값에 따라 데미지 텍스트가 하늘로 승천하도록 시간에 따라 위치를 변경했었다. 이번엔 시간에 따라 이 데미지 텍스트가 크기도 변경되도록 함.

🚩 “CharDamageTextBP” 액터 블루프린트 DamageTextTimeline 타임라인

Y 커브는 크기를 결정할 값으로 사용하기로 했다. 0~0.25초 시간 동안에는 1에서 1.5에 가까워지는 증가하는 값을 리턴하게 되고 0.25초 ~ 0.7초 시간 동안에는 1로 가까워지는 감소하는 값을 리턴하게 된다.

🚩 “CharDamageTextBP” 액터 블루프린트 이벤트그래프

이 Y 커브 (Break Vector 의 Y 출력값)값을 Text Render의 X, Y축 Scale 값을 설정하는데에 사용한다.

이런 데미지 텍스트를 위와 같은 방식으로 플레이어와 보스에게도 적용해 줌.

---

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

맨 위로 이동하기

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