240712 : 오브젝트 순서 변경
클릭 시 그림자 컴포넌트를 활성화 시켜주고, UI Canvas 순서를 맨 아래로 옮겨준다. (Canvas는 맨 아래에 있을 수록 가장 먼저 보임)
_rectTransform.SetAsLastSibling();
_shadow.enabled = true; //bool 형식, false의 경우 컴포넌트 비활성화240712 : 드래그 앤 드롭기능
움직이는 것 까지는 잘 작동하나 클릭하고 나서 드래그할때 오브젝트가 튀는 문제가 생긴다.
이유를 알아보자. 현재 코드는 Update에서 계속 마우스 이동을 받아오고, Ondrag가 실행될때 오브젝트 포지션을 마우스 포지션과 같이 움직이도록 변경해준다.
this.gameObject.transform.position =
new Vector2(mousePosition.x - defaultPosition.x, mousePosition.y - defaultPosition.y);또한 포인터로 클릭을 할 경우 현재 오브젝트의 기본 포지션을 설정한다.
defaultPosition.x = this.gameObject.transform.position.x;
defaultPosition.y = this.gameObject.transform.position.y;문제점을 확실히 알기 위해 함수의 진행방식을 정리해보았다.
내가 구현해야하는 방식은 현재 마우스 포인터가 이동한 만큼 내 오브젝트로 이동시켜주어야 하는 것이다.
↑↑↑현재 구현방식↑↑↑
하지만 현재 구현방식은 드래그가 시작될 때 마우스 포인터와 오브젝트의 거리만큼 한번에 이동시킨 이후, 마우스의 위치로 이동하는 방식이 되어있다. 그래서 처음에 이동할 떄 튀는 형상이 발견되었다.
그래서 다시 작성해본 방식은 이러하다. 처음 클릭한 마우스 포지션에서 이동하는 만큼 오브젝트를 이동시키는 방식이다. 한번 적용해보자.
먼저 처음에 클릭한 마우스 포지션을 저장한다.
그리고 Transform 포지션에 지금의 마우스포지션만큼 뺀 것을 넣는다.
화면을 뚫고 날아가는 오브젝트 수정하기
니네 어디가!!!!!!!!!!!!!무언가 문제가 있는 모양이다. 생각한 것과 달리 오브젝트가 엄청난 추진력을 가지고 날아가버렸다. 내 생각보다 더 멀리 이동해버린것이다.
날아가는 이유는 마우스 포지션의 움직임에 비해 내가 이동시킨 오브젝트의 움직임이 더 크다는 것이라고 생각했다. 코드를 다시 확인해보았다.
defaultPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);기본 포지션을 처음 클릭한 마우스포인터의 위치로 설정한 것 까지는 괜찮았던 것 같다.
this.gameObject.transform.position =
new Vector2(this.gameObject.transform.position.x + (mousePosition.x - defaultPosition.x),
this.gameObject.transform.position.y + mousePosition.y - defaultPosition.y);크게 수정된 부분은 이곳이다. 이유를 알아냈다...
처음 값을 넣어둔 마우스 포지션에서 현재 마우스 포지션이 점점 멀어질 수록 더해지는 값이 늘어나게 되는데, 그게 오브젝트를 무자비하게 날려버린 것이다. 그리고 OnDrag 함수에 작성했었는데, 해당 함수는 드래그를 할 때마다 계속 실행된다.
그럼 해당 오브젝트를 마우스가 이동한 값 만큼만 이동하도록 만들어야하는데... 어떻게 해야할까?
초반의 코드로 돌아가보았다. 이때까지는 오브젝트와 마우스가 이동하는 거리가 같기 때문에 문제가 없을것이다.
내가 고쳐야 할 것은 오브젝트가 처음 이동할 때 오브젝트와 마우스 포지션이 떨어진 만큼 이동하는 것 이다.
그럼 default 포지션에서 처음부터 마우스 값만큼 빼보면 어떨까? 처음에 오브젝트가 튀는 이유는 마우스의 현재 포지션과 오브젝트의 포지션이 동일하지 않기 때문이다. 오브젝트를 마우스의 현재 포지션이 이동된 만큼 움직였기 때문에 튀는 것이라고 생각했다.
더튄다.................이제는 정반대로 뒤집듯이 더 튀기 시작했다.
이럴 때는 머리가 정말 아프다. 하지만 접근 방법은 맞았다고 생각한다. 오브젝트와 마우스 포지션간의 간극때문이 맞다는 것은 알아냈다.
디버그 로그를 찍어보면서 내가 알아내야 할 것을 확실하게 찾아내었다.
코드 재분석 후 문제해결
this.gameObject.transform.position =
new Vector2(mousePosition.x - defaultPosition.x, mousePosition.y - defaultPosition.y);일단 해당 코드가 어떤 방식으로 오브젝트를 이동시키는지 확실하게 이해했다.
오브젝트의 현재 포지션을 마우스 포지션에서 기본 포지션만큼을 뺀 곳으로 이동시키는 것이다. 사실상 코드와 다를 바 없지만 그림과 식으로 좀 더 이해해보자.
그렇다면 default position은 어떻게 만들어야 할까?
여기서 간단한... 방정식을 이용해서 풀어보자.
현재 오브젝트 위치 = transform.position
마우스 위치 = mousePosition
처음 위치 = defaultPosition // 찾아야하는 값transform.position = mousePosition - defaultPosition
transform.position - mousePosition = - defaultPosition
-(transform.position - mousePosition) = -(-defaultPosition)
- transform.position + mousePosition = defaultPosition
⁖ defaultPosition = mousePosition - transform.position그럼 해당 값으로 코드를 작성해보자.
defaultPosition.x = mousePosition.x - this.gameObject.transform.position.x;
defaultPosition.y = mousePosition.y - this.gameObject.transform.position.y;
이제 아주 잘 작동한다!
트러블슈팅 후기
한줄의 코드를 작성할 때 왜 그렇게 움직이는지 확실히 이해하고 쓰기!