유니티 UI 클릭할 때 사이즈 확대, 축소, 중앙 이동(UI 오브젝트의 크기 변경, RectTransform)

맨 왼쪽 박스를 클릭하면 가운데에서 확대되는 기능을 만들려고 한다

박스에는 Image와 Button이 붙어 있다

 

 

UI의 경우 Canvas밑에 위치하게 되고 Canvas는 설정에 따라 다르지만 보통 메인 카메라의 바로 앞에 놓여진다

그래서 UI 오브젝트의 width나 height 속성을 변경하는 방법은 일반적인 게임 오브젝트와는 조금 다르다

 

UI 오브젝트는 Rect Transform 컴포넌트를 가지고 있는데, 이 컴포넌트의 width와 height을 조정하는 것으로 크기 변경이 가능하다

 

    public void clickIDCard()
    {
        RectTransform rectTran = gameObject.GetComponent<RectTransform>();
        rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 1200);
        rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 700);
    }

RectTransform을 가져와서 SetSize로 가로 1200, 세로 700으로 바꾸는 코드

 

이동을 하고 싶으면 이렇게 된다

    public void clickIDCard()
    {
        GameObject obj = GameObject.Find("신분증");
        Vector3 position = obj.transform.localPosition;

        position.x = 0;
        position.y = 0;
        obj.transform.localPosition = position;
    }

GameObject를 찾아서 localPosition을 바꿔 준다

x, y값에 원하는 위치를 넣는다

transform.position이 아니라 localPosition을 쓰는 이유는, transform.position은 월드 좌표계를 쓰는 world position이기 때문에 UI 오브젝트 이동 시에는 anchor기준으로 이동해야 하기 때문이다

 

여기까지 하면 박스를 눌렀을 때 커지고 중앙으로 이동한다

 

근데 다시 클릭하면 원래 자리에 원래 크기로 돌아와야 하니까 if문으로 넣어주면 완성

아래는 전체 코드

    bool IDCardChk = false;
    public void clickIDCard()
    {
        RectTransform rectTran = gameObject.GetComponent<RectTransform>();
        GameObject obj = GameObject.Find("신분증");
        Vector3 position = obj.transform.localPosition;
        if (IDCardChk == false)
        {
            rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 1200);
            rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 700);
            position.x = 0;
            position.y = 0;
            obj.transform.localPosition = position;
            IDCardChk = true;
        }
        else
        {
            rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 470);
            rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 300);
            position.x = -580;
            position.y = 10;
            obj.transform.localPosition = position;
            IDCardChk = false;
        }
    }

 

 

+혹시 UI가 커졌을 때 약간 투명해 지면서 다른 오브젝트 아래 있다면 Hierachy에서 해당 UI 오브젝트를 가장 마지막으로 내려 주면 우선순위가 1번이 되면서 겹쳐지지 않는다

아니면 UI의 우선순위를 바꿀 수 있는 다른 방법 sorting layer 등을 쓰면 된다