퍼즐게임 개발일지 - 14

퍼즐게임 개발일지 14편

드래그 앤 드롭을 수정해보자

 

 

어제 카메라 줌 인/아웃과 이동을 구현했다

그러나 카메라를 줌 인 했을 때

퍼즐이 배경 사이즈와 일치하지

않는걸 알게 됐다

 

오늘은 이 부분을 수정할 것이다

레츠꼬

 

 

일단 고치기 전에 알아야 할 것들이 있다

카메라를 줌 인 할 경우에

canvas는 반대로 작아지는데

 

사실 실제로 줄어드는건 아니고

카메라와 UI의 요소 사이 상대적인

거리가 변해서 그렇게 보이는 것 뿐이다

 

    public void OnBeginDrag(PointerEventData eventData)
    {
        float currentCameraSize = Camera.main.orthographicSize;
        float sizeAdjustmentFactor = 5.4f / currentCameraSize; 
        rectTransform.sizeDelta = originalSize * sizeAdjustmentFactor;
        
        OnDragStateChanged?.Invoke(true);
    }

    public void OnDrag(PointerEventData eventData)
    {
        // transform.position = eventData.position;
        // Vector3 screenPosition = Camera.main.ScreenToWorldPoint(new Vector3(eventData.position.x, eventData.position.y, 0));
        // screenPosition.z = 0; 

        RectTransform canvasRectTransform = transform.parent as RectTransform; 
        if (canvasRectTransform != null)
        {
            Vector3 worldPoint;
            if (RectTransformUtility.ScreenPointToWorldPointInRectangle(canvasRectTransform, eventData.position, eventData.pressEventCamera, out worldPoint))
            {
                transform.position = worldPoint;
                transform.localPosition = new Vector3(transform.localPosition.x, transform.localPosition.y, 0); 
            }
        }

    }

 

On Begin Drag에 원래는

퍼즐의 원래 사이즈로 돌아가는

코드가 있었으나 그걸 좀 변경했다

왜냐면 그렇게 쓰면 어제처럼

카메라의 줌 인/아웃과 관계 없이

같은 사이즈를 유지하기에 줌 인 했을 때

어제 결과물처럼 작아보인다

 

Screen Space - Camera Canvas의

UI 요소들은 카메라 뷰포트 좌표계를

(다양한 화면을 작은 네모 상자처럼 생각하는 것,

왼쪽 아래(0,0), 오른쪽 위(1,1)이 되고

정중앙은 (0.5,0.5)가 된다 이렇게 해서

화면 어디든 간단한 좌표로 나타낼 수 있다)

기반으로 위치가 결정되며

카메라의 거리에 따라 크기가 조정된다

 

그래서 On Begin Drag에서는

5.4f(Default 렌즈 크기)/현재 렌즈 크기를

나누어 줌 인 할 경우에

반대로 퍼즐을 크게 만들어주었다

 

그리고 On Drag는 UI가 어떤 Canvas에 속했는지

확인 후 화면 위치를 실제 위치로 변환하게 바뀌었다

 

 

동일하게 줌 인을 한 뒤

같은 퍼즐을 비교했을 때

사이즈에 변화가 생긴걸 확인했다

 

다음 Scene도 아주 잘 적용됐다 굿굿!!

 

그리고 Cinemachine Manager에

IsPointerOverObject라는걸 추가했다

그렇다

캔버스의 scroll view를 넘길 때

캔버스가 움직이는 상황을

피하기 위해서다

 

Update에 위와 같이 써주면 완벽!

 

원래 배경에 있던 요소들의

Raycast Target을 무조건 꺼줘야한다

만약에 안끄면 저거 닿기만 해도

canvas가 이동해버리기 때문이다

 

 

그리고 초기에 있는 boardID는 왼쪽이었다가

내가 그룹으로 묶기 편하게 오른쪽으로 바꿨는데

생각해보니 그걸 Puzzle 코드에 적용하지 않았다

그렇게 되면 퍼즐들은 이상한 부모에 속하게 되는데

870개가 넘는 퍼즐들을 다시 수정하기도 귀찮고 해서

이번에도 자동화 시스템을 하나 만들었다

(boardID는 boardStorage에서는 오른쪽처럼 변경한 상태,

boardStorage에 있는 boardID를 puzzle로 옮길 예정)

 

 

사용 방법은 아주 간단하다

만든 tool을 켜주고 boardID를 바꿔줄

퍼즐들을 선택해준다

(난 귀찮아서 전부 선택함)

 

 

맞는 boardStorage를 넣어주고

버튼만 클릭해주면?

 

 

퍼즐의 boardID가 잘 변경됐다!

그러면 boardStorage랑 비교해볼까?

 

boardID에 속한 퍼즐들이 너무 많아서

자르긴 했지만 암튼 자신에게 맞는

boardID가 잘 옮겨졌다!

 

참고로 이번 코드는 비공개다

 

왜냐면 너무 개인적인거라서ㅋㅋㅋ

저번 코드는 spriteRenderer를 Image 객체로

바꿔주는거라 다른 사람들도 쓰기 쉽지만

이번 코드는 너무 개인적이다

 

 

 

 

암튼 오늘은 여기까지