[Unity] 12. UGUI 만들어보기 (2) - Button, Anchor, Pivot

안녕하세요.

오픽 친다고 한동안 글을 못올렸습니다.

 

그러려니 하시고,

오늘은 GUI 마무리 할게유

 

 

* 해당 영상을 참고하였습니다.

 

1. Button UI 란?

---

 

 

Unity - 스크립팅 API: Button

 

'이벤트를 트리거하기 위해 클릭할 수 있는 일반적인 버튼입니다.'

라고 유니티에서 말하라고 했다.

 

뭐... 버튼에 대해서 뭘 설명해야하죠?

누르면 뭔가 작동될 것만 같은...

 

엘리베이터 1층 버튼 같은 그런 버튼이요

 

 

Hierarchy - 우클릭 - UI - Button 선택으로 생성

 

 

생성이 되었습니다.

버튼 생성 시 텍스트가 함께 따라오므로 (이 버튼은 무료로...)

텍스트는 수정이 가능합니다.

 

말하는게 왜 이렇게 로봇같지?

 

2. Button 의 설정

---

 

첫번째, Transform 영역입니다.

 

1) Pos : Position의 약자로, 위치를 나타냅니다. 이는 Anchor라는 기준점에 대한 상대적 위치입니다.

2) Width, Height : UI의 크기를 나타냅니다.

3) Anchor : UI의 위치를 계산할 때 사용할 기준점의 위치를 나타냅니다.

4) Pivot : UI의 위치를 계산할 때, 기준점과의 거리를 계산할 점의 위치를 나타냅니다.

 

Anchor 와 Pivot에 대해서는 뒤에서 다시 설명하겠습니다.

 

 

 

 

두번째, Image 영역입니다.

이미지 UI 와 거의 똑같으므로, 생략하겠습니다.

 

이전 글을 못보신 분들은 아래 링크를 참고해주세요.

 

[Unity] 11. UGUI 만들어보기 (1) - Canvas, Text, Image

 

 

세번째, Button 영역입니다.

 

1) Interactable : 버튼을 활성화 시킬 것인가? (상호작용 할 것인가?)

 

2) Transition : 버튼 클릭 시 변화하는 버튼의 모습

 

3가지가 있는데, Animation은 난이도 상 생략하겠습니다.

 

Color Tint 는 색깔이 바뀌는 거고,

Sprite Swap 은 이미지가 바뀝니다.

 

- Normal : 평소

- Highlighted : 마우스를 버튼에 올렸을 때

- Pressed : 마우스로 누른 상태

- Selected : 버튼을 선택했을 때

- Disabled : 버튼이 비활성화 되었을 때

- Fade Duration : 색깔이 바뀌는데 걸리는 시간

 

이므로 참고해서, 설정해주시면 되겠습니다.

 

3) On Click : 버튼의 핵심. 원하는 오브젝트의 함수를 실행시킵니다.

 

 

Runtime Only 밑에 원하는 오브젝트를 넣어줍니다.

저는 Move라는 스크립트가 담긴 오브젝트를 넣어줬습니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class move : MonoBehaviour
{
    

    public void gogogo()
    {
        Vector3 destination = new Vector3(300, 300, 0);
        for (int i = 0; i < 10; i++)
        {
            transform.position = Vector3.Lerp(transform.position, destination, 0.1f);
        }

    }

    public void goback()
    {
        Vector3 startpoint = new Vector3(-10,-10,-10);
        transform.Translate (startpoint);
    }

}

 

제 스크립트의 코드는 위와 같습니다.

 

 

이후에, 스크립트 속 함수를 선택해주시면 끝입니다.

 

 

저는 버튼을 두 개 만들어서 활용해봤습니다.

잘 되네요.

 

근데 저 UI 위치가 너무 거슬려. 난 똑바로 놓았는데 분명히!!!!

 

3. Anchor 와 Pivot

---

 

문제는, 스크린의 크기가 자꾸 바뀌는 겁니다.

유니티 창을 조절할 때마다 Game 탭의 크기가 바뀌면서 생기는 일이죠.

 

그러면 두 가지 방법이 있겠죠?

 

스크린의 크기를 고정시키거나,

UI를 그때그때 움직이게 만들거나.

 

전자는 매우매우 생산성이 떨어지므로

후자를 사용하는게 기본입니다.

 

---

 

앞서,

 

1) Anchor : UI의 위치를 계산할 때 사용할 기준점의 위치를 나타냅니다.

2) Pivot : UI의 위치를 계산할 때, 기준점과의 거리를 계산할 점의 위치를 나타냅니다.

 

라고 말씀드렸습니다.

 

 

동그라미 친 버튼은 어떤 기능을 하냐면

 

 

요런 기능을 합니다.

왼쪽의 표창이 누르는대로 바뀌죠?

 

이게 Anchor 입니다. 기준점이에요.

오른쪽 위를 잘 보시면, Pos 들도 바뀝니다.

 

당연하죠, 기준점이 바뀌었기 때문에!

이제, 좌표를 (0,0,0)으로 바꿔봅시다.

 

 

앵커를 스크린 왼쪽 위로 옮긴 뒤, 좌표를 (0,0,0)으로 하니

사진처럼 되었습니다.

 

저는 왼쪽 위에 텍스트가 온전히 나왔으면 하는데...

이럴 때 사용하는 것이 Pivot 입니다.

 

UI 내부에도 중심이 될 좌표가 필요한데, 그게 Pivot 이에요.

 

(Anchor 버튼을 누르고, Shift를 누르면 Pivot 설정이 가능합니다.)

 

pivot의 위치를 왼쪽 위로 두고, (0,0,0) 으로 옮겨주니

원하는 대로 왼쪽 위에 알맞게 위치하는군요!

 

자세히보면 Pivot의 좌표가 (0,1)이죠?

Pivot의 좌표는 UI의 가로 세로 길이를 1로 뒀을 때, 왼쪽 아래 꼭짓점을 (0,0)으로 두고 계산합니다.

 

그냥 하다보니 알게됐어요 ㅎㅎ;;

 

 

스크린의 크기가 바뀌어도 텍스트가 왼쪽 위에 잘 붙어 있네요 ㅎㅎ

다른 UI들도 이 방법으로 설정하면 됩니다.

 

---

 

아두이노는 언제 하냐구요???

 

 

휴지눈 하겠습니다...