UserInterface. 유저와 소통하기 위한 수단. 사용자가 처음으로 프로그램과 소통하게 되는 창구이다
UI
- 대표적인 UI가
키보드,마우스다. 지금은입력 장치로 구분되지만 처음 나왔을 때는 UI였다
게임 UI
- 정보를 제공 해주거나 , 알려주는 유저 인터페이스.
텍스트,이미지,버튼등이 게임 UI - 최적화 된 방식으로 UI를 사용하는 방법을 알아보자
해상도에 따른 UI
게임 창의 해상도에 따라서 UI가 표현되는 방법이 달라질 수 있다.- UI의 최적화는 해상도와 밀접한 관련이 있다
유니티 UI
UI 구성요소
- UI를 무엇이든 아무거나 추가하면, 자동으로
Canvas와EventSystem이 추가된다 - UI를 사용하기 위해서는 두 가지가 반드시 필요하다
Canvas
- 그림을 그리기 위해 도화지가 필요하듯이, UI 또한 2차원 상의 위치를 정해주기 위한 도화지가 필요하다.
Canvas는 그 도화지다 - 모든 UI 요소는 Canvas 의 자식으로 존재해야 한다
Render Mode
Overlay: 캔버스와 유니티의 World가 완전히 따로 있는 개념이다Camera: 지정된 카메라를 기준으로 UI가 배치된다. 카메라 마다 UI를 다르게 세팅 해주고 싶을 경우 사용할 수 있다. 카메라가 움직이면 UI도 같이 따라간다. UI가 다른 게임 오브젝트에 의해 가려질 수도 있다World Space: 게임 오브젝트 처럼, 월드 내에 만드는 UI에 쓰인다
UI Scale Mode
-
Constant Pixel Size: 픽셀과 관련한 정보는 렌더 파이프라인 포스트 참고 바람. 고정된 픽셀의 사이즈 만큼 스케일 한다. 그래서 화면의 해상도가 커질 수록, UI는 작아진다. 반대라면 커진다. 어느 해상도이든 고정된 품질의 UI를 출력할 때 사용한다.Scale Factor로 UI 배율을 조절할 수 있다Reference pixels per unit: 한 UI를 몇 픽셀을 기준으로 생성하냐를 정한다
: 100
: 1000
Scale With Screen Size: 해상도를 기준으로 UI를 자동으로 스케일한다. 해상도가 변하더라도 화면 기준으로 고정된 크기의 UI가 출력된다. 가장 안전한 방법이다Reference Resolusion: 타겟 해상도를 정할 수 있다. 비율을 정하는 것이라고 보면 된다
Constant Physical Size: 현실 세계의 크기를 기준으로 한다. 예를들어, 1cm 크기의 UI를 만들고자 한다면 이것을 사용하면 된다. DPI가 기준이 된다
EventSystem
UGUI
- 레거시는
NGUI다.UGUI로 오면서Canvas와EventSystem이 생겼다. NGUI는 오롯이 소스코드로 만들어지는 UI다
NGUI
RectTransform
3D 게임 오브젝트와 비슷하게Transform을 가지고 있다. 더 많은 요소들을 가지고 있다
Anchors
- 앵커가 정해져 있지 않으면, 화면의 비율, 크기에 따라서 위치가 달라질 수 있다. 캔버스에서 앵커 위치를 원하는 곳으로 옮겨두고 UI를 배치하면, 화면의 비율, 크기가 변해도 원하는 위치에 있게 할 수 있다
- UI를 부모 UI오브젝트에 대한 상대좌표를 정의한다. 화면 크기가 변해도 같은 위치에 있도록 설정할 수 있다. 기본값은 0.5 들로 되어 있다.
- 해당 삼각형을 떼고 붙이는 식으로 앵커를 세부 조정 할 수 있다
Anchor Preset
- 간단하게 위치를 정해줄 수 있는 프리셋
Alt키를 누르면서 클릭하면, UI도 같이 이동한다Stretch를 사용하면 Canvas의 일정 비율만큼 늘어난 크기가 보장된다. 마찬가지로Alt키를 누르면, 최대까지 늘어난 크기로 적용된다
Pivot
- 정 중앙에 있는것이
Pivot의 위치를 나타내는 아이콘이다. 직접 마우스로 움직일 수 있다 - 로컬에서의 좌표다. 위치, 회전, 크기 조정 시 기준으로 쓰이는 점. (0, 0)은 왼쪽 하단, (1, 1)은 오른쪽 상단을 의미한다. 기본값은 (0.5, 0.5) 정중앙
- 피벗을 기준으로 이동, 회전, 스케일 되는 것을 볼 수 있다
개발 박살내자