[UE4] Aim Mode(Pressed/Released), Spring Arm Offset, Set Field Of View(FOV, AspectRatio), 커브, 타임라인 추가

🎯 Aim Mode (Zoom In/Out)

게임속에서 플레이어가 활을  쏠 때 타겟을 조준하는 기능을 자주 본 적이 있다. 따라서 이번에는 마우스 오른쪽 클릭을 통해 타겟을 조준하는 에임모드를 구현해보았다.

 

Weapon_Bow : End Equip

먼저 에임모드는 활 무기를 사용할 때 실행시키기 위해, 활 무기를 장착했을 때 Aim 이라는 이름의 SKill_Aim 클래스를 스폰해주었다.

 

Skill_Aim 클래스에서는 캐릭터의 Spring Arm 컴포넌트와, Camera 컴포넌트를 각각 변수안에 저장해두었다.

 

FAimData 구조체 속성과 초기값

에임모드를 구현하기 위해 AimData라는 구조체를 만들어 각각 필요한 속성을 선언하고, Aim을 구현하는 Skill_Aim 클래스에서 각 속성대로 Origin변수와 Aim Data 변수(AimData 형식 변수)를 초기화시켜 주었다.

🚩 Spring Arm Offset

Spring Arm 컴포넌트에는 Socket Offset과 Target Offset인 두 개의 오프셋을 설정할 수 있다.

 

• Socket Offset
  - 스프링 암의 끝부분(카메라 부분)을 조절하는 오프셋값을 설정
• Target Offset
  - 스프링 암의 앞부분(캐릭터 부분)을 조절하는 오프셋값을 설정
  - Socket Offset과 달리 월드 스페이스에 적용된다.

(사실 두 오프셋의 차이를 알아보려 노력했지만.. 오프셋값을 둘다 조절해도 눈으로 보기엔 비슷해보였다..)

🏹 에임 모드 - Pressed / Released

Skill_Aim 이벤트 그래프

에임모드를 실행시키는 마우스 오른쪽 클릭의 Pressed 상태일 시, Spring Arm과 Camera가 에임모드로 변경되기 전 초기값들을 담은 Origin 변수를 저장 해두고, 이후 구조체 생성 시 설정했던 초기값들을 Spring Arm과 Camera에 초기화시켜 주었다.

 

즉, 에임모드일 땐 Aim Data의 속성들로 Spring Arm과 Camera를 초기화하고, 에임모드가 아닐 땐 Origin 변수의 속성들로 초기화해주면 된다.

 

마우스 오른쪽 클릭을 떼면 Release 상태가 된다. 이때는 저장해두었던 Origin 변수를 통해 Spring Arm과 Camera를 다시 원상태로 돌려주었다.

🖼️ Set Field Of View 함수

플레이어의 시야(시점)를 변경하기 위해선 Set Field Of View 함수(뷰포트 시야 조절)에 대한 이해가 필요하다.

뷰포트의 원근(Perspective)에서는 AspectRatio와 FOV(Field Of View) 개념이 매우 중요하다.

 

AspectRatio(종횡비)는 종횡비라는 한자 그대로 종(세로) :횡(가로) 의 비율이다. 가로와 세로의 비율을 "1 : ?"으로 정의하고 가로가 늘어나면 비율대로 세로가 늘어나고, 반대로도 적용한다.

 

FOV는 Field Of View의 약자로 게임의 뷰포트에서 실제로 보게되는 화면의 각도를 의미한다. FOV값이 높으면 보이는 각도가 넓어져 양옆으로 넓게 보이는것을 의미하고, FOV가 낮으면 보이는 각도가 좁아서 양옆은 낮고, 멀리 있는 물체까지 가까이 보이는것을 의미한다.

 

이번의 구현 목표인 활 쏘기 중 에임모드는 FOV를 줄임으로써 시야각을 줄여서 시야가 좁아지며 뷰가 확대되는 방식으로 기능을 구현하였다.

-> 에임 모드에서는 Set Field Of View함수로 시야를 45로 설정하고, 에임 모드가 아닌 경우 디폴트 값인 90으로 설정한다.

🛼 커브, 타임라인 추가

에임모드를 구현은 완료 했는데, 시점이 바뀌면서 화면이 너무 갑자기 확대되고 갑자기 축소되는 현상을 완화시키기 위해 커브를 사용하였다. 

커브는 보간을 이용하는 Ease 기능을 수행하여 시야 각도 45에서 점차적으로 90까지 올라갈 수 있도록 구현해주었다.

 

생성한 커브

커브는 가로가 시간을 나타내고, 높이가 크기(깂)를 나타낸다. 따라서 처음 시작(시간 0)에 90값을 생성하고, 시간 0.1에 45값을 생성하였다.

 

만들어진 커브는 블루프린트에서 호출하여 사용할 수 있다.

• New Time : 몇초부터 커브를 시작할 지 설정
• Set New Time : 설정한 New Time부터 시작하도록 설정
• Direction : 진행 방향이 정방향인지 역방향인지 설정

블루프린트 상에서 커브를 더블클릭하여 제작한 커브를 추가해줄 수 있다. 

 

커브를 추가하여 지정하는 이름이 블루프린트상에 출력값으로 생성된다. 이때 길이값을 조절하여 커브가 실행될 총 시간을 지정해줄 수 있다.

 

커브는 단순히 서서히 커지고, 서서히 작아지는 보간 값 말고도 서서히 진행되다가 갑자기 빨라지기도, 그 반대가 되기도 한다.

이러한 수식을 생각해내기 힘들다면 아래 사이트를 통해 보간 연산을 참고하거나 사용할 수 있다.

https://easings.net/ko

Easing Functions Cheat Sheet

---

참조

https://docs.unrealengine.com/4.27/ko/AnimatingObjects/SkeletalMeshAnimation/Persona/Viewport/

애니메이션 뷰포트