[C#][Unity] UI 속성

1. 이벤트와 레이 캐스팅 (Event & Raycast)

사용자로부터의 이벤트는 이벤트 시스템에 의해 관리되며, 이벤트가 발생하는 것은 스크린 영역에서 발생한다. 레이 캐스팅은 스크린 영역에서 월드로 레이(광선)를 발사해 대상 오브젝트에 이벤트를 처리하도록 한다.

UI 요소는 Interactable 또는 Raycast Target이라는 속성이 있다. Raycast Target을 승인하지 않을 경우에는 해당 UI 요소는 이벤트를 처리하지 않는다.

 

2. 마스크( Mask )

Mask 컴포넌트는 특정 영역을 마스크로 설정하여, 나머진 부분을 가리는데 사용된다. 이미지와 같은 그래픽적 특성을 가지는 UI 요소는 Maskable 속성을 가지고 있다.

Maskable 속성의 기본 값은 체크된 상태이다. Maskable 속성으로 선택된 대상은 Mask 컴포넌트의 영향을 받는다.   

 

3. UI Elements

UI 요소( UI Elements )는 Canvas 안에 위치해야한다. UI 요소는 큐브와 같은 게임 오브젝트이다. 차이점은 UI 요소는 Rect Transform을 가지며, Canvas 안에서 동작한다는 점이다.    

3.1 UI Panel

UI 요소 중에 패널 ( Panel )이 있다. 패널은 생성 시 Rect transform과 Image 컴포넌트를 가진다. UI Image와 유사하다. 하지만 Rect transform의 설정 및 Image 컴포넌트의 설정이 조금 다르다. 패널의 초기 설정은 부모의 크기와 동일하고, 백그라운드 이미지를 가진다. 패널 오브젝트는 UI의 Layout을 구성하는 UI 요소들의 부모로 설정된 것으로 예상된다. UI Layout을 구성하기에 용이하다. (유니티 공식 문서에는 패널에 대한 페이지를 제공하지 않는다.). 

3.2 Create Empty

Empty GameObject를 생성하듯이, UI 요소에 Empty 요소를 추가할 수 있다. Empty UI 요소는 Rect Transform만을 가지고 있다. Image 컴포넌트를 추가하여, Image UI 요소로 사용할 수 있다. 뿐만아니라 다양한 요소들을 추가할 수 있다. 

3.3 Text

글자를 보여주는 UI 요소이며, 글자를 보여주기 위한 텍스트 영역을 가지고 있다. 다른 UI 시스템에서는 Label로 불린다. 입력은 받을 수 없다.   

 

3.3.1 Character 

Font : 폰트의 기본은 Arial이다. 프로젝트 폴더에 폰트를 추가하고, 폰트를 드래그하여 폰트를 수정한다. 

Font Style : 

• Normal : 기본
• Bold : 두꺼운 글자
• Italic : 비스듬한 글자
• Bold and Italic : 두껍고 비스듬한 글자

Font Size : 폰트의 크기를 수정한다. 

Line Spacing : 줄 간격을 나타낸다. 

Rich Text : 색상을 변경하거나, 이모티콘을 삽입한 글을 표시하도록 한다.   

 

3.3.2 Paragraph

Alignment : 엑셀, 워드, 한컴 등에서 사용하는 것과 같은 글자 정렬이다. 

Align By Geometry : 치수, 모양, 상대적 위치에 따라 글자를 정렬한다.

Vertical, Horizontal Overflow : Rect Transform의 영역 밖에서도 글자를 표시한다.  

Vertical, Horizontal Wrap : Rect Transform의 영역에서만 글자를 표시한다.

Best Fit : 글자 크기를 사각 영역에 맞춘다. 

Min Max를 설정할 수 있으며, 글자 크기는 Min Max 수치안에서 사각 영역에 맞춘다.  

Color : 글자의 색상을 설정한다. 

Material : 글자의 머티리얼을 설정한다. 

Raycast target : 레이캐스팅을 이해해야 한다. 단순하게 설명하면, 이 부분이 체크된 상태에서는 클릭과 같은 이벤트를 받는다. 체크(✓)가 해제된 상태에서는 이벤트를 받지 않는다. 

Maskable : Mask 컴포넌트와 관련된 옵션이다. 체크(✓)된 상태에서는 Mask 컴포넌트로 가릴 수 있다. 체크(✓)가 해제된 상태에서는 Mask 컴포넌트로 가릴 수 없다.     

 

3.4 Input Field 

사용자로부터 입력을 받을 수 있는 UI 요소이다. 

 

Interactable과 Transition은 Button 속성에서 다룬다. 

 

Text Component : 입력받은 텍스트를 표시하는 Text 컴포넌트이다.

Text : 입력받은 텍스트이다. 

Character Limit : 글자 입력 한계 값이다. 0은 최대로 입력받는 값이다. 1이상부터는 입력 한계 값이다. 가령 5로 설정하면, 5개의 문자까지를 입력받을 수 있다. 

Content Type : 입력받는 양식을 의미한다. 이메일, 이름, 숫자, 패스워드 등이 있다. 

Line Type : 컨텐츠 타입이 Standard일 경우 선택 가능한 옵션이다. Single Line, Multi Line Submit (Enter [=Return] 입력 시 ), Multi Line New Line (Enter 입력 시 한 줄 아래로 ) 

Placeholder : 초기 상태를 나타내는 Text 컴포넌트이다. 예로, 5글자로 입력해주세요. 입력을 받기전 표시되는 글자이다.

 

Caret : 입력 위치를 나타내는 아이콘이다. 

• Caret Blink Rate : Caret의 깜빡거림 설정이다. 
• Caret Width : Caret의 크기 설정이다.
• Custom Caret Color : 컬러 설정이다. default는 검은색이다.

Selection Color : 입력한 글자를 드래그로 선택하면 나나타는 색상이다.

Hide Mobile Input : 모바일의 가상 입력 시스템을 보일것인지 설정한다.

Read Only : 사용자로 부터의 입력을 받지 않도록 설정한다.   

 

이벤트 리스너 등록

• On Value Changed (String) : 입력 값이 변경했을 때 이벤트 리스너를 등록한다. +-로 추가 삭제한다.
• On End Edit (String) : 입력이 완료되었을 때 이벤트 리스너를 등록한다 +-로 추가 삭제한다.

3.5 Button 

Click Event를 받기 위한 UI 요소이다. 사용자로부터의 입력을 받기 위해 사용된다. 

 

Interactable : Raycast Target 속성과 비슷하다. 이벤트를 받을지 받지 않을지를 지정한다.  

Transition : None, Color Tint, Sprite Swap, Animation

 

• None : 버튼의 상태를 나타내는  컴포넌트를 사용하지 않는다.
• Color Tint : 색상을 변경한다. 
• SpriteSwap : 스프라이트를 변경한다. 
• Animation : 애니메이션을 변경한다. 

 

Target Graphic

• None : 사용하지 않는다.
• Color Tint : 이미지 컴포넌트를 사용한다.
• SpriteSwap : 이미지 컴포넌트를 사용한다.
• Animation : 애니메이션을 사용한다. 

 

컴포넌트의 상태를 나타낸다. 

• Normal 활성화된 일반적인 상태이다.
• Highlight : 마우스 포인터가 사각 영역 안에 있을 때이다.
• Pressed :  마우스로 누르고 있을 때이다.
• Selected : 선택된 상태이다. 사각 영역 안에서 벗어난 영역을 선택하면, Normal 상태가 된다.
• Disabled : Interactable을 선택 해제한 상태이다.

Color Multiplier : 이벤트 색상의 값에 Color Multiplier 값을 곱한다. 1.0~5.0 사이의 값을 갖는다.

 

using UnityEngine;

public class Example : MonoBehaviour
{
	public float multiplierValue;
    void Start()
    {
        Color color = Color.gray * multiplierValue;
    }
}

Fade Duration : 이벤트의 전환이 발생하였을 때, 이벤트 전환 시간 설정이다.   

 

Navigation : 다른 컴포넌트와의 상호작용 관계를 나타낸다. Visualize를 선택하면, 워크 플로우를 보여준다.