Unity UI - 화면을 벗어나지 않은 UI 만들기

유니티에서 UI를 다루다 보면 가끔 마우스를 따라가야 하는 UI를 제작할 때도 있습니다.

이러한 경우 마우스가 화면 가장자리까지 이동하면 해당 UI가 가장자리를 넘어가서 보기 안 좋은 경우가 많습니다.

딱히 마우스를 따라가지 않더라도 몇몇 상황에서 UI가 화면을 넘어가는 경우도 있긴 합니다.

 

그러한 경우를 대비해 화면을 벗어나지 않으면서 자유롭게 이동하는 UI 예시를 제작해 보았습니다.

 

우선 캔버스 설정은 Screen Space - Camera, Scalew with Screen Size(1920:1080)으로 설정되어 있습니다.

public class test : MonoBehaviour
{
  [SerializeField] private RectTransform PreviewRect = null;
  [SerializeField] private RectTransform MyRect = null;

  private Vector2 RawPosition = Vector2.zero;

  private Vector2 ClampTopRight = Vector2.zero;
  private Vector2 ClampBottomLeft = Vector2.zero;
  private void Awake()
  {
    float _screenSize_x = Screen.currentResolution.width / 2.0f;
    float _screenSize_y = Screen.currentResolution.height / 2.0f;
    //화면 스크린 사이즈

    ClampTopRight=new Vector2(_screenSize_x-MyRect.rect.max.x,_screenSize_y-MyRect.rect.max.y);
    ClampBottomLeft=new Vector2(-_screenSize_x - MyRect.rect.min.x, -_screenSize_y - MyRect.rect.min.y);
    //화면 스크린에서 현재 Rect의 사이즈가 딱 맞아떨어지는 범위를 미리 계산
  }
  private Vector2 Offset = Vector2.zero;
  private void Update()
  {
    PreviewRect.position = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    PreviewRect.anchoredPosition3D = new Vector3(PreviewRect.anchoredPosition3D.x, PreviewRect.anchoredPosition3D.y, 0.0f);
    //더미 오브젝트로 Screen 위치에서 Canvas 위치로 전환한 값 산출

    MyRect.anchoredPosition3D =
      new Vector3(Mathf.Clamp(PreviewRect.anchoredPosition3D.x, ClampBottomLeft.x, ClampTopRight.x),
      Mathf.Clamp(PreviewRect.anchoredPosition3D.y, ClampBottomLeft.y, ClampTopRight.y), 0.0f);
    //화면을 벗어나지 않게 위치를 제한해서 현재 오브젝트에 대입
  }
}

Awake에서 화면의 크기와 Rect의 크기를 이용해 '어느 범위까지 가면 이 이미지의 크기가 화면에서 벗어날지'를 구합니다.

이후 이 이미지가 움직일 때마다 미리 구한 범위 밖을 벗어나지 않도록 Clamp로 제한합니다.

위 PreviewRect 부분은 습관상 넣었으나 필수는 아닙니다.

 

 

마우스가 스크린 바깥을 벗어나면 UI가 따라오지 못하고 화면 안에 갇혀있는 것을 확인할 수 있습니다.

Pivot을 변경해도 동일합니다.

 

그러나 Scale을 변경할 경우 스크립트로 인식한 Rect의 사이즈는 여전히 Sclae 1.0기준으로 계산되어 정상적으로 작동하지 않습니다.

이래서 RectTransform은 Scale을 건드리지 말라는 말이 괜히 있는게 아닙니다.