[모바일, 2D] 유니티 기초6 - 터치 움직임 구현 및 UI설정

---

시작

우리는 모바일 환경 게임으로 만들건데 키보드 입력으로 캐릭터가 움직인다.

때문에 이번에는 터치를 하면 캐릭터가 움직이도록 만들어 볼 것이다.

---

사전준비

사전준비로 오브젝트와 스크립트를 생성하고 기본 세팅을 할 것이다.

생성할 오브젝트는 3개, 스크립트는 1개이다.

 

먼저 하이어라키 창에서 우클릭->Create Empty를 한 후 이름은 UIManager라고 만든다.

다음 하이어라키 창에서 위처럼 Image를 만들면 UI오브젝트이기에 Canvas 안에 Image가 만들어진다.

캔버스 안에 이미지 오브젝트가 2개가 되도록 만든다.

다 만들고 이미지를 각각 Left_Move, Right_Move로 이름을 변경하면 위와 같이 된다.

 

Canvas를 눌러서 Render Mode(동그라미 친 것)는 Screen Space - Camera로 바꿔주고

Render Camera(체크표시 된 것)에 하이어라키 창에 있는 Main Camera를 드래그앤 드롭으로 넣어준다.

 

다음으로 방금 만든 Left_Move와 Right_Move의 위치를 정해줄 건데, 얘네는 일반적인 오브젝트가 아닌 Canvas에 들어가는 UI 오브젝트이기에 그냥 Transform이 아닌 Rect Transform이다.

 

자세한건 나중에 설명하기로 하고, Left_Move와 Right_Move 모두 흰색일텐데, 구분이 되도록 Left_Move의 색깔을 다른 색으로 바꿔준다.

나는 이렇게 빨간색으로 했다.

 

Scene창에서 아래처럼 위치도 옮기고 크기도 조절 해준다.

화면을 1/4로 나눠서 왼쪽아래는 Left_Move, 오른쪽 아래는 Right_Move로 채워준다.

w를 눌러서 위치를 조절하고 t를 눌러서 크기를 조절하면 된다.

 

참고로 화면 가운데 카메라모양이 거슬리면

Scene창의 오른쪽 위에 Gizmos를 눌러 3D Icons를 끄거나 슬라이드 바로 크기 조절을 하면 된다.

 

다 하고 나면

Left, Right가 각각 위 사진처럼 되어있을 것이다.

 

그런데 이대로 진행하면 문제가 생긴다.

현재 우리는 1920x1080 Portrait다.

그런데 다른 해상도, 화면비율로 변경해버리면??

위 사진처럼 아래가 뜨던지 잘리던지 하게 된다.

그래서 우리는 아까 말한 Rect Transform을 이용해 해결할 것이다.

 

다시 1920x1080 Portrait로 바꿔주고 Scene창에서 Left_Move를 선택한 다음 t를 눌러 Rect Tool로 보면

위 그림에 표시한 것처럼 파란 동그라미와 하얀 화살표가 보일 것이다.

파란 동그라미로 표시한 것은 Pivot이라 하고, 노란 동그라미로 표시한 것은 Anchors라고 한다.

 

간단히 기능을 설명하면 피벗은 기준점이고, 앵커는 화면 비율 대비 크기이다.

모든 오브젝트에는 피벗이 있고, 앵커는 캔버스 안의 UI오브젝트에만 있다.

피벗은 해당 오브젝트의 위치(position값)를 나타내는 기준이 된다.

때문에 우리는 Left_Move는 화면 가장 왼쪽아래로, Right_Move는 화면 가장 오른쪽 아래로 피벗을 옮길 것이다.

먼저 Left_Move에서 빨간 동그라미로 표시한걸 누르면 조절할 수 있는게 나온다.

이것은 이름대로 앵커를 조절하는 것이며, 쉬프트를 누르면 피벗도 조절할 수 있게 된다.

쉬프트를 누른채로 위 사진에 표시한 부분을 눌러 앵커와 피벗을 좌하단으로 보내버린다.

 

다음으로 인스펙터의 렉트트랜스폼에서 앵커 최소값과 최대값을 정해준다.

우리가 보는 화면(게임 화면) 기준으로 좌측 최하단이 X=0, Y=0이며, 우측 최상단은 X=1, Y=1이다.

화면을 1/4로 쪼개서 왼쪽 아래부분이 전부 Left_Move로 채워져 있기 때문에 앵커 Min값은 0, 0으로, Max값은 0.5, 0.5로 설정하면 된다.

 

다 하고 Rect Tool로 다시 보면 피벗(파란 동그라미)은 왼쪽아래에 박혀있고, 앵커(노란 동그라미)는 화면 1/4의 각 모서리를 가리킨다.

 

다시 해상도를 바꿔서 보면

이렇게 화면 4분의1을 꽉 채우게 되고

 

심지어 눕힌 화면인 Landscape로 해도 알아서 잘 채워준다.

 

Left_Move를 했으니 Right_Move도 똑같이 해준다.

다 하면 위 사진처럼 세팅이 될 것이다.

 

다음으로 플레이어 캐릭터의 태그를 설정해 줄 건데, 태그 기능을 잘 활용하면 스크립트를 짤 때 도움이 많이 된다.

하이어라키에서 Player_0을 선택 해 인스펙터 창에서 Tag를 미리 만들어져 있는 Player로 바꿔준다.

태그는 직접 추가할 수도 있고 미리 만들어져있는걸 사용해도 된다.

 

그 다음은 아까 만든 UIManager 오브젝트에 컴포넌트로 쓰일 UIManager라는 스크립트를 만들어 준다.

Assets/Scripts에 UIManager라는 스크립트를 만들고, 그 스크립트를 UIManager 오브젝트에 드래그 앤 드랍으로 넣어주면 최종적으로 준비가 다 끝났다.

 

정리하면 이미지 UI를 만들어서 위치 잡아주고, 플레이어 태그 설정하고 UIManager를 만들었다.

---

스크립트

우리는 UIManager 스크립트와 Player스크립트를 손댈거다.

 

Player.cs

public bool타입 변수 input_left와 input_right를 선언하고 false로 초기화까지 해 준다.

해당 변수는 위에서 만든 Left_Move와 Right_Move UI를 누르면 참조해서 값이 바뀌며, 그 값으로 움직임을 조절할 것이다.

움직일 때와 안움직일 때의 순서를 바꿔주고, if문 안쪽을 방금 만든 변수를 통해 체크하도록 한다.

 

UIManager.cs

코드 설명

    private GameObject player;
    private Player player_script;

이 부분은 플레이어 캐릭터 게임오브젝트와, 그 캐릭터 오브젝트의 스크립트를 사용하기 위해 선언한 부분이다.

    void Start()
    {
        player = GameObject.FindGameObjectWithTag("Player");
        player_script = player.GetComponent<Player>();
    }

Start() 함수에서 태그를 이용해 플레이어 캐릭터를 찾아 player에 넣고, 그 플레이어 오브젝트의 스크립트인 Player스크립트를 찾아서 player_script에 넣어준 것이다.

 

    // 왼쪽 눌렀을 때
    public void LeftDown() {
        player_script.input_left = true;
    }
    // 왼쪽 뗐을 때
    public void LeftUp() {
        player_script.input_left = false;
    }
    // 오른쪽 눌렀을 때
    public void RightDown() {
        player_script.input_right = true;
    }
    // 오른쪽 뗐을 때
    public void RightUp() {
        player_script.input_right = false;
    }

왼쪽, 오른쪽을 누르거나 떼면 때 방금 만든 Player스크립트의 input_left와 input_right의 값이 변경되도록 한다.

 

스크립트를 다 작성했으면 Left_Move의 인스펙터 창에서 Add Component를 눌러 Event Trigger를 찾아서 추가 해 준다.

 

추가했으면 Add New Event Type을 눌러 Pointer Down과 Pointer Up을 추가한 뒤 +를 눌러 위 상태로 만든다.

이름대로 Pointer Down은 눌렀을 때, Pointer Up은 뗐을 때 작동한다.

 

None이라고 써있는 부분에 하이어라키 창의 UIManager 오브젝트를 드래그 앤 드랍으로 넣어준다.

 

이후 No Function부분을 눌러 LeftDown(), LeftUp()을 Pointer Down, Pointer Up에 알맞게 넣어준다.

 

Right_Move도 똑같이 설정 해 주면 다 끝났다.

 

터치하는 부분 이미지를 따로 만들면 좋겠지만 그런게 없으니 그냥 투명하게 만들어버린다.

Left_Move와 Right_Move를 눌러서 Image 컴포넌트의 Color를 눌러 A값을 0으로 줘버린다.

 

실행시켜서 왼쪽부분, 오른쪽부분을 각각 클릭하면 캐릭터가 알맞은 방향으로 움직이는 것을 볼 수 있다.