[유니티] UI Tool Kit 01 . UI Tool Kit에 관하여

[ 유니티의 UI 제작 방법 ]

[IMGUI]

스크립트만으로 제작하는 방식 . OnGUI함수에 GUI 관련 라이브러리를 사용 , 인터페이스 요소 생성,배치

 

[UGUI]

유니티 제공 UI 패키지를 활용하는 방식 . 게임오브젝트 기반 .

 

[UI Tool Kit]

유니티의 최신 UI 시스템으로, 플랫폼 전반에서 성능을 최적화하도록 설계되었으며 표준 웹 기술을 기반으로 한다.

UI 툴킷을 사용하면 Unity 에디터용 확장을 생성하고 게임 및 애플리케이션을 위한 런타임 UI를 생성할 수 있다.

 

[ UI 툴킷의 특징 ]

[범용성]

• 개발의 범용성 : 널리 사용되고 있는 웹 개발과 상당히 흡사한 방식 사용 . 누구나 쉽게 인터페이스 제작 가능
• 적용의 범용성 : UI ToolKit은 유니티 에디터 윈도우를 직접 제작가능 , 컨텐츠의 사용자 인터페이스 또한 제작 가능

[적용 사이드]

• 컨텐츠 : 선명하고 텍스쳐를 건너띤 UI 렌더링으로 효율적으로 컨텐츠 사용자 인터페이스 제작, 보여주기가 가능하다.
• 에디터 : 개발을 위한 커스텀 UI 및 확장 프로그램 개발 가능

[왜 써야하는가]

• 전용 저작 도구 : UI Builder
• 동적 텍스처 렌더링 : UGUI 의 TMPRO가 기본 내장 .폰트도 바로 사용 가능
• 애니메이션 UI : 애니메이터 등등의 작업없이 바로 사용 가능
• 텍스쳐 없는 렌더링 기능 : 깨짐없이 , 텍스트 없이 USS로 지정가능
• UI 및 편집기 사용자 지정 : 커스텀 UI 생성 가능

[ Web 개발과 ToolKit ] 

[Web 개발에 사용하는 스크립트]

• HTML - 구조와 레이아웃 담당 : 프론트엔드의 레이아웃을 담당하는 부분으로 HTML외에도 프레임워크에 따라 다양한         스크립트 사용.
• CSS - 스타일 담당 : 스타일을 담당하는 CSS가 널리 사용된다 .
• JS - 로직담당 : JavaScript 혹은 TypeScript가 웹 개발에서 통상적으로 사용되고 있는 로직 담당 스크립트

[ UI ToolKit 사용하는 스크립트]

• UXML - 기존 웹 개발 프론트 레이아웃과 비슷한 구조를 가지고 있다 . UI의 레이아웃 담당
• USS - 스타일 담당 : CSS와 같이 USS가 UI의 스타일 결정 .
• C# - 로직담당 : 인터페이스의 컨트롤 및 이벤트는 C# 스크립트에서 정의한다 .

 

[ UI Builder의 구조]

[ UI Builder의 구조]

• USS 스타일 목록 - UXML에서 쓰는 스타일 목록
• 구성 하이어라키 (UXML) - 레이아웃을 볼 수 있다 . 트리형식으로 보여주어 비주얼트리라 말한다 . 트리별로 따로     볼 수 있다
• 라이브러리 & 샘플 컴포넌트  - 어떤 스타일시트 UXML이 있는지 확인 가능 .UI 생성시 사용할 요소들
• 뷰포트  - 현재 작업 내용을 시각적으로 보여준다 .
• UXML& USS 코드 프리뷰  - UXML/USS 코드 미리보기
•  인스펙터  - 웹 기반 프로퍼티를 유니티식으로 재구성

출처

 

• Dragon Crashers 에셋 링크
• 샘플 프로젝트 eBook
• https://www.youtube.com/watch?v=KrjclAb5XvU