[Unity 2D] 마우스 위치 기준으로 카메라 줌인 줌아웃 (Camera zoom in zoom out based on mouse position)

개요

카메라의 사이즈를 변경해서 줌인/아웃 구현

마우스 포인트 위치를 기준으로 줌인/아웃이 되도록 구현

 

 

1. 2D의 카메라 사이즈

 

 

2. 필요한 변수 작성

	// 상수 : 줌 관련
        private const float ZoomSpeed = 1.0f; // 한번의 줌 입력의 줌 되는 정도
        private const float MinZoomSize = 3.0f; // 최소 카메라 사이즈
        private const float MaxZoomSize = 10.0f; //  최대 카메라 사이즈

        // 변수 : 줌 관련
        private float _targetZoomSize; // 목표 카메라 크기

        // 컴포넌트
        private Camera _camera; // 카메라 컴포넌트

 

 

3. Start 함수

        private void Start()
        {
            _camera = GetComponent<Camera>();
            _targetZoomSize = _camera.orthographicSize;
        }

카메라 컴포넌트 취득

현재의 카메라 크기를 설정

 

 

4. Update 함수

        private void Update()
        {
            // 줌 조작
            ControllerZoom();
            
            // 줌 업데이트
            UpdateZoom();
        }

추후 부드럽게 줌되거나 조작을 멈추어도 서서히 느려지게 하는등의 효과를 주기 위해

조작 부분과 실제 적용하는 부분을 나눠서 작성

 

 

5. ControllerZoom 부분

        private void ControllerZoom()
        {
            // 마우스 스크롤 입력 받기
            var scrollInput = Input.GetAxis("Mouse ScrollWheel");
            var hasScrollInput = Mathf.Abs(scrollInput) > Mathf.Epsilon;
            if (!hasScrollInput)
            {
                return;
            }

            // 카메라 크기를 마우스 스크롤 입력에 따라 변경하여 확대/축소
            var newSize = _camera.orthographicSize - scrollInput * ZoomSpeed;

            // 카메라 크기 값을 최소값과 최대값 사이로 유지
            _targetZoomSize = Mathf.Clamp(newSize, MinZoomSize, MaxZoomSize);
        }

입력 값이 있는지 확인

조작값 반영

최소 최대값을 제한

https://docs.unity3d.com/ScriptReference/Mathf.Clamp.html

 

 

6. UpdateZoom 부분

        private void UpdateZoom()
        {
            if (Math.Abs(_targetZoomSize - _camera.orthographicSize) < Mathf.Epsilon)
            {
                return;
            }
            
            var mouseWorldPos = _camera.ScreenToWorldPoint(Input.mousePosition);
            var cameraTransform = transform;
            var currentCameraPosition = cameraTransform.position;
            var offsetCamera = mouseWorldPos - currentCameraPosition - (mouseWorldPos - currentCameraPosition) / (_camera.orthographicSize/_targetZoomSize);

            // 카메라 크기 갱신
            _camera.orthographicSize = _targetZoomSize;
            
            // 줌 비율에 의한 카메라 위치 조정
            currentCameraPosition += offsetCamera;
            cameraTransform.position = currentCameraPosition;
        }

카메라 사이즈가 변경되었는지 확인

 

var offsetCamera = mouseWorldPos - currentCameraPosition - (mouseWorldPos - currentCameraPosition) / (_camera.orthographicSize/_targetZoomSize);

mouseWorldPos: 마우스의 현재 위치를 월드 좌표계 값
currentCameraPosition: 카메라의 현재 위치
_camera.orthographicSize: 현재 카메라의 크기
_targetZoomSize:카메라의 목표 크기

기존 카메라 사이즈와 목표 카메라의 사이즈의 비율을 계산해 offsetCamera 값 계산

최종적으로 카메라의 크기와 오프셋의 위치  값을 적용해준다

 

 

image참조: https://icons8.com/