RectTransformUtility

오랜만에 글을 쓰네요.

운 좋게 게임 개발자로 취업했지만, 기본적인 지식과 이해도가 부족하다고 느껴

정보처리기능사를 공부하며 기초를 다졌습니다.

이제 다시 엔진과 로직 관련 공부를 정리해가며 부족한 부분을 채워가려고 합니다.

 

 

문제상황

 

최근 회사에서 신규 프로젝트를 진행하며 IPointer 인터페이스를 활용하여 아이콘을 터치하면 해당 아이템 정보를 표시하는 기능을 구현하던 중 예상치 못한 문제가 발생했습니다. 아이템 정보 이미지의 위치가 비정상적으로 활성화되는 이슈였습니다.

과거 RectTrasformUtility를 통해서 문제 해결을 진행하였지만 오랜만에 사용을 해서 그런건지 해당 이슈를 해결하는데 오랜 시간이 걸렸습니다.

이에 해당 프로젝트를 진행할때 문제 원인을 찾아보고

해당 기능들을 연습 프로젝트를 만들어 해당 기능들을 한번 더 정리하는 과정을 진행하려고 합니다.

 

문제 원인 분석 및 해결

 

IPointer인터페이스를 통해서 받아오는 Position은 WorldPosition으로 인지하고 있었으나 

ScreenPosition이라는 점을 늦게 알게 되었다.

이 포지션을 변환 시켜야 하는데 현재 포지션은 Overlay공간이라 월드포지션 보다는 현재 캔버스의 지역공간으로 배치하는게 맞다고 생각해서 하단의 로직으로 수정하게 되었다.

    public void DrawTrigger(string title, string contents, Vector2 screenPos)
    {
        txt_title.text = title;
        txt_contents.text = contents;
        this.gameObject.SetActive(true);

        Debug.Log($"터치 포지션 (스크린 좌표): {screenPos}");

        // 터치 좌표를 UI 좌표로 변환
        Vector2 localPoint;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.GetComponent<RectTransform>(), screenPos,  null, out localPoint);

        Debug.Log($"터치 포지션 (UI 내부 변환 좌표): {localPoint}");

        // UI 위치 조정
        rectTransform.anchoredPosition = localPoint;

        // SafeArea 초과 방지 로직 실행
        AdjustPositionWithinSafeArea();
    }

 

 

 

 

 

---

RectTransformUtility

=>UI에서의 다방면에서 쓰이는 클래스이다. 오버레이 모드에서는 잘 쓰이는 일이 없다고 하지만 설정에 따라서 쓰이는 경우도 있다고 한다.

해당 클래스들의 기능은 하단과 같다.

 

• UI와 3D 오브젝트 간 상호작용
• UI 클릭 판정 & 터치 감지
• 드래그 & 드롭 기능
• 스크린 좌표를 기반으로 UI 위치 조정
• 안전한 UI 배치(SafeArea 활용)
• UI 자동 정렬 및 반전 처리

 

여기서 한개만 샘플 프로젝트로 진행해보자.

UI와 3D 오브젝트 간 상호작용

 

RectTransformUtility에서는 스크린 포지션을 월드 포지션으로 변경해주는 메소드가 존재한다.

바로 ScreenPointToWorldPointInRectangle라는 메소드인데 스크린 포지션을 월드 포지션으로 변환 시켜준다.아래는 샘플 프로젝트를 진행할 사진과 로직이다.

 

붉은 버튼 클릭전

 

붉은 버튼 클릭후

 

해당 오브젝트의 피봇이 정확하게 버튼쪽으로 옮겨져 있는 점을 확인 할 수 있다.

 

로직

 

    public void MoveObjectToUIButton()
    {
        // UI 버튼의 월드 좌표를 스크린 좌표로 변환
        Vector2 screenPoint = RectTransformUtility.WorldToScreenPoint(camera, uiButton.position);

        // 스크린 좌표를 3D 월드 좌표로 변환
        RectTransformUtility.ScreenPointToWorldPointInRectangle(
            uiButton, screenPoint, camera, out Vector3 worldPosition);

        // 3D 오브젝트 이동
        object3d.transform.position = worldPosition;
    }

 

꼭 사용전에 스크린 포지션으로 변경을 해야 사용가능 하다는 점을 인지하자.

 

 

그 외에 RectTransformUtility의 메소드들 

메소드설명사용 사례

ScreenPointToLocalPointInRectangle	스크린 좌표 → UI 로컬 좌표	UI 클릭한 위치에 따라 이동
ScreenPointToWorldPointInRectangle	스크린 좌표 → UI 월드 좌표	UI 클릭 시 3D 오브젝트 이동
WorldToScreenPoint	월드 좌표 → 스크린 좌표	3D 오브젝트 위치를 UI에 반영
RectangleContainsScreenPoint	UI 내부,외부 클릭 감지	UI 외부 클릭 감지 (닫기 버튼)
PixelAdjustPoint	UI 위치 픽셀 보정	UI 흐려지는 문제 해결
PixelAdjustRect	UI 크기 픽셀 보정	UI 요소의 크기 정밀 보정
FlipLayoutOnAxis	UI 특정 축 반전 (X/Y/Z)	좌우 반전, 상하 반전 기능
FlipLayoutAxes	UI X/Y 축 변경 (가로/세로 전환)	세로 UI → 가로 UI 변경