개-발

[UGUI 배경]

기존에는 유니티 안에서 GUI 개발 환경이 형편없고, 사용하기 불편해서

NGUI라는 유료 플러그인을 사용하여 GUI를 개발을 했다.

그래서 유니티에서는 NGUI 개발자를 불러들여 유니티 내 GUI 시스템을 대폭 업그레이드 시켰고,

Unity 버전 4.6부터 새로운 GUI를 출시했다.

이로써, 공식 명칭은 아니지만 UGUI라 불리는 GUI 시스템이 유니티 내에서 사용되기 시작했다.

UGUI(Unity Graphical User Interface)

UGUI에 대해 알아보려고 한다.

참고 사이트는 당연히 유니티 공식 홈페이지 - 자습서 내용이다.

캔버스(Canvas)

- Canvas는 Unity에서 모든 UI 객체를 렌더링을 관리하기 위한 루트 컴포넌 트이다.

- 즉, 유니티에서 사용하는 모든 UI 구성 요소들은 모두 캔버스 밑에 위치한다.(캔버스의 자식이다.)

- 캔버스를 생성하는 것을 잊더라도, UI 요소 중에 하나를 생성하면 Canvas는 자동으로 생성된다.

-  한 씬(Scene)에서 캔버스를 여러개 생성할 수 있다.

- 캔버스 영역이 씬 뷰에서 사각형으로 나타나므로 게임 뷰에서 보지 않아도 UI를 쉽게 배치할 수 있다.

- .캔버스(Canvas)에 있는 UI 요소는 계층 구조에 나타나는 것과 동일한 순서이다.

   즉, 겹겹이 쌓이게 되므로, 첫 번째 있는 UI가 두 번째 UI에 가려져 보이지 않게 된다.

   변경을 하고 싶다면 드래그하여 계층 구조에서 위,아래 순서를 변경하면 된다.

- 캔버스에는 기본적으로 4가지의 컴포넌트가 포함되어 있다.

1. Rect Transform

2. Canvas

3. Canvas Scaler

4. Graphic Raycaster

- 캔버스에는 스크린 공간 또는 월드 공간에 렌더링하기 위해 Render Mode가 세 종류 존재한다.

[Render Mode]

1) 스크린 공간(Screen Space - Overlay)

가장 기본이 되는 모드로, 따로 설정하지 않으면 이 모드로 설정된다.

이 렌더 모드에서는 모든 UI 요소가 해당 씬에서 다른 모든 것 위에 렌더링된다. 

이 모드에서 캔버스는 자동으로 스크린을 채우고, 스크린 설정이 변하면 자동으로 크기를 조정한다.

스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경한다.

이 모드에서는 Rect Transform를 통해 직접 편집하는 것은 불가능하다.

캔버스가 Rect Transform을 설정해 자동으로 스크린을 채운다.

Pixel Perfact  

선택하면 UI 엘리먼트는 렌더링될 때 가장 가까운 픽셀로 조정된다.

2) 스크린 공간(Screen Space - Camera)

이 렌더 모드에서는 캔버스는 씬에 있는 다른 게임오브젝트처럼 동작한다.

캔버스의 크기는 사각 트랜스폼(Rect Transform)을 사용하여 수동으로 설정할 수 있으며,

(위 두 개는 수동 설정 불가)

UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링된다.

이 방식은 월드의 일부를 이루도록 의도된 UI에 유용하다. 

그래서 이 방식을 “서사적 인터페이스”라고도 부르기도 한다.

1. 드래그를 하기 위해서는 OnMouseDrag() 함수도 있지만, OnDrag() 함수를 사용할 수도 있다.

2. 먼저, OnDrag()를 사용하기 위해서는 

using UnityEngine.EventSystems; 

을 적어줘서 이벤트 시스템을 사용하겠다는 것을 표기한다.

3. MonoBehaviour뒤에 콤마(,)를 쓴 뒤 IDragHandler를 작성한다. 참고로 IDragHandler 는 인터페이스이다.

4. 3번 IDragHandler를 적으면 에러난다. 즉, 인터페이스에 선언된 메소드를 정의해줘야한다.

형태는 다음과 같다. public void OnDrag(PointerEventData eventData)

5. OnDrag()안에 드래그 했을 때, 일어날 동작들을 적으면 된다. 

이 블로그에서는 마우스 드래그하는데로 오브젝트가 딸려오는 것을 구현하려고 한다.

위와 같이 하면 되는데,

마우스는 평면으로 움직이므로 x,y)축만 필요하다.

z축은 위와 같이 10으로 지정해줘도 되고, 그냥 오브젝트의 z축을 그냥 기입해줘도 된다.

그 다음에 transform.position에 mousePosition을 넣음으로써,

드래그할때 mousePosition이 게임오브젝트 위치에 대입되어 마우스 드래그할때 오브젝트가 딸려 움직이게 된다.

이상으로 마우스 드래그를 이용하여 게임오브젝트를 움직이는 방법을 알아보았다.

게임 오브젝트를 움직이는 작업을 하다보면, 

화면을 벗어나 우주 공간처럼 끝없이 가게 되는 것을 볼 수 있다.

이때, 화면안에 있도록 제한을 해줘야 하는데 가장 간단하게 구현할 수 있는 것이 바로

Camera.main.WorldToViewportPoint 를 사용하는 것이다.

바로 카메라(Camera).WorldToViewportPoint(pos)로 써도 되지만, Camera.main을 쓰는 이유는

MainCamera라는 태그(Tag)가 붙은 첫번째 활성화된 카메라를 불러온다는 뜻이다.

즉, 유니티 프로젝트 생성시 만들어지는 main카메라를 사용하겠다는 의미이다.

WorldToViewportPoint(현재 위치)의 경우 position을 월드 공간에서 뷰포트 공간으로 변경시킨다.

카메라의 좌측 하단은 (0,0 , 0.0)이며, 우측 상단은 (1.0 , 1.0)이다. 

또한, z position은 카메라로부터의 거리를 월드 단위로 환산한 값이다.

따라서,

이렇게 하면, 현재 위치(transform.position)를 pos 변수에 대입하고,

pos.x < 0f 라면 왼쪽 화면 밖으로 나갔다는 의미이므로 아무리 왼쪽으로 이동해도 0.0f

pos.x > 1f 라면 오른쪽 화면 밖으로 나갔다는 의미이므로 아무리 오른쪽으로 이동해도 1.0f 

pos.y > 0f 라면 윗쪽 화면 밖으로 나갔다는 의미이므로 아무리 윗쪽으로 이동해도 0.0f 

로 조건을 줘서 화면 안에서 못 벗어나게 한다.

그 다음에 다시 뷰포트 공간에서 월드 공간으로 변경시킨 뒤, 현재 위치에 넣으면 된다.

이렇게 한 뒤, 게임을 실행해보면 

드래그를 방향키를 아무리 눌러도 화면을 벗어나지 않고 모서리까지만 가는 것을 볼 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

뷰포트 ?

월드 좌표 ??

로컬 좌표 ???

ViewportToWorldPoint ???

WorldToViewportPoint ?????

ScreenToWorldPoint    ???????

카메라 관련 용어 및 개념을 좀 더 익혀야겠다..