12.07 (TIL-Unity)

UI 컴포넌트

Unity 에 존재하는 기본 UI 들에 대한 설명

 

Text

글자를 구성하는 컴포넌트

 

 

Image

UI 의 기본 구성 - 이미지를 담당하는 컴포넌트

스프라이트를 넣으면 해당하는 이미지로 변함.

 

Raw Image

Image 와 같이 이미지를 담당하는 컴포넌트

이미지와는 다르게 텍스쳐를 받아서 이미지를 그려줌

 

 

Button

버튼 컴포넌트

클릭을 감지하는 이벤트를 가지고 있다.

텍스트를 바꾸고 싶으면 버튼안에 보면 Text 컴포넌트를 수정

 

컴포넌트 디테일

Transition항목 - 애니메이션을 설정

OnClick 항목 - 클릭했을때 일어나는 일을 설정

 

 

Toggle

선택 ↔ 해제를 반복하는 컴포넌트

 

컴포넌트 디테일

Transition항목 - 애니메이션을 설정

Is On 항목 - 처음에 체크된 상태인지 해제된 상태인지 설정

On Value Changed항목 - 값이 변경될때 일어나는 일을 설정

 

Dropdown

클릭하면 메뉴리스트가 열리는 컴포넌트

 

컴포넌트 디테일

Transition항목 - 애니메이션을 설정

Value 항목 - 처음에 선택 된 옵션 설정

Option 항목 - 처음에 선택 된 옵션 설정

On Value Changed항목 - 값이 변경될때 일어나는 일을 설정

 

Input Field

텍스트의 입력을 받는 컴포넌트

컴포넌트 구조를 보면 InputField 하위에 Placeholder 와 Text 가 있다.

Placeholder 값을 입력전에 먼저 보여주는 텍스트

(Enter text..., 아이디를 입력 등등) 글자가 입력되면 사라진다.

Text 실제 값이 입력되는 텍스트

 

컴포넌트 디테일

Transition항목 - 애니메이션을 설정

Text 항목 - 처음에 입력할 텍스트, 또는 이후 변경된 텍스트

Content Type 항목 - 입력될 형식을 설정합니다. (문자, 글자, 비밀번호 등등)

On Value Changed항목 - 값이 변경될때 일어나는 일을 설정

OnEnd Edit 항목 - 값 입력을 완료하고 할 일을 설정

 

 

Scroll View

컨텐츠가 길때 스크롤하는 컴포넌트

 

구조가 꽤나 복잡

Scroll View 스크롤 뷰전체의 본체가 되는 부분 실제로는 Scroll Rect 라는 컴포넌트가 달려있다.

Viewport 스크롤 넘어가는 부분을 가리는 마스크 역역

Content 스크롤로 보여줄 UI (이 안에 UI 를 구성하면 된다.)

Scrollbar Horizontal (Optional) 가로 방향 스크롤바 (없어도 됨)

Scrollbar Vertical (Optional) 세로 방향 스크롤바 (없어도 됨)

 

컴포넌트 디테일

Horizontal, Vertical 항목 - 스크롤이 일어날 수 있는 방향. 해당 방향으로만 스크롤 된다.

Scrollbat 항목(Optional) - 스크롤바 표시. 없어도 됩니다.

On Value Changed항목 - 값이 변경될때 일어나는 일을 설정

 

Mask

마스크 컴포넌트가 있으면 하위에 있는 이미지들은 마스크의 이미지 영역만큼만 보이게 됨

 

둥근 이미지의 마스크를 준비

이미지를 하나 준비해서 마스크 하위로 넣어 어떻게 되는지 확인

마스크 하위에 위치하기 전에는 이미지 전체가 잘 나오는 것을 볼 수 있다.

 

이미지를 마스크컴포넌트 하위로 들어가면 마스크 영역만큼만 보여지게 됨

 

 

Canvas Group

계층관계에 있는 UI 들의 상호작용, 레이캐스트, 알파 동시에 조정할수 있다.

일단 알파에 대해서만 알아보자

 

본디 UI 들은 계층구조(부모, 자식 관계)로 있다해도 각기 다른 UI 들이다.

 

이는 만약 부모 UI 의 투명도를 조정해도 자식 UI 는 영향을 받지 않는것을 뜻한다.

 

하지만 부모 UI 에 캔버스 그룹 컴포넌트가 있다면 모든 UI 에 적용