본문 바로가기

언리얼엔진

42. CrossHair / 위젯 블루프린트

Timeline

- Play : 시작

- Play from Start : 무조건 시작지점에서 시작

- Stop : 타임라인 정지

- Reverse : 현재 타임라인지점에서 역행

- Reverse from End : 타임라인 끝에서부터 역행

- Set New Time : New Time 지정한 부분으로 점프

 

- Update : 타임라인 플레이 중일 때 계속해서 나옴

- Finished : 타임라인 끝났을 때

- Direction : Forward(정방향 재생) Backward(역방향 재생)

* 무슨 값인지 궁금하다면 swtich를 만들어보거나, 변수로 승격시켜보면 알 수 있다.


Zoom In 상태에서 캐릭터가 화면 밖으로 나가는 문제

저번에 BP_Player에서 SpringArm에 Enable Camera Lag를 사용하고 있기 때문에 발생하는 문제이다.

이를 해결해주기 위해선 두 가지 방법이 있다.

 

1. 상황에 따라서 Enable Camera (Rotation)Lag 옵션을 지정해주기

Zoom In / Out 하는 로직 부분에서 Timeline의 Direction을 사용하여 Forward일 때는 꺼주고,

Backword일 때는 켜주는 방식으로 해결이 가능하다.

 

* 하지만 Zoom In / Out할 때 카메라 무빙이 다소 부자연스럽게 끊기는 느낌이 든다.

 

2. SpringArm의 Lag Speed를 상황에 따라서 조절해주기

ZoomTimeline의 트랙 추가

SpringArm의 Lag Speed 값을 받아오기 위해 Timeline에 새로운 Float 트랙(CameraLagSpeed)을 추가하였다.

각각 두개의 핀을 추가하여 시간 : 0.0, 0.25 / 값 : 5.0, 25.0로 설정해주었다.

 

이렇게 Timeline에 새로 만든 CameraLagSpeed 핀을 SpringArm의 Set Enable Camera Lag Speed에 넣어주면

Zoom In했을 때 Camera Lag Speed는 25.0으로 빨라져 캐릭터가 화면 밖으로 나가는 일은 없어진다.


Zoom In 상태에서 FireBall 스킬 해제 시 Zoom In이 안 풀리는 문제

BP_FireBall의 이벤트그래프 Deactivate이벤트

BP_FireBall에서 Deactivate 이벤트 호출 시점에 Get Instiagtor의 Zoom Out도 같이 호출해줌으로써 해결이 된다.


CrossHair 만들기

CrossHair로 쓸 텍스처 이미지를 찾아서 T_CrossHair로 변경하였다.

이런 UI 틀은 PlayerController가 가지고 있고, Posses될 때 Pawn마다 가지고 있는 각자의 이미지들을 받아서 쓰게 된다.

 

콘텐츠브라우저에서 우클릭 - 유저 인터페이스 - 위젯 블루프린트를 추가해준다.(WBP_CrossHair)


위젯 블루프린트 화면

우측 상단에 보면 디자이너 / 그래프 두가지의 탭으로 나눠져있는 것을 볼 수 있다.

좌측의 계층구조의 Canvas Panel이 바로 플레이 시 보게될 화면의 크기를 말한다.

이제 여기서 우리가 방금 만든 T_CrossHair를 사용할 것이다.

 

팔레트/일반/Image를 드래그하여 Canvas Panel 밑으로 넣음

먼저 팔레트의 일반 - Image를 계층구조의 Canvas Panel 밑으로 넣어준다(CrossHair).

 

해바라기 모양의 앵커가 생성된 모습

이제 화면의 좌측 상단에 앵커가 생성된 것을 볼 수 있다.

이 앵커가 위젯(이미지)의 원점을 말한다. 따라서 앵커를 화면 중앙으로 이동시킨 뒤, xy축을 초기화해주면 위젯이 중앙에 가는 것을 볼 수 있다.

 

앵커와 Alignment 설정

여기서 Alignment의 x, y를 0.5로 설정해주어 위젯이 정확히 중점에 가도록 설정해주면 된다.

 

Apperance의 Brush 이미지에 아까 만든 T_CrossHair를 넣어주고, 위에 있는 Size To Content를 통해 원래 T_CrossHair의

사이즈로 나오도록 설정해준다.


이제 BP_PlayerController에서 WBP_CrossHair를 생성해보자.

BP_PlayerController의 이벤트그래프

시작될 때부터 바로 CrossHair를 만들어두고 껐다 키면서 사용할 것이기 때문에 BeginPlay 이벤트에서 바로 생성해준다.

Create Widget에서 Class로 WBP_CrossHair를 선택, Owning Player(위젯을 소유할 플레이어)는 Self로 지정한다.

* BeginPlay 이벤트 마지막에 HideCrossHair를 한번 호출해주는 것도 잊지 말자.

 

Return Value를 변수로 승격(CrossHair)하여 생성된 위젯을 담아주고, Add to Viewport로 화면에 추가까지 해주어야 한다.

* ZOrder : UI 간의 우선순위를 말한다.(수치가 클수록 위젯이 상단에 위치함)

 

CrossHair에서 Set Visibility로 위젯을 키고 끌 수 있다.

 

- Visible : 보임. 히트 테스트 / 커서랑 상호작용이 가능

- Collapsed : 보이지 않으면서 레이아웃에서 공간을 차지하지 않아 상호작용 불가능

- Hidden : 보이진 않지만 레이아웃 공간은 차지한다. 숨겨져있으므로 인터렉션은 일어나지 않음

- Not Hit-Testable(Self & All Children) : 보이기는 하는데 상호작용 불가 / 자신과 자식들 모두

- Not Hit-Testable(Self Only) :보이기는 하는데 상호작용 불가 / 자신만

 

여기선 위젯을 숨길 때 Collapsed를 쓰고 보여줄 때는 Not Hit-Testable(Self & All Children)를 사용할 것이다.


Zoom In / Out 할 때마다 CrossHair를 껏다 켜주어야 하기 때문에 인터페이스를 추가하여 관리할 것이다.

BP_PlayerControllerInterface 새 인터페이스를 하나 생성하여, ShowCrossHair / HideCrossHair 함수 두개를 생성한다.

 

BP_PlayerController 이벤트그래프

이후 BP_PlayerController 클래스 세팅에서 BP_PlayerControllerInterface를 추가해준 뒤,

각각 ShowCrossHair와 HideCrossHair 이벤트를 연결해주었다.


BP_Player의 이벤트그래프

BP_Player로 돌아와서 Zoom In/Out할 때 Timeline의 Direction값을 통해서 Controller의 ShowCrosshair와 HideCrossHair를 불러주면 된다.