[UE4] UI(UMG), Crosshair, 조준점 추적하기(LineTraceForObjects), Set Visibility

🖼️ UI (UMG)

언리얼에서 UI를 설정하기 위해선 언리얼 모션 그래픽 UI 디자이너(이하 UMG)를 사용해야 한다. UMG 의 핵심에는 Widget (위젯)이라는 것이 있는데, 이는 미리 만들어진 (버튼, 체크박스, 슬라이더, 진행상황 바 등의) 함수 시리즈로, 이들을 조립해서 UI 를 만들 수 있다.

 

위젯은 일반 위젯이 있고, 패널이라는 위젯이 있는데 패널은 자기 스스로를 표현하지 않고 여러개를 묶어서 올려주는 역할을 수행한다.

위젯 블루프린트를 생성하게 되면 일반적으로 Canvas라는 패널이하나 들어가게 되는데, 이는 실제 게임 모드의 뷰포트와 1:1 호환되어 적용된다. Canvas 패널(화면 영역)에 실제 게임모드에 사용되는 UI들(HP바, MP 등)을 그려주고, 게임 상에 배치되는 에너지, 아이디 등은 Canvas 패널이 아닌 다른 패널에 배치된다.

🏹 Crosshair(조준선) 나타내기

활 조준 상태에서 활이 날아갈 중앙 위치를 조준하는 Crosshair 이미지를 UI로 띄워주기 위해 위젯 블루프린트를 생성하였다.

 

위젯 블루프린트는 디자인 영역과 그래프 영역이 따로 나누어져 있다.

조준선은 Canvas 패널 위에 나타내기 때문에 계층 구조에서 Canvas 패널 아래 Image 요소를 끌어왔다.

 

Image 객체의 디테일 패널

Image를 선택하면 Brush 속성에서 이미지를 설정할 수 있고, 앵커 값을 설정하여 이미지가 띄워질 위치를 조절할 수 있다.

Size To Content를 체크하면 이미지의 사이즈에 맞게 자동 조절되어 편리하다.

또한 Alignment값을 조절하여 이미지의 원점을 알맞게 설정해주는 것이 좋다.

Tint는 이미지의 색상값 자체를 변경해줄 수 있고, 컬러 및 오파시티는 설정된 색상에 더해져서 나타날 색상이다.

 

위젯 블루프린트(Crosshair) 그래프

조준점이 타겟을 조준했을땐 빨간색으로 변하고, 조준하지 못하는 일반 상태에선 흰색으로 변하도록 구현하기 위해 위젯 블루프린트의 그래프에 들어가서 색상을 변경시킬 커스텀 이벤트를 각각 만들어주었다.

🎈 뷰포트에 위젯 띄우기

UI는 카메라에 관련되어 출력되기 때문에 Player가 가지고 있는 Camera Controller를 이용해서 화면에 띄워주어야 한다.

 

위젯 생성 함수를 호출하여 만든 위젯 블루프린트를 연결하고 같은 클래스 타입인 액터를 변수에 저장해두었다. 

이후 Add to Viewport 함수로 뷰포트에 띄워주었다.

조준점은 플레이어가 활을 조준하고 있는 Pressed 상태에서만 띄워주기 때문에 처음엔 생성만 하고 Visible을 Hidden으로 설정해두었다.

💡 Set Visibility

Set Visibility 함수를 호출하면 ESlateVisibility라는 열거형 값을 선택할 수 있다.

 

언리얼에는 Slate(슬레이트)라고 하는 커스텀 유저 인터페이스의 프레임워크가 존재한다.

UI를 구현할 때 위에서 설명한 위젯 관련 툴인 UMG도 많이 사용하지만, 코드로 UI를 컨트롤 할 수 있다는 장점때문에 슬레이트 프레임워크도 많이 사용한다. 또한 UMG의 많은 부분은 이미 슬레이트에 구현되어있는 것을 가지고 사용하는 경우도 많다.

이러한 슬레이트의 공용체로 Visibility(가시성)을 제어하는 속성들을 살펴보았다.

• Visible
  - 기본적으로 화면에 보이면서 마우스 클릭이나 터치 등의 인터랙션을 발생시킨다.
  - 해당 레이어 밖에서의 인터랙션은 통하지 않기 때문에 인벤토리 패널이나 우편함 패널 등 화면 전체를 가리는 레이어를 쓸 때 사용한다.
• Collapsed
  - 화면에서 보이지 않으며 레이아웃에서 공간을 차지하지 않는다.
  - 보이지 않을 때 공간을 차지하면 어색한 위젯에 사용한다.
• Hidden
  - 화면에는 보이지 않지만 레이아웃 공간을 차지한다.
• HitTestInvisible
  - 화면에는 보이지만 인터랙션이 발생하지 않아 마우스 클릭 터치 등을 테스트할 수 없다.
• SelfHitTestInvisible
  - 화면에 보이고 인터랙션도 가능한데, 해당 레이어 밖에서도 인터랙션을 사용하게 할 때 사용한다.
  - HUD 패널같은 곳에 사용한다.

📚 조준점 Trace(추적하기)

조준점이 카메라의 Forward 방향으로 추적하며 조준된 타겟이 있는지 조사하였다.

💡 LineTraceForObjects

LineTraceForObjects 함수는 지정한 직선상에 콜리전 트레이스를 수행하여 트레이스에 걸린 것 중 지정된 Object Type 중 하나에 일치하는 첫 번째 오브젝트를 반환한다.

 

함수의 간단한 사용 방법은 추적 직선의 선분 시작점을 Start에 연결하고, 끝점을 End에 연결하여 만들고, Obejct Types에 배열 만들기 함수를 추가하여 추적할 오브젝트 유형을 설정한다.

 

Draw Debug Type는 추적 선분을 그리는 옵션값을 선택할 수 있다. 프레임마다 선분을 그리거나, 몇초간 띄운 후 사라지거나, 아예 그리지 않거나 등 기능을 설정할 수 있다.

 

Trace Comple는 복잡한 콜리전에 대해 테스트 하려는 경우 활성화 시키면 된다. 

박스나, 캡슐, 구, 스피어같이 기본적인 가벼운 충돌체들은 체크하지 않는다. 캐릭터의 캡슐이 아니라 캐릭터 자체를 충돌처리하려면 활성화시켜줘야 하는데,  반직선과 충돌 삼각형의 모든 경우를 계산해야 하기 때문에 자주 사용하진 않는다.

 

(참고로 Trace는 겹침 반응이 아니라 블럭 반응이다)

 

아래는 게임 속에서 화살의 조준점을 구현하기 위해 만든 추적 블루프린트이다.

Skill_Aim BP

추적 선분의 시작점은 플레이어의 손에 위치하는 화살 위치이고, 끝지점은 카메라의 Forward에 3000을 더해 거리를 만든 후 화살 위치를 더해 지정해주었다.

 

Enemy를 추적하기 위해 캐릭터가 Pawn을 가진다는 점을 이용해 Object Type으로 Pawn을 설정해주었다.

또한 추적에서 제외 할 대상으로 추적을 수행하는 Character를 설정하여 나 자신은 제외하였다.

 

Draw Debug Type는 None으로 설정하여 추적 선분을 그리지 않았다.

 

추적 선분에 액터가 충돌되면 조준점(Crosshair)를 빨간색으로 변경하고, 아니라면 흰색으로 변경하였다.

 

---

참조

https://docs.unrealengine.com/4.27/ko/InteractiveExperiences/UMG/

UMG UI 디자이너

https://docs.unrealengine.com/4.27/ko/ProgrammingAndScripting/Slate/Overview/

슬레이트 개요

https://docs.unrealengine.com/4.27/en-US/API/Runtime/UMG/Components/ESlateVisibility/

ESlateVisibility

https://docs.unrealengine.com/4.27/ko/InteractiveExperiences/Tracing/HowTo/SingleLineTraceByObject/

오브젝트로 싱글 라인 트레이스 사용법