이 Unity의 동영상 튜토리얼은 Unity 6.2의 UI 툴킷을 사용하여 월드 공간 유저. '광고 지면'의 타겟 고객 인터페이스를 만드는 방법에 대한 상세한 설명을 제공합니다. 다음은 몇 가지 주요 단계입니다.
- 프로젝트를 설정하고 UI 빌더를 엽니다.
- 첫 번째 UXML 문서 저장
- 스타일 시트(USS 파일) 및 재사용 가능한 스타일 클래스를 생성 및 적용하여 유연하고 유지 관리 가능한 UI를 제작하는 방법
UI 툴킷 Unity 6.2 튜토리얼에서는 유저. '광고 지면'의 타겟 고객 상호 작용을 개선하는 실용적인 예시도 다룹니다. 유저 클래스를 사용하여 버튼에 커스텀 마우스 오버 효과를 구현합니다.
마지막으로, 월드 공간 렌더링을 위해 UI Document 관련된 Panel Settings를 구성하여 3D 씬에 UI를 통합하는 전체 워크플로를 보여 주므로 게임 환경 내에서 물리적으로 존재하는 메뉴가 생성됩니다.
FAQ
UI 빌더를 시작하려면 어떻게 해야 하나요?
유저. '광고 지면'의 타겟 고객 인터페이스를 생성하려면 UI Builder 창을 열고 작업물을 UXML 에셋으로 저장합니다. 이 파일은 UI 요소의 구조와 계층 구조를 저장합니다.
다음 단계에 따라 시작하세요.
1. Unity 에디터의 메인 메뉴에서 UI 빌더로 이동합니다. Window > UI 툴킷 > UI 빌더
2. UI Builder 창이 열리면 새 UI Document 저장합니다. UI Builder 메뉴에서 File > Save As...로 이동합니다.
3. 프로젝트의 위치 선택하고 파일을 저장합니다. 그러면 씬에서 UI의 소스로 사용할 .uxml 에셋이 생성됩니다.
동영상의 다음 섹션에서 직접 확인해 보세요.
(1:10) - UI 빌더 창 열기
(1:23) - UXML 파일 저장
UI 빌더에 대해 자세히 알아보려면 Unity 기술 자료 페이지를 확인하세요.
다양한 UI 요소에 일관된 스타일을 어떻게 적용하나요?
UI 전반에서 일관된 모습을 유지하는 가장 효율적인 방법은 웹 개발에서 CSS와 유사하게 작동하는 스타일 시트를 사용하는 것입니다. 스타일과 구조를 분리하여 UI를 더 쉽게 관리할 수 있습니다.
이 시스템은 다음 세 가지 주요 부분으로 구성됩니다.
- 스타일시트 (.uss 파일): UI 빌더에서 새 스타일 시트를 생성하고 메인 UI 컨테이너에 연결합니다. 이 파일에는 모든 스타일 규칙이 저장됩니다.
- 스타일 클래스: 재사용 가능한 스타일을 만들려면 UI Builder에서 시각적 요소를 선택합니다. 스타일 클래스 목록 아래의 인스펙터에 새 클래스 이름(예: "menu-button")을 입력하고 목록에 추가합니다.
재사용성: 이제 동일한 스타일 클래스를 다른 UI 요소에 할당할 수 있습니다. 클래스를 공유하는 모든 요소는 정의된 프로퍼티를 자동으로 상속하여 균일한 외관을 유지합니다. 스타일 클래스를 변경하면 할당된 모든 요소가 동시에 업데이트됩니다.
동영상의 다음 섹션에서 직접 확인해 보세요.
(2:18) - 새 스타일 시트 만들기
(2:57) - 새로운 스타일 클래스 만들기
(3:07) - 클래스에서 새 USS 선택자 만들기
(3:43) - 스타일 클래스의 변경 사항이 할당된 모든 요소에 어떤 영향을 미치는지 설명
USS(Unity 스타일 시트)로 UI 스타일을 지정하는 방법에 대해 자세히 알아보려면 Unity 기술 자료 페이지를 확인하세요.
버튼을 위한 커스텀 마우스 오버 효과는 어떻게 생성하나요?
USS 유사 클래스를 사용하여 커스텀 마우스 오버 효과와 기타 인터랙티브 스타일을 만들 수 있습니다. :hover 유사 클래스를 사용하면 유저. '광고 지면'의 타겟 고객의 커서가 요소 위에 있을 때만 적용되는 특정 스타일 세트를 정의할 수 있습니다.
표준 Unity 버튼에 커스텀 마우스 커서를 적용하려면 다음 단계를 따르세요.
1. UI 빌더에서 버튼을 선택하여 인스펙터에서 기본 스타일 클래스를 확인합니다. 표준 버튼 클래스는 Unity 버튼입니다.
2. Unity 버튼 클래스를 더블 클릭하여 스타일 시트에 선택자를 추가합니다. 이를 통해 부분 투명하도록 만들기 등 버튼의 기본 모습을 수정할 수 있습니다.
3. 원래 클래스에 :hover 유사 클래스를 추가하여 스타일 시트에 새 선택자를 만듭니다. .Unity-button:hover
4. 새로운 :hover 선택자를 활성화하면 배경 컬러를 완전히 불투명하도록 변경하는 등 마우스 커서를 올리기 위해 원하는 스타일을 정의합니다. 이제 UI가 마우스 오버 이벤트 중에 이러한 스타일을 자동 전환합니다.
동영상의 다음 섹션에서 직접 확인해 보세요.
(6:29) - 유사 클래스 소개
(6:54) - 기본 .unity-button 스타일 클래스 찾기
(7:24) - :hover 유사 클래스 선택자 만들기
(7:39) - 최종 마우스 오버 효과 시연
유사 클래스에 대해 자세히 알아보려면 Unity 기술 자료 페이지를 확인하세요.
씬에 UI 툴킷 요소를 월드 공간 오브젝트로 어떻게 추가하나요?
Unity 6.2는 월드 공간에서 UI 요소를 직접 렌더링할 수 있는 기능으로 UI 툴킷을 개선합니다. 이 과정에서는 UI Document 게임 오브젝트를 사용하여 씬에 UXML 에셋을 호스팅합니다.
다음 시퀀스를 따라 월드 공간 UI를 만듭니다.
1. Hierarchy 창에서 오른쪽 클릭하고 UI Toolkit > UI Document을 선택합니다. 그러면 씬에 새 게임 오브젝트가 생성됩니다.
2. 새 UI Document 게임 오브젝트를 선택합니다. Inspector에서 Source Asset 필드를 찾고 저장된 .uxml 파일을 할당합니다.
3. UI Document와 연결된 패널 설정 에셋을 클릭합니다. 그러면 프로젝트 창에 에셋이 강조 표시됩니다.
4. Panel Settings 에셋을 선택하여 Inspector에서 속성을 확인합니다. 렌더 모드를 기본 스크린 공간에서 월드 공간으로 변경합니다.
5. 월드 공간으로 전환한 후에는 UI Document 게임 오브젝트의 RectTransform 컴포넌트를 조정하여 3D 씬 내에서 UI 평면의 위치, 회전, 스케일링을 설정할 수 있습니다.
동영상의 다음 섹션에서 직접 확인해 보세요.
(7:49) - 씬에서 UI Document 만들기
(7:59) - UXML 소스 에셋 할당
(8:08) - 패널 설정 액세스
(8:23) - 월드 공간 렌더 모드로 전환
(8:58) - 최종 월드 우주 UI 시연
월드 공간 UI에 대해 자세히 알아보려면 Unity 기술 자료 페이지를 확인하세요.
