Version: 2023.1
언어: 한국어
런타임 UI 시작하기
Panel Settings 프로퍼티 레퍼런스

게임 뷰에서 UI 렌더링

UI를 렌더링하고 게임 뷰에서 사용자의 입력에 반응하려면 UI Document 컴포넌트를 통해 UXML 문서를 Panel Settings 에셋에 연결합니다.

모든 UI Document 컴포넌트는 UI를 정의하는 UXML 문서와 이를 렌더링하는 Panel Settings를 참조합니다. 하나의 Panel Settings 에셋에 둘 이상의 UXML 문서를 연결할 수 있습니다.

패널 설정

패널 설정 에셋은 씬의 패널을 정의합니다.패널은 UI 계층 구조가 첨부되는 루트 시각 요소를 제공하며, 런타임에 씬에서 UI를 그립니다.패널 설정 에셋을 구성하는 방법에 따라 UI가 렌더링되는 방식이 결정됩니다.또한 UI가 입력에 반응하는 방식도 결정합니다.예를 들어, 시각적으로 전면에 있는 패널이 시각적으로 후면에 있는 패널보다 먼저 사용자의 클릭을 가로챌 수 있습니다.

패널 설정 에셋을 설정하여 다음을 수행할 수 있습니다.

  • 스케일 및 해상도 제어
  • 기본 스타일 적용
  • 렌더 텍스처에 UI 표시
  • 패널의 정렬 순서 설정

패널을 설정하려면:

  1. 프로젝트에서 Assets > Create > UI Toolkit > Panel Settings를 선택하여 Panel Settings 에셋이 없는 경우 새로 생성합니다.
  2. Panel Settings 에셋의 인스펙터 창에서 Panel Settings 프로퍼티를 설정합니다.

패널에 UI 연결

패널은 둘 이상의 UXML Document 컴포넌트를 통해 UI를 표시할 수 있습니다. 각 UI 문서에는 UXML 문서 렌더링 순서를 설정하는 Sort Order 프로퍼티가 있습니다.

  • 자식 UI Document 컴포넌트는 부모 UI Document 컴포넌트 위에 그려집니다.
  • 계층 구조의 동일한 레벨에 있는 UI Documents 컴포넌트는 정렬 순서에 따라 순차적으로 렌더링됩니다.

둘 이상의 UXML 문서를 패널에 연결하려면 다음을 수행합니다.

  1. UI를 호스팅할 게임 오브젝트를 선택하거나 생성합니다.

  2. Component > UI Toolkit > UI Document를 선택하여 UI Document 컴포넌트를 추가합니다.

  3. UIDocument의 인스펙터(Inspector) 창에서 다음을 수행합니다.

    • Panel Settings를 Panel Settings로 설정하여 UI를 표시합니다.
    • Source를 표시 UI를 포함하는 UXML 문서로 설정합니다.
    • Sort Order UI Document 컴포넌트를 더 작은 숫자가 먼저 렌더링되도록 설정합니다.
  4. 각 UXML 문서에 대해 프로세스를 반복합니다.

참고: 동일한 Panel Settings에 여러 UI Document 컴포넌트가 연결되어 있는 경우 이러한 모든 문서에는 공통된 포커스 내비게이션 컨텍스트가 있습니다. Panel Settings가 서로 다른 경우 문서를 나란히 정렬해도 내비게이션이 자동으로 옮겨 가지 않습니다. 내비게이션을 한 문서에서 다른 문서로 옮기려면 Panel Settings의 focusController를 내비게이션을 옮기려는 UI Document 컴포넌트의 FocusController로 설정해야 합니다.

UI Document 컴포넌트의 라이프사이클

Unity는 컴포넌트에서 OnEnable() 메서드를 호출할 경우 UI Document 컴포넌트의 소스 UXML 문서를 로드합니다. 시각적 트리가 올바르게 로드되도록 하려면 OnEnable() 메서드 내부의 컨트롤과 상호 작용하는 로직을 추가합니다. 따라서 스크립트가 OnEnable()OnDisable()에 응답하여 UXML 문서에서 시각적 요소를 안전하게 참조해야 합니다.

UI Document 컴포넌트는 OnEnable()OnDisable() 메서드에 응답할 경우 그 콘텐츠를 지웁니다. 이 접근 방식은 UI 문서에서 곧 재사용하지 않을 UI 요소를 제거하고 관련 리소스를 효과적으로 지웁니다. 또한 UI Document 컴포넌트에 Panel Settings 에셋이 할당되지 않은 경우 해당 콘텐츠가 자동으로 지워집니다.

곧 재사용될 가능성이 높거나 초기화 페널티를 피하기 위해 빠르게 표시해야 하는 UI 요소를 숨기려면 UIDocument.rootVisualElementdisplaynone으로 설정하십시오. 이를 사용하여 더 큰 UI 계층 구조의 일부인 UI 요소 컴포넌트를 숨길 수도 있습니다.

추가 리소스

런타임 UI 시작하기
Panel Settings 프로퍼티 레퍼런스