새로운 UI Toolkit 샘플을 시도해 보세요 – 이제 자산 스토어에서 사용할 수 있습니다.
Unity 2021 LTS에서 UI Toolkit은 다양한 게임 애플리케이션 및 에디터 확장에 적응형 런타임 UI를 구축하고 디버깅하는 데 도움이 되는 기능, 리소스 및 도구 모음을 제공합니다. 직관적인 워크플로우는 아티스트, 프로그래머 및 디자이너 등 다양한 역할의 Unity 제작자가 UI 개발을 가능한 한 빨리 시작할 수 있도록 합니다.
UI Toolkit의 주요 이점에 대한 설명은 이전 블로그 게시물을 참조하세요. 향상된 확장성과 성능과 같은 이점은 Mechanistry와 같은 스튜디오에서 그들의 게임 Timberborn에 이미 활용되고 있습니다.
Unity UI는 3D 세계에서 UI를 배치하고 조명하는 데 가장 적합한 솔루션으로 남아 있으며, 다른 Unity 시스템과 통합할 수 있지만, UI Toolkit은 Unity 2021 LTS부터 성능과 확장성을 추구하는 게임 제작에 이미 이점을 제공할 수 있습니다. 특히 화면 공간 - 오버레이 UI에 효과적이며 다양한 화면 해상도에서 잘 확장됩니다.
그래서 UI Toolkit으로 UI 개발을 더 잘 지원하기 위해 두 가지 새로운 학습 리소스를 발표하게 되어 기쁩니다:
- UI Toolkit 샘플 – Dragon Crashers: 데모는 지금 무료로 에셋 스토어에서 다운로드할 수 있습니다.
- Unity에서의 사용자 인터페이스 디자인 및 구현: 이 무료 전자책은 여기에서 다운로드할 수 있습니다.
UI Toolkit 샘플 프로젝트의 일부 주요 기능에 대해 알아보려면 계속 읽어보세요.
UI Toolkit 샘플은 UI Toolkit을 사용하여 자신의 애플리케이션에 어떻게 활용할 수 있는지를 보여줍니다. 이 데모는 Unity 2021 LTS UI Toolkit 워크플로우를 사용하여 미니 RPG인 Dragon Crashers의 2D 프로젝트 일부 위에 전체 기능을 갖춘 인터페이스를 포함합니다.
샘플 프로젝트에서 설명된 일부 작업은 다음과 같은 방법을 보여줍니다:
- Unity 스타일 시트(USS) 파일에서 선택기를 사용하여 스타일을 지정하고 UXML 템플릿을 사용합니다.
- 원형 미터기 또는 탭 뷰와 같은 사용자 정의 컨트롤을 만듭니다.
- 슬라이더 및 토글 버튼과 같은 요소의 모양을 사용자 정의합니다.
- UI 오버레이 효과, USS 애니메이션, 계절 테마 등을 위해 렌더 텍스처를 사용합니다.
자산에 추가한 후 프로젝트를 시도하려면 재생 모드에 들어가세요. UI 툴킷 인터페이스는 씬 뷰에 나타나지 않습니다. 대신 게임 뷰 또는 UI 빌더에서 볼 수 있습니다.
왼쪽 메뉴는 모달 메인 메뉴 화면을 탐색하는 데 도움을 줍니다. 이 수직 버튼 열은 메인 메뉴를 구성하는 다섯 개의 모달 화면에 접근할 수 있게 해줍니다(화면 간 전환 시 활성 상태를 유지합니다).
일부 상호작용이 가능하지만, 예를 들어 장면에서 사용 가능한 물약을 드래그하여 캐릭터를 치유하는 것과 같은, 게임 플레이는 UI 예제에 계속 집중할 수 있도록 최소화되었습니다.
메뉴 바의 UI를 좀 더 자세히 살펴보겠습니다:
- 홈 화면은 애플리케이션을 시작할 때 착륙 패드 역할을 합니다. 이 화면을 사용하여 게임을 플레이하거나 시뮬레이션된 채팅 메시지를 받을 수 있습니다.
- 캐릭터 화면은 게임 오브젝트와 UI 요소의 혼합을 포함합니다. 여기에서 네 개의 드래곤 크래셔 캐릭터 각각을 탐색할 수 있습니다. 통계, 기술 및 생물 탭을 사용하여 특정 캐릭터 세부정보를 읽고, 인벤토리 슬롯을 클릭하여 아이템을 추가하거나 제거합니다. 미리보기 영역은 타일 배경 위에 조명 및 리깅된 2D 캐릭터를 보여줍니다.
- 리소스 화면은 문서, 포럼 및 UI Toolkit을 최대한 활용하기 위한 기타 리소스에 연결됩니다.
- 상점 화면은 게임 내 상점을 시뮬레이션하여 금이나 보석과 같은 하드 및 소프트 통화와 치유 물약과 같은 가상 상품을 구매할 수 있습니다. 상점 화면의 각 항목은 별도의 VisualTreeAsset입니다. UI Toolkit은 런타임에 이러한 자산을 인스턴스화합니다. Resources/GameData의 각 ScriptableObject에 대해 하나씩입니다.
- 메일 화면은 받은 편지함과 삭제된 메시지를 구분하기 위해 탭 메뉴를 사용하는 허구의 메시지의 프론트 엔드 리더입니다.
- 게임 화면은 자동으로 재생되는 Dragon Crashers 프로젝트의 미니 버전입니다. 이 프로젝트에서는 UI Toolkit을 사용하여 수정된 몇 가지 요소를 확인할 수 있습니다. 예를 들어 일시 정지 버튼, 체력 바 및 캐릭터가 피해를 입을 때 치유 물약 요소를 드래그할 수 있는 기능이 있습니다.
UI Toolkit은 전체 프로젝트에 대해 안정적이고 일관된 UI를 구축할 수 있게 해줍니다. 동시에 게임의 테마와 스타일을 더욱 풍부하게 하기 위해 자신의 디자인 장식과 세부 사항을 추가할 수 있는 유연한 도구를 제공합니다.
샘플에서 UI 디자인을 다듬는 데 사용된 몇 가지 기능을 살펴보겠습니다:
- 렌더 텍스처: UI Toolkit 인터페이스는 렌더 큐에서 마지막으로 렌더링되므로 다른 게임 그래픽을 UI Toolkit UI 위에 오버레이할 수 없습니다. 렌더 텍스처는 이 제한을 우회할 수 있는 방법을 제공하여 인게임 효과를 UI 툴킷 UI에 통합할 수 있게 합니다. 렌더 텍스처를 기반으로 한 이러한 효과는 절제해서 사용해야 하지만, 게임 플레이를 실행하지 않고도 전체 화면 UI의 맥락 내에서 선명한 효과를 여전히 누릴 수 있습니다. 다음 이미지는 데모에서의 여러 렌더 텍스처를 보여줍니다.
- 테마와 테마 스타일 시트 (TSS): TSS 파일은 일반 USS 파일과 유사한 자산 파일입니다. 이들은 USS 선택자 및 속성 및 변수 설정을 통해 사용자 정의 테마를 정의하는 시작점 역할을 합니다. 데모에서는 기본 테마 파일을 복제하고 복사본을 수정하여 계절별 변형을 제공했습니다.
- 사용자 정의 UI 요소: 디자이너는 고정관념을 깨고 생각하도록 훈련받았기 때문에 UI 툴킷은 표준 라이브러리를 사용자 정의하거나 확장할 수 있는 충분한 공간을 제공합니다. 데모 프로젝트는 탭 메뉴, 슬라이드 토글 및 드롭다운 목록에서 몇 가지 사용자 정의 요소를 강조하며, UI 아티스트가 개발자와 함께 무엇을 할 수 있는지를 보여주기 위해 원형 카운터를 포함합니다.
- 애니메이션 UI 상태 변경을 위한 USS 전환: 메뉴 화면에 전환을 추가하면 시각적으로 더 매끄럽고 세련되게 만들 수 있습니다. UI Toolkit은 전환 애니메이션 속성을 통해 이를 더 간단하게 만들어 주며, 이는 UI Builder의 검사기의 일부입니다. 속성, 지속 시간, 완화 및 지연 속성을 조정하여 애니메이션을 설정합니다. 그런 다음 UI Toolkit의 스타일을 변경하여 런타임에 애니메이션 전환을 적용합니다.
- 배경 흐림을 위한 후처리 볼륨: 게임에서 인기 있는 효과는 혼잡한 게임 플레이 장면을 흐리게 하여 플레이어의 주의를 특정 팝업 메시지나 대화 창으로 끌어오는 것입니다. 이 효과는 심도를 활성화하여 달성할 수 있습니다 볼륨 프레임워크 (유니버설 렌더 파이프라인에서 사용 가능).
우리는 UI를 강화하기 위해 효율적인 워크플로우가 사용되도록 했습니다. 프로젝트를 잘 조직하기 위한 몇 가지 권장 사항은 다음과 같습니다:
- 일관된 명명 규칙: 시각적 요소 및 스타일 시트와 일치하는 명명 규칙을 채택하는 것이 중요합니다. 명확한 명명 규칙은 UI Builder에서 계층 구조의 조직을 유지할 뿐만 아니라 팀원들이 더 쉽게 접근할 수 있도록 하며, 코드를 깔끔하고 읽기 쉽게 유지합니다. 더 구체적으로, 우리는 시각적 요소 및 스타일 시트를 위한 블록 요소 수정자 (BEM) 명명 규칙을 제안합니다. 한눈에 보기에도 요소의 BEM 명명은 그것이 무엇을 하는지, 어떻게 보이는지, 그리고 주변의 다른 요소들과 어떻게 관련되는지를 알려줍니다. 다음 BEM 명명 예제를 참조하십시오:
- 반응형 UI 레이아웃: 웹 기술과 유사하게, UI 툴킷은 "자식" 시각 요소가 "부모" 시각 요소 내에서 현재 사용 가능한 크기에 적응하는 레이아웃을 생성할 수 있는 가능성을 제공하며, 각 요소가 참조 지점에 고정된 절대 위치를 가지는 다른 레이아웃을 제공합니다. 이는 유니티 UI 시스템과 유사합니다. 샘플은 UI의 시각 요소를 통해 필요에 따라 두 가지 옵션을 사용합니다.
- PSD 가져오기: 데모를 만들기 위한 가장 효과적인 도구 중 하나인 PSD 가져오기는 아티스트가 모든 스프라이트를 개별적으로 수동으로 내보내지 않고도 마스터 문서에서 작업할 수 있게 해줍니다. 변경이 필요할 경우, 원본 PSD 파일에서 변경할 수 있으며 유니티에서 자동으로 업데이트됩니다.
- 스크립터블 오브젝트: UI 디자인 및 구현에 집중하기 위해, 샘플 프로젝트는 스크립터블 오브젝트를 사용하여 인앱 구매 및 메일 메시지와 같은 백엔드 데이터를 시뮬레이션합니다. 이 대체 데이터를 Resources/GameData 폴더에서 편리하게 사용자 정의하고, UI 툴킷에서 인벤토리 항목 및 캐릭터 또는 대화 데이터와 같은 유사한 데이터 자산을 생성하는 예제를 사용할 수 있습니다.
UI 툴킷을 사용하면 UI 레이아웃과 스타일이 코드와 분리된다는 점을 기억하세요. 이는 백엔드 데이터를 다시 작성하는 것이 UI 디자인과 독립적으로 발생할 수 있음을 의미합니다. 개발 팀이 이러한 시스템을 교체하더라도 인터페이스는 계속 작동해야 합니다.
데모에서 사용된 추가 도구에는 특수 효과를 위한 내장 파티클 시스템으로 생성된 파티클 시스템과 2D 도구 세트 등이 포함됩니다. 이 다양한 요소들이 어떻게 작용하는지 보려면 인스펙터를 통해 프로젝트를 검토해 보세요.
UI 아티스트가 만든 참조 아트는 UI/Reference에서 찾을 수 있으며, UI Builder에서 복제되었습니다. 모형에서 와이어프레임에 이르는 전체 과정은 e-book에 문서화되어 있습니다. 마지막으로, 샘플의 모든 콘텐츠를 자신의 Unity 프로젝트에 추가할 수 있습니다.
