[Unity Manual] Visual Components 알아보기

원문 링크

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIVisualComponents.html

Visual Components | Unity UI | 1.0.0

본문은 위의 링크 내용을 학습 및 영어 공부를 하기 위해 작성된 글입니다.

내용의 순서는 무작정 해석 -> 해석 후에도 모르겠거나 알게된 내용 설명 -> 기타의 순으로 진행됩니다.

해석 도중에 * 표시는 저의 궁금증을 표기하기 위해 남겨둔 것입니다.

이외 기타 궁금한 사항, 틀린 내용 그리고 잡다한 내용까지 언제든 댓글을 통해 남겨주세요.

 

Visual Compoents

UI 시스템의 소개와 함께, 새로운 컴포넌트가 너에게 구체적인 GUI를 functionality하게 만들 수 있게 도와줄 추가되었다. 이 부분은 만들 수 있는 새로운 컴포넌트들의 기본을 담고있다.

 

Text

우리에게 Label로 알려진, Text 컴포넌트는 보여지기 위한 Text를 넣기위한 Text 영역을 가지고 있다.

font와 font style, font 크기 그리고 text가 rich text인지 아닌지 설정하는 것이 가능하다.

 

Text의 배열을 설정하기 위한 옵션이 있다.

만약 text가 rectangle의 width 혹은 height보다 커지는 문제를 해결하기 위한 수평 그리고 수직 overflow를 위한 설정들

그리고 이용 가능한 공간을 맞추기 위해 text resize를 하게 만드는 Best fit 옵션

 

Image

이미지는 Rect Transform 컴포넌트와 Imagge 컴포넌트를 가진다. sprite는 Target Graphic field 아래에 Image 컴포넌트로 적용될 수 있다. 그리고 그것의 색은 Color field로 정할 수 있다.

material은 또한 Image Component로 적용될 수 있다.

이미지 타입 field는 어떻게 스프라이트가 보일 것인지 정의한다.

옵션들은 다음과 같다.

• Simple - 전체 sprite에 동일한 Scale
• Sliced - ***모르겠다...
• Tiled - Sliced와 유사하다, 하지만 tiles (반복하다)는 중앙 부분보단 그것을 늘린다.
• Filled - 원본으로부터 정의된 방향, 메서드 그리고 양으로 sprite내에 그것이 채운다는 것을 제외하고 Simple 같은 방법으로 sprite를 보여준다.

이 Native 크기를 조정하기위한 옵션, 그리고 그것은 Simple 혹은 Filled가 선택되었을 때, .원본 sprite 크기로 이미지를 리셋시킨다.

 

이미지는 'Texture Type' 설정으로부터 선택된 Sprite(2D / UI) 에 의해 UI Sprites로써 추출될 수 있다.

Sprite들은 예전 GUI Sprites와 비교하여 또다른 import settings을 가진다. 가장 큰 다른 점은 sprite editor가 추가된 것이다.

Sprite editor는 9-slicing 이미지 옵션을 제공한다. 이것은 image를 9개의 영역으로 분할한다. 그래서 그것은 만약 sprite가 크기가 재조정되다면 코너들은 늘어나거나 축소되지 않는다.

 

Raw Image

Image 컴포넌트는 sprite를 가진다. 하지만 Raw Image는 texture (no borders etc)를 가진다.

만약에 반면 케이스의 majority내에서 Image가 suitable한 것이 필요하다면 Raw Image는 오로지 사용될 수 있다. 

 

Mask

Mask는 보이지 않는 UI control이다. 하지만 controls의 자식 원소들의 특징을 동기화하기 위한 방법이다.

그 mask는 자식 원소들을 부모의 모양으로 restrict한다.

그래서 만약 자식이 부모보다 크다면, 오로지 부모 안에 맞는 자식의 한 부분만 보여지기된다.

 

Effects

Visual 컴포넌트들은 또한 다양한 간단한 이펙트를 적용할 수 있다. 예를 들어 간단한 아래 그림자 혹은 외곽선

더 나은 정보를 위해서 UI Effects 레퍼런스 페이지를 참고하라