카메라 - 2) 카메라의 줌 조절과 화면 드래그

- 개요

마우스 스크롤을 통해 카메라의 줌을 조절하는 기능을 추가한다

또, 마우스 휠을 누르고 있으면 마우스 움직임을 따라 화면을 드래그할 수 있는 기능을 추가한다

 

- 스크립트 작업

1) CameraController 클래스

 

카메라의 줌과 관련된 멤버변수를 추가한다

• zoomSpeed 멤버변수 : 줌을 조절하는 속도
• minZoom 멤버변수 : 줌인할 수 있는 최소 거리의 값
• maxZoom 멤버변수 : 줌아웃할 수 있는 최대 거리의 값
• scrollValue 멤버변수 : Zoom 액션에 연결된 키의 입력값
• targetZoomPosition 멤버변수 : 줌이 조절되면 적용할 카메라의 트랜스폼
• zoomVelocity 멤버변수 : 줌을 조절할 가속도
• smoothTime 멤버변수 : 줌을 포함한 화면 드래그등에 사용할 변환시간 

 

 

화면 드래그와 관련된 멤버변수를 추가한다

• levelCenterPoint 멤버변수 : 화면 드래그에서 사용할 중심점의 좌표
• maxDistanceFromCenter 멤버변수 : 화면 드래그를 사용할 수 있는 최대 거리
• mouseMovementSpeed 멤버변수 : 화면 드래그의 속도
• mouseMovementVelocity 멤버변수 : 화면 드래그의 가속도
• lastMousePosition 멤버변수 : 마지막으로 마우스 휠을 클릭한 위치
• isMiddleClickPressing 멤버변수 : 마우스 휠을 누르고 있는지 판단

 

 

Start 함수에서 추가한 멤버변수의 값을 초기화한다

 

 

Zoom 액션과 HoldClick 액션에 바인드될 콜백 함수를 추가한다

OnZoom 함수의 로직은 위와 같이 구성하여 마우스 스크롤의 입력값을 저장한다

OnHoldClick 함수는 위와 같이 구성하여 마우스 휠을 누른 순간의 마우스의 위치값을 저장하고

마우스 휠을 누르고 있는지와 손을 떼었는지 여부를 저장한다

 

 

HandleCameraMovement 함수에 위와 같이 로직을 추가하여 카메라 줌의 목표 트랜스폼을 설정한다

 

 

HandleCameraRotation 함수의 로직을 위와 같이 수정하여 카메라의 위치를 수정하는 코드를 제거한다

 

 

HandleCameraZoom 함수를 위와 같이 구성한다

마우스 스크롤을 위로 굴리면 +1을 적용하여 줌인하고, 아래로 굴리면 -1을 적용하여 줌아웃한다

이때, SmoothDamp 함수를 사용하여 카메라가 부드럽게 targetZoomPosition까지 이동한다

 

 

HandleMouseMovement 함수의 로직을 위와 같이 구성한다

마우스 휠이 눌려진 상태에서 마우스를 드래그하면 반대 방향으로 카메라를 이동시킨다

여기서도 SmoothDamp 함수를 사용하여 카메라가 부드럽게 targetPosition으로 이동한다

 

 

LateUpdate 함수의 로직을 위와 같이 수정한다

우선, 카메라의 줌을 먼저 설정하고 이어서 화면 드래그를 진행한다

카메라의 회전과 위치가 수정된 이후에 기준점의 위치를 갱신한다

 

- 애셋 작업

1) 카메라 오브젝트

 

PlayerInput 컴포넌트의 Zoom 액션과 HoldClick 액션에 대한 콜백함수를 연결한다

 

- 최종 실행 결과