유니티 UI - Layer

1. Layer

레이어는 층이다. 구조적으로 계층을 이룬다. 지층을 예로 들 수 있다. 우리가 밟고 있는 지면을 계속 파면, 그 아래에 있는 흙을 볼 수 있다. 컴퓨터에서 OSI Seven Layer라는 모델도 하나의 예이다. 각층의 역할을 정의하고, 이를 세분화한다.  이러한 개념은 포토샵 같은 이미지 편집 프로그램에 없어서는 안 되는 하나의 중요한 요소로 자리 잡았다. 선화와 채색을 레이어로 구분한다. 기본 채색에 레이어를 추가하여, 색상을 다양하게 표현한다. 레이어를 사용하기 때문에, 기존 채색된 부분을 변경, 수정 없이 자유롭게 색을 조합할 수 있다.    

2. UI Layer

 

유니티 UI System은 계층구조를 이룬다. 각 층은 다른 계층에 영향을 주지 않는다. UI의 계층적 구성은 Canvas 및 기타 요소와 상대적으로 UI 요소를 배치하기 쉽다는 장점이 있다. 

 

아래의 이미지는 캔버스에 이미지 컴포넌트를 생성한 것이다. 이미지가 보이는 순서는 Red → Green → White이다.

동일한 계층에서 보이는 순서는 아래 → 위이다. 

A가 B의 하위 요소라면, B가 그려지는 영역은 A를 가린다. 

UI를 디자인 할 때에는 순서가 매우 중요하다. Button을 생성했는데, Click Event가 발행하지 않을 수도 있으며, 이미지가 Text를 가릴 수 있다.  

 

UI Layer

 

 

UI 요소를 사용하기 위해서는 Using 키워드를 사용해 컴포넌트의 위치를 지정해줘야 한다. Using 키워드는 해당 클래스 및 컴포넌트가 있는 위치를 나타낸다. Using 키워드는 Class 밖이며, Class보다 상위에 위치해야 한다.

 

using UnityEngine.UI;

public class MyExample : MonoBehaviour
{
  public Text myName;
  public Button myButton;
}

 

3. 툴바 (Toolbar)

 

UI의 모든 요소는 Canvas안에 있어야 하며, UI 컴포넌트의 기본 구조는 사각형이다.

UI 요소의 사각 트랜스폼을 사용하여, 피봇, 크기, 위치 등을 지정한다. 하지만 이외에도,

Scene View 상단의 툴바를 사용하여, UI 요소를 수정할 수 있다.

 

Toolbar

• Hand Tool : Scene View의 화면을 움직인다. 
• Move Tool :  UI 요소를 이동한다.
• Rotate Tool : UI 요소를 회전한다.
• Scale Tool:  UI 요소의 규모를 변경한다.
• Rect Tool :  UI 요소의 크기를 변경한다.

사각 툴은 크기를 변경하는 것 이외에도, UI 요소의 이동, 회전에 사용한다.

사각 툴을 선택한 상태에서, 드래그를 하면 이동이 가능하다.

사각 툴을 선택한 상태에서 UI 요소의 바깥에 마우스를 가져가면, 포인터의 모양이 변경된다. 이때 마우스를 드래그하면 UI 요소를 회전할 수 있다. 

 

Toolbar

Toolbar에는 UI 요소의 상태 변경의 기준을 변경할 수 있으며, Pivot을 설정할 수 있다.    

• Center :  UI 요소의 위치를 설정한다. 
• Pivot : 피봇의 위치를 설정한다. 
• Global : 로컬에서 회전을 설정한다.
• Local : 로컬에서 회전을 설정한다. 

4. UI 순서 바꾸기 ( Sibling Index )

 

월드를 제작하다 보면 실시간으로, UI의 순서를 변경해야 하는 경우가 발생한다. 유니티는 순서를 스크립트에서 수정하기 위한 기능을 제공한다. 예를 들어 Drag and Drop이 있다. Drag 하는 오브젝트가 그리는 순서(Sibling Index)가 높아, 다른 UI 오브젝트에 의해 보이지 않는 경우가 있다. 

 

• SetSiblingIndex(int) : index 값을 사용해 순서 변경 ( 0 1 2 3.....)
• SetAsLastSibling()  :  제일 마지막에 그린다. 맨 앞에 보이게 한다.
• SetAsFirstSibling()  : 제일 처음에 그린다. 맨 뒤에 보이게 한다.

SiblingIndex는 0부터 시작한다. 0은 가장 먼저 그리며, 맨 뒤에 보인다. SetAsFirstSibling()과 같다.

SiblingIndex의 값이 커질수록 맨 앞에 보인다. SetAsLastSibling()과 같다.

 

위의 함수의 사용은 Transform을 이용한다. 따라서 게임 오브젝트에도 적용이 가능하다. 

 

using UnityEngine;
using UnityEngine.UI;

public class SiblingExample : MonoBehaviour
{
   public Image white;
   
   void Start(){
    white.transform.SetAsLastSibling(); 
  //  white.transform.SetSiblingIndex(2);
   }
}


public class SiblingExample : MonoBehaviour
{
   public Image red;
   
   void Start(){
    red.transform.SetAsFirstSibling();
    //  red.transform.SetSiblingIndex(0);
   }
}