UI

UI

UI 형태

IMGUI (Immediate Mode GUI) 즉시 모드 GUI

• 코드를 이용해 UI를 표시하는 방법
• 개발 과정에서 간단한 테스트용으로 사용
• OnGUI 함수에서 코드를 구현
• OnGUI 메서드는 Update와 같이 매 프레임마다 실행 됨, 테스트 이후에는 제거해야함

using UnityEngine;

public class IMGUIDemo : MonoBehaviour
{
	private void OnGUI()
	{
		GUI.Label(new Rect(10,10,200,50), "SpaceShooter");

		if (GUI.Button(new Rect(10,60,100,30), "START"))
		{
			Debug.Log("START button Clicked!");
		}
	}
}

UI Toolkit

• UXML(Unity XML), USS(Unity Style Sheets) 와 같은 UI Asset 파일로 UI 스타일을 정의하고 디자인함
• 위치, 크기, 정렬 등의 속성을 수치로 관리하기 때문에 정확한 디자인을 하기에 매우 유리한 방식
• UI 전문 개발자에게 매우 편리한 도구 🔅 Menu => Window => UI Toolkit => UI Builder

Unity UI (UGUI)

• 게임오브젝트 기반의 UI 모든 구성요소를 게임오브젝트로 관리
• 레이블, 버튼, 슬라이드 바, 패넝 등과 같은 UI요소는 게임오브젝트에 추가하는 컴포넌트 형태로 구현
• Scene View 에서 직접 보면서 UI를 배치하고 조정할 수 있다는 장점이 있음

Canvas Object

• Canvas Object는 Canvas Component를 포함하고 있는 게임오브젝트의 일종
• ❗️ 모든 UI 요소(UI element)는 반드시 Canvas Object 하위에 위치해야함
• Canvas Object는 기존 GameObject에 있던 Transform 대신 Rect Transform Component를 가짐
• Canvas Object는 한 Scene에서 여러 개 생성하거나 다른 Canvas Object의 하위로 Child화 할 수 있다.

EventSystem Object

• Canvas Object 생성 시 자동으로 생성 됨
• 시스템에서 발생하는 키보드, 조이스틱, 스크린 터치 등의 입력 정보를 Canvas 하위의 UI Element에 전달

Event System Component

• First Selected 속성을 이용 처음 포커스를 갖는 UI 항목을 지정
• Event system Component가 없으면 UI 항목이 클릭 또는 터치와 같은 다양한 입력 이벤트에 반응하지 않음

Canvas Object Components

🔆 같은 Canvas 컴포넌트이지만 하위 컴포넌트로 Rect Transform을 수정할 수 있음

Rect Transform

• UI 항목이 반드시 가지고 있는 Component
• Anchors, Pivot, 크기(W,H), 위치 (Pos X, Pos Y, Pos Z)와 Rotation, Scale 정보를 저장하고 있음
• 처음 생성된 Canvas Object는 Rect Transform 속성에 대한 직접적 수정이 불가 (화면 크기에 따라 다름)

  Anchors (앵커)

• 용도: 앵커는 UI 요소가 부모 RectTransform에 어떻게 배치되고 크기가 조정되는지를 결정
• 동작 방식: 앵커는 부모 RectTransform 내의 상대적 위치를 표현합니다.
  예를 들어, 앵커가 왼쪽 상단에 위치하면 그 UI 요소도 부모의 왼쪽 상단에 붙음
• 종류: 앵커는 단일 포인트 또는 범위가 될 수 있습니다.
  범위를 사용하면 부모의 크기 변화에 유연하게 대응할 수 있습니다.

  Pivot (피벗)

• 용도: 회전과 스케일링의 기준점을 설정합니다.
• 동작 방식: 피벗은 RectTransform의 로컬 좌표계 내에서 정의
  (0,0)은 왼쪽 하단, (1,1)은 오른쪽 상단입니다.
• 응용: 예를 들어, 피벗을 (0.5, 0.5)로 설정하면 회전과 스케일링은 RectTransform의 중심을 기준

Canvas Component

• UI 항목을 화면에 배치하고 렌더링 하는 역할
• Render Mode 옵션에 따라 UI 항목의 화면 배치 방식을 결정

  Render Mode - enum type

Screen Space - Overlay

• Default 항목은 Scene의 가장 상위 계층에 표현 됨
• 일반적인 UI 구성에 사용하며, 어떠한 3D 객체에 의해서도 가려지지 않는다.
• Canvas 크기는 화면의 해상도에 맞춰 자동으로 스케일 조정 됨

  Screen Space - Camera

• Overlay와 같이 가장 상위에 UI 항목이 표시 됨
• 다른점은 UI 항목을 렌더링하는 별도의 카메라를 설정할 수 있음
• 씬 전체를 비추는 Main Camera와 별도의 UI만을 위한 Camera를 설정 가능

❗️ 별도의 Camera 선택 시 Audio Listner컴포넌트를 제거 하야한다.

World space

• World Space 옵션은 Scene에 있는 다른 게임오브젝트에 직접 UI 항목을 추가
• HUD나 VR, AR 컨텐츠의 UI를 구현할 때 사용
• World Space로 설정하면, Rect Transform에 영향을 받지 않고, 오브젝트 Position에 영향을 받는다.
• Overlay로 설정한 Canvas는 물리적 위치를 변경할 수 없지만, World Space로 설정하면 위치설정 가능

Image Component

• 화면에 텍스쳐를 표시하는 컴포넌트
• Sprite 타입으로 변환된 텍스쳐만 사용 가능

|속성|설명| |:–|:–| |Source Image|화면에 표시하려는 이미지 (Sprite만 허용)| |Color|이미지의 색상 지정(RGBA)| |Material|이미지를 렌더링 하기 위한 Material(Normal Map 적용 시 사용 가능)| |Image Type|Simple : 반복이 필요 없거나 이미지가 고정 크기인 경우의 옵션
Sliced : 이미지를 리사이즈해도 왜곡 없이 표현하는 옵션
Tiled : 이미지를 타일링 처리할 수 있는 옵션
Filled : 이미지를 부분적으로 채울 수 있는 옵션|

Image Type - enum

Simple

• 일반적으로 고정 크기를 갖는 이미지
• 반복 및 별도의 다른 기능이 필요 없을 때 사용

• Perserve Aspect 선택 시 이미지 크기를 원본 사이즈에 맞게 자동으로 비율 조절
• Set Native Size 선택 시 원본 이미지의 크기로 재설정 됨

  Sliced

• 이미지의 크기를 조절 해도 외곽선이 뭉개지거나 깨지지 않게 설정 가능

• Border Line에 의해 나눠진 9개의 Sliced 된 이미지 조각들이 이미지의 크기가 바뀌어도
  해당 위치의 부분 이미지만 잘라와서 표현하는 방식으로 외곽선이 깨지지 않음
• 가변적인 window를 제작할 때 유용

• Fill Center는 9번 이미지를 표시 할 것인지 아닌지 선택하는 옵션

  Tiled

• 이미지가 반복적인 패턴일 때 동일한 패턴이 반복적으로 표시

• Tiled 선택 시 해당 Sprite 의 Warp Mode 가 Repeat가 아니면 해당 Warning Comment 가 발생

Wrap Mode	설명
Repeat	텍스처를 반복하는 옵션
Clamp	텍스처를 반복하지 않고 늘리는(Stretch) 옵션
Mirror	미러링 처리를 해서 반복하는 옵션
Mirror Once	미러링 처리 후 한 번만 반복하는 옵셥
Per-axis	UV 축별로 Repeat, Clamp를 지정하는 옵션

Filled

• 이미지를 특정 방향으로 채워서 그릴 수 있음
• Fill Method : 채워지는 방향 설정
• Fill Origin : 어느 위치에서부터 채울 것인지 설정

Fill Method Type	설명	Clockwise(시계방향) 속성
Horizontal	가로 방향으로 이미지가 채워짐	X
Vertical	세로 방향으로 이미지가 채워짐	X
Radial90	이미지가 90도 각도까지 채워짐	O
Radial180	이미지가 180도 각도까지 채워짐	O
Radial360	이미지가 360도 각도까지 채워짐	O

Horizontal	Vertical	Radial90	Radial180	Radial360

Z - Order

• Unity UI 는 Z - Order의 개념을 Hierarchy View의 순서로 결정
• 이 순서가 위로 갈 수록 UI는 아래에 깔린다고 보면 된다.