데이터 바인딩 및 테마 설정 프레임워크 — MRTK3

MRTK3 데이터 바인딩 및 테마 설정 프레임워크에 오신 것을 시작합니다. 이 프레임워크는 하나 이상의 데이터 원본에서 제공되는 데이터에 의해 런타임에 동적으로 채워지고 업데이트될 수 있는 시각적 요소를 쉽게 만들 수 있도록 설계되었습니다.

데이터 바인딩이란?

데이터 바인딩은 애플리케이션의 UX(보기)와 표시되는 데이터(모델) 간의 연결을 설정하는 프로세스입니다. 바인딩에 올바른 설정이 있고 데이터가 적절한 알림을 제공한다고 가정해보겠습니다. 데이터가 값을 변경하면 데이터에 바인딩된 요소가 변경 내용을 자동으로 반영합니다.

자주 사용되는 데이터 바인딩 프레임워크:

  • Delphi
  • Windows 프레젠테이션 프레임워크(WPF .NET)
  • Windows Forms
  • Angular
  • 백본드
  • JavaFX 바인딩

Windows Presentation Framework 데이터 바인딩 블록 다이어그램

Databinding Windows Presentation Framework (WPF) 자세한 내용은 데이터 바인딩 개요 - WPF.NET을 참조하세요.


MRTK 동등 블록 다이어그램

MRTK equivalent block diagram


디자인 목표

  • 플랫폼 간 -- 어디서나 배포
  • 데이터 원본의 모든 조직 구조 및 원본 지원
  • 기존 또는 미개발 코드 기반에 쉽게 통합
  • 디자이너와 개발자 친화적
  • 애플리케이션 수명 주기 동안 언제든지 사용/사용 안 함 가능
  • 실제 엔터프라이즈 시나리오 지원 -- 백 엔드 DB, 복잡한 UX 프리팹 템플릿
  • 기존 non-MRTK UX 구성 요소 및 새로운 시각적 요소에 적용 용이
  • 스프라이트, 이미지, 재료, 애니메이션 및 오디오 클립을 포함한 모든 데이터 형식 바인딩
  • 기존 코드 베이스를 건드리지 않고 기능을 쉽게 향상
  • CPU, RAM, GC 및 프레임 시간의 효율적인 사용
  • 다양한 로컬 또는 백 엔드 데이터 원본과 쉽게 통합
  • 임베디드, 런타임 상태 및 백 엔드 데이터 원본의 모든 동시 조합
  • 목록 표시를 위해 모든 크기의 컬렉션을 효율적으로 처리
  • 테마 가능한 동적 데이터 요소에 대한 결합된 테마 설정 및 데이터 바인딩
  • 제시하기 전에 개방형 방식으로 변수 데이터의 유효성을 검사하고 조작합니다.
  • 다른 MRTK 기능에 대한 최소한의 종속성
  • MRTK v2 및 MRTK3과 호환
  • 최소한의 활동으로 쉽게 화이트 레이블 및/또는 재고 자산에 브랜딩 적용

주요 기능

  • 개방형 데이터 원본은 지속형, 원격 또는 RAM 데이터 전략을 지원합니다.
  • 개방형 데이터 소비자는 모든 UX 바인딩 및 테마 설정 요구 사항을 지원합니다.
  • 데이터 원본과 소비자 간의 자동 검색은 연결을 단순화합니다.
  • 바인딩 프로필에서 선택적 자동 구성
  • 분리된 데이터 모델 및 보기는 MVC 및 MVVM 패턴을 지원합니다.
  • 페이징 및 스크롤을 통한 탐색 기능이 있는 가상화된 컬렉션입니다.
  • 원활한 목록 탐색을 위한 컬렉션 항목의 예측 프리페치입니다.
  • 컬렉션 개체를 풀링하고 재사용하여 GC를 줄일 수 있습니다.
  • 데이터의 차이점을 매핑하고 키 경로 네임스페이스를 볼 수 있습니다.

현재 기능

1. 데이터 소비자를 통한 변수 데이터 시각화

현재 지원됨:

  • TextMeshPro 및 TextMesh 텍스트
  • 텍스트 스타일시트(테마 설정 및 접근성)
  • 스프라이트 텍스처
  • 부울 트리거
  • 쿼드 텍스처
  • 글꼴 아이콘
  • 컬렉션: 변수 데이터로 채워진 프리팹을 포함하는 임의 크기의 목록
  • IDataConsumer 인터페이스를 지원하는 다른 모든 소비자(직접 또는 기본 클래스 파생을 통해)

2. 다양한 데이터 원본을 사용하여 변수 데이터를 제공합니다.

  • JSON 텍스트(직접 또는 URL 가져오기를 통해)
  • 변수 데이터 요소 사전
  • 개체 - 노드 기반 구조화된 데이터
  • 모든 C# 개체의 반영
  • 프로그래밍 방식으로 변경된 데이터
  • IDataSource 인터페이스를 지원하는 다른 모든 메서드

3. 목록의 시각적 표현을 관리하는 목록 항목 자리 표시기

4. 목록 페이징, 스크롤링 및 가상화

  • 데이터는 가시적이거나 처리 중일 때만 가져옵니다.
  • 임의의 큰 백 엔드 데이터 집합 지원
  • 가져오기는 여러 프레임에 걸쳐 부하 분산됩니다.

5. 프리팹 풀링 나열

  • 프리팹은 GC 및 인스턴스화 시간을 줄이기 위해 재사용되고 다시 채워집니다.

6. 런타임에 요소에 동적으로 테마 적용


로드맵의 기능

이미 사용 가능한 것 외에도 추가 기능에 대한 최우선 순위는 다음과 같습니다.

1. 데이터 조작자 파이프라인

  • 데이터 쪽과 보기 쪽 값 간의 변환
  • 지역화(Unity 지역화와의 원활한 통합)
  • 서식 지정
  • 유효성 검사

2. 더 빠르고 부드러운 스크롤/페이징을 위한 예측 목록 항목 프리페치

3. 더 많은 데이터 소비자

  • 구성 요소에 대한 모든 공용 속성 설정
  • 확인란 켜기/끄기 상태 설정
  • 슬라이더 값 설정
  • 그룹의 라디오 단추 설정
  • 색상 설정과 같은 개별 재료 속성

4. 테마

  • 애플리케이션을 실행하지 않을 때도 편집기에서 적용된 테마 보기
  • 적용된 테마를 반영하도록 프리팹을 업데이트하여 기본 테마가 되도록 합니다.
  • 테마/스타일 상속

용어

  • 데이터 원본 - 런타임 상태, 로컬로 유지 또는 서버에서 가져온 데이터 공급자입니다.
  • 데이터 원본 공급자 - Unity 장면 그래프에 노출되지 않을 수 있는 데이터 원본에 대한 액세스를 제공하는 간단한 MonoBehaviour입니다.
  • 데이터 원본 형식 - 데이터 소비자가 원하는 데이터 원본을 이름으로 할당할 수 있도록 데이터 원본에 할당된 고유한 이름입니다.
  • 데이터 소비자 - 데이터 변경에 따라 조치를 취하려는 모든 데이터 소비자, 일반적으로 시각적 요소이지만 필수는 아닙니다. 예를 들어 데이터 값 변경을 기반으로 작업을 트리거하는 것이 목적일 수 있습니다.
  • 데이터 컨트롤러 - 현재 연결된 데이터 바인딩 값이 매개 변수로 제공되어 작업을 호출하는 메커니즘입니다.
  • 키 경로 - 데이터 원본의 특정 개체를 참조하는 데이터 선택기입니다. 현재 구현된 대로 키 경로 형식은 맵, 목록 및 원자 요소의 중첩 조합을 해독하기 위한 JSON 데이터 접근자를 모델로 합니다.
  • 로컬 키 경로 - 재사용 가능한 프리팹에 영구적으로 삽입할 수 있는 데이터 소비자 쪽 키 경로입니다. 컬렉션 엔터티와 키 경로 매퍼를 확인하여 컬렉션의 특정 엔터티에 대해 완전히 해결된 키 경로로 자동 변환됩니다. 컬렉션과 연결되지 않은 경우 데이터 원본의 데이터에 직접 매핑하거나 키 경로 매퍼를 통해 먼저 수정할 수 있습니다.
  • 완전히 해결된 키 경로 - 데이터 원본의 특정 개체 하나에 매핑되는 완전한 절대 키 경로입니다. 컬렉션 엔터티의 경우 이는 하나의 컬렉션 엔터티에 대한 완전히 해결된 키 경로와 해당 컬렉션 엔터티의 한 데이터 요소에 대한 상대(로컬) 키 경로의 조합입니다.

  • 키 경로 매퍼 - 로컬 키 경로와 데이터 원본 필드 이름 사이의 선택적 네임스페이스 매퍼입니다(예: "링크" <-> "URL").

  • 테마 - 특정 시각적 미학을 달성하는 데 필요한 다양한 자산 및 스타일 집합을 제공하는 데이터 원본입니다.

  • 항목 자리 표시기 - 보이는 항목을 장면에 배치하는 책임이 있는 DataConsumerCollection 도우미입니다.

  • 데이터 개체 풀 - 낮은 GC 목록 탐색을 위한 데이터로 채울 준비가 된 인스턴스화된 대기 프리팹입니다.

  • 목록 가상화 - 임의로 큰 크기의 목록을 채우고 표시하고 탐색하는 기능입니다.

  • 예측 프리페치 - 데이터를 프리페치하고 스크롤/페이징을 통해 곧 표시될 항목에 대한 컬렉션 프리팹을 채웁니다.

  • 예측 프리페치 - 데이터를 프리페치하고 스크롤/페이징을 통해 곧 표시될 항목에 대한 컬렉션 프리팹을 채웁니다.

주요 개념

데이터 원본

데이터 원본은 데이터 소비자를 통해 데이터 보기를 채우는 데 사용할 수 있는 임의 형식 및 복잡성의 관리되는 데이터 집합입니다. 데이터 원본에서 관리하는 데이터는 정적이거나 동적일 수 있습니다. 데이터 항목에 대한 모든 변경 내용은 변경 알림을 수신하도록 등록한 모든 데이터 소비자에게 보고됩니다.

데이터 원본 공급자

데이터 원본을 검색하는 단일 메서드가 있는 간단한 인터페이스입니다. 이는 데이터 소비자 구성 요소에 의해 게임 개체 계층에서 MonoBehavior 스크립팅 구성 요소가 자동 검색되도록 설계되었습니다. 게임 개체 자체에서 직접 데이터 원본을 구현할 필요가 없습니다. 이는 기존 MonoBehaviour가 다른 클래스에서 파생되어야 하고 다중 상속이 DataSourceGOBase에서 파생되는 것을 방지할 때 유용합니다. 또한 Unity 종속성이 없는 더 많은 코드를 허용합니다.

데이터 원본 공급자 싱글톤

DataSourceProviderSingleton MonoBehaviour를 사용하면 데이터 원본을 수신 대기하려는 DataConsumers와 동일한 GameObject 계층 구조에 있지 않더라도 자동으로 검색될 수 있는 데이터 원본을 지정할 수 있습니다. 장면의 아무 곳에나 DataSourceProviderSingleton을 배치하고 데이터 소비자가 검색할 데이터 원본으로 Data Sources 속성을 채우면 됩니다. 또는 데이터 소비자가 적절한 데이터 원본을 찾기 위해 부모를 안내할 것입니다. 이는 원하는 데이터를 제공하는 데이터 원본을 해당 데이터 소비자의 부모 체인에 배치할 수 있음을 의미합니다.

키 경로(문자열)

키 경로는 데이터 원본의 모든 정보를 고유하게 식별하는 메커니즘입니다.

키 경로는 데이터 항목당 고유 식별자일 수 있지만 현재 구현에서는 전체 구조화된 데이터 세트와 관련된 관심 데이터의 탐색 위치를 나타내는 논리적 사용자 판독 가능 지정자를 사용합니다. Javascript의 목록, 사전 및 기본 형식 개념을 기반으로 합니다. 키 경로는 JSON으로 나타낼 수 있는 데이터에 액세스하기 위한 구문상 올바른 Javascript 문입니다. 이 접근 방식의 장점은 JSON 및 XML과의 상관 관계가 좋다는 것입니다. 백 엔드 서비스에서 정보를 전송하는 가장 널리 사용되는 두 가지 수단입니다.

키 경로의 예:

  • 온도
  • contacts[10].firstName
  • 연락처
  • contacts[10].addresses[3].city
  • [10].title
  • kingdom.animal.mammal.aardvark.diet.foodtypes.termites

키 경로가 필수 분류법이 없는 임의의 문자열인 경우 실제 데이터 지정자는 검색할 데이터를 설명하는 모든 방법이 될 수 있습니다. XML의 XPath는 데이터 원본과 함께 작동하는 실행 가능한 키 경로 스키마의 한 예입니다. 데이터 소비자가 제공하는 키 경로가 데이터 원본에서 예상하는 키 경로와 일치하는 한 모든 것이 작동합니다. 또한 키 경로 매퍼를 구현하여 서로 다른 스키마 간에 변환할 수 있습니다.

키 경로 해결

키 경로를 해결한다는 것은 두 개의 키 경로를 결합하는 것을 의미합니다.

  1. 많은 항목 목록의 한 항목과 같이 더 큰 데이터 세트의 특정 하위 집합에 액세스하는 방법을 설명하는 절대 키 경로입니다.
  2. 해당 목록 또는 맵 항목 내의 특정 데이터를 나타내는 부분(상대) 키 경로입니다.

이렇게 하면 더 큰 데이터 세트 계층에서 실제로 존재하는 위치가 중요하지 않은 방식으로 데이터의 하위 세트를 처리할 수 있습니다. 이 기능의 가장 중요한 용도는 현재 인스턴스가 참조하는 목록의 항목에 대해 걱정하지 않고 목록의 단일 항목 데이터를 설명하는 것입니다.

"완전히 해결된" 키 경로는 항상 DataSource에 의해 생성 및 사용되며 DataConsumer 또는 기타 외부 구성 요소에 의해 거의 수정되지 않거나 수정되어서는 안 되므로 DataSource에 적합한 구조를 가질 수 있습니다. 예를 들어 사진의 목록 항목과 제목, 촬영 날짜 및 기타 특성을 표시하는 프리팹이 있는 경우 프리팹의 로컬 키 경로는 다음과 같을 수 있습니다.

  • "photo_url"
  • "title"
  • "date_taken"
  • "description"

목록에 있는 하나의 프리팹 항목에 대해 완전히 해결된 키 경로는 다음과 같습니다.

  • "f3cb1906-d8b3-489d-9f74-725e5542b55d/photo_url"
  • "f3cb1906-d8b3-489d-9f74-725e5542b55d/title"
  • "f3cb1906-d8b3-489d-9f74-725e5542b55d/date_taken"
  • "f3cb1906-d8b3-489d-9f74-725e5542b55d/description"

키 경로 매퍼(IDataKeyPathMapper)

키 경로 매퍼를 사용하면 데이터 원본과 데이터 소비자가 키 경로에 대해 서로 다른 네임스페이스와 규칙을 사용하고 여전히 함께 작동할 수 있습니다.

사람의 연락처 정보를 표시하는 슬레이트와 같이 일반적으로 사용되는 요소의 프리팹은 데이터 소비자가 관리하는 변수 필드를 포함할 수 있습니다. 이를 가능하게 하려면 프리팹의 모든 변수 측면에 사용되는 식별자에 데이터 원본의 올바른 데이터에 대한 식별자를 매핑하는 방법이 필요합니다. 이 식별자는 프리팹을 사용할 때마다 해당 변수 요소의 내용을 결정합니다. 키 경로 매퍼는 이를 가능하게 합니다.

프리팹은 데이터가 다른 조직 구조에 저장되고 필드 이름을 사용하는 다른 데이터 원본과 함께 사용될 수 있습니다. 각 데이터 원본과 함께 템플릿 프리팹을 사용하기 위해 키 경로 매퍼는 데이터 구성 방식의 차이를 해결할 수 있습니다.

데이터 소비자(IDataConsumer)

데이터 원본에서 관리하는 정보를 소비하고 해당 데이터를 사용하여 데이터 보기를 채우는 방법을 알고 있는 개체입니다.

데이터 소비자는 데이터 원본에 등록하여 데이터 세트의 지정된 키 경로에 존재하는 데이터 항목의 변경 내용을 알릴 수 있습니다. 지정된 데이터가 변경될 때마다(또는 변경된 것으로 의심되는 경우) 데이터 소비자에게 알림이 전송됩니다.

데이터 소비자 컬렉션

데이터 소비자 컬렉션에는 유사한 항목 목록을 관리하는 기능이 추가되었습니다. 이 목록은 데이터 원본에서 관리하는 전체 데이터 집합이거나 하위 집합일 수 있습니다. 일반적으로 목록의 각 항목에 대한 데이터에는 유사한 형식의 정보가 포함되지만 이것이 필수 사항은 아닙니다. 데이터 원본 및 데이터 소비자는 연락처 목록의 각 사람과 연결된 사진 목록의 각 사진과 연결된 키워드 목록과 같은 중첩 목록을 지원할 수 있습니다. 키워드의 키 경로는 사진을 기준으로 하고 사진의 키 경로는 사람을 기준으로 하며 사람의 키 경로는 가장 가까운 부모 목록이나 데이터 집합의 루트를 기준으로 합니다.

컬렉션을 처리할 때 컬렉션의 특정 항목에 대해 올바르게 해결된 키 경로가 각 컬렉션 항목에 대해 인스턴스화된 프리팹에서 찾은 각 데이터 소비자에게 할당됩니다. 그런 다음, 해당 프리팹 내의 상대(로컬) 보기 데이터에 대한 키 경로를 완전히 해결하는 데 사용됩니다.

데이터 수집 항목 자리 표시기

컬렉션 데이터 소비자는 제품, 사진 또는 연락처의 스크롤 가능한 목록에서 찾을 수 있는 것과 같이 반복되는 시각적 요소 목록으로 사용자 환경을 채울 수단이 필요합니다. 이는 컬렉션 데이터 소비자에게 항목 자리 표시기를 할당하여 수행됩니다. 이 항목 자리 표시기는 목록 항목을 요청하고 변수 데이터로 채워진 프리팹을 수용한 다음, 일반적으로 목록에 대한 UX 레이아웃 구성 요소에서 관리하는 목록에 삽입하여 사용자에게 표시하는 방법을 알고 있는 논리입니다.

테마

테마 설정은 데이터 원본 및 데이터 소비자의 모든 연결을 사용합니다. 정적이거나 다른 데이터 원본에 동적으로 데이터 바인딩된 GameObjects의 계층 구조를 테마로 지정할 수 있습니다. 이를 통해 데이터 바인딩과 테마 설정을 조합하여 적용할 수 있습니다. 다른 데이터 원본에서 가져온 데이터를 테마로 지정할 수도 있습니다.

블록 다이어그램 및 데이터 흐름

MRTK theming data flow

MRTK 테마 설정

테마 설정은 한 번에 많은 UX 요소의 시각적 미학을 변경할 수 있는 기능입니다. 일반적으로 테마를 지정하는 데 필요한 모든 데이터는 스크립트 가능 개체와 같은 단일 데이터 원본에서 제공됩니다. 필요에 따라 테마 설정 데이터를 제공하거나 목적에 따라 논리적 그룹으로 나눌 수도 있습니다.

MRTK3 Theming

데이터 바인딩과 결합된 MRTK3 테마 설정

데이터 바인딩과 테마 설정은 단일 UX 요소에 공존할 수 있습니다. 개별 UX 요소는 동시에 테마가 지정되고 데이터 바인딩될 수 있습니다. 이 시나리오에서 일반적인 흐름은 DataSource에서 오는 데이터가 올바른 테마 키 경로를 파생하는 데 사용된다는 것입니다. 그런 다음 이 키 경로는 테마 데이터 원본(일반적으로 ScriptableObject 프로필이지만 잠재적으로 키 경로를 해결할 수 있는 모든 데이터 원본)에서 개체를 검색하는 데 사용됩니다.

테마 설정 구성 및 데이터 바인딩을 단순화하기 위해 인스턴스화 시 BindingConfigurator에서 처리하는 바인딩 프로필을 만들 수 있습니다.

  • BindingConfigurator바인딩 프로필을 처리하여 프리팹 내에서 테마가 될 자산을 결정하고 바인딩된 데이터 요소와 테마 가능한 요소를 키 경로와 연결합니다. 그런 다음, 일반적으로 프리팹 자체 외부에 있는 하나 이상의 DataSources에서 특정 데이터를 참조하는 데 사용할 올바른 키 경로 선택기에 이러한 시각적 요소를 바인딩하기 위해 적절한 DataConsumers를 추가합니다.
  • 테마 데이터는 바인딩 프로필에서 식별된 각 키 경로에 대한 데이터를 포함하는 DataSource에 의해 제공됩니다.
  • ThemeProvider 도우미 스크립트를 사용하면 ScriptableObject를 테마 설정의 DataSource로 쉽게 사용할 수 있습니다.
  • 표준 UX 테마는 ThemeProviderDataSourceReflection에 바인딩된 MRTK_UX_ThemeProfileScriptableObject에서 제공합니다.

Theme Profile DataSource flow diagram

포함된 데이터 원본

포함된 데이터 원본은 다음 두 가지 상황에 적합합니다.

  1. 프리팹의 각 인스턴스가 서로 다른 테마 설정을 가질 수 있고 고유한 별도의 데이터 원본이 필요한 경우.
  2. 이 프리팹의 모든 인스턴스가 일반적으로 지속되는 하나의 테마 프로필(예: ScriptableObject)에 의해 관리되고 포함된 데이터 원본을 통해 제공될 수 있으므로 설정할 외부 종속성이 없는 경우.

DataSourceReflection

이렇게 하면 리플렉션을 사용하여 필드, 속성, 중첩된 클래스, 배열, 목록 또는 사전에 키 경로를 매핑함으로써 모든 C# 구조체 또는 클래스를 DataSource로 바꿀 수 있습니다. Unity ScriptableObject 또는 테마 데이터가 있는 다른 C# 구조체 또는 클래스와 연결할 수 있습니다. 데이터를 포함하는 인스턴스화된 개체는 런타임에 종속성을 삽입하고 변경할 수 있습니다.

  1. 스크립트 가능 개체: 많은 프리팹에서 공유되는 정적 테마에 유용합니다.
  2. 지속되지 않는 C# 구조체 또는 클래스: 테마의 동적 런타임 수정에 유용합니다.

DataSourceJson

데이터가 json 텍스트로 존재하는 경우 json DOM에 대한 매핑 키 경로를 관리합니다. 이진 파일 자산은 Unity의 리소스, StreamingAssets 또는 가져온 URL에서 검색할 수 있습니다.

DataSourceDictionary

이는 순전히 단순 목록이 필요 사항을 충족할 때 신속한 프로토타이핑에 사용하는 간단한 옵션입니다. 텍스트, Unity 자산(예: 재료, 스프라이트 및 이미지), 리소스, StreamingAssets 또는 URL을 통해 외부적으로 가져올 수 있는 모든 테마 설정 자산이 지원됩니다.

사용자 지정

간단한 IDataSource 인터페이스를 구현하거나 DataSourceBase 또는 DataSourceGOBase에서 파생된 모든 사용자 지정 데이터 원본을 사용하여 사용자 지정 요구 사항을 충족할 수 있습니다.

테마 설정 UX 구성 요소

UXComponents 패키지에서 제공되는 표준 UXComponents 컨트롤은 모두 테마 설정을 지원하도록 구성되어 있습니다. 기본적으로 꺼져 있지만 사용하도록 설정하기가 쉽습니다.

일반적으로 루트 프리팹의 최상위 GameObject에 있는 각 컨트롤에는 UXBindingConfigurator라는 스크립트가 있습니다. 이 스크립트는 사용하도록 설정된 경우 테마 설정을 설정하는 데 필요한 데이터 바인딩 스크립트를 가져옵니다. 데이터 바인딩 및 테마 설정 패키지도 가져와야 합니다.

TextMeshPro StyleSheets에 대한 참고사항: 현재 StyleSheets를 사용하여 TextMeshPro 일반 스타일의 스타일을 지정할 수 없습니다. TextMeshPro의 기본 스타일 시트에 포함된 다른 스타일을 사용할 수 있습니다. 이 예에서는 이 제한을 해결하기 위해 본문을 사용합니다.

DataSourceThemeProvider

DataSourceThemeProvider MonoBehaviour를 사용하면 모든 테마 설정 자산에 대한 모든 참조가 포함된 ScriptableObject가 데이터 원본으로 작동하도록 쉽게 만들 수 있습니다. 이는 UXThemingExample 장면에서 보여 집니다.

ThemeSelector

ThemeSelector MonoBehaviour를 사용하면 여러 ScriptableObject 프로필을 지정하고 쉽게 바꿀 수 있습니다. 이를 사용하는 예는 '어두운' 테마와 '밝은' 테마 사이를 쉽게 전환할 수 있도록 하는 것입니다. 일반적으로 디자인 타임에 ScriptableObject를 Theme Profiles에 추가합니다. 그런 다음, 런타임에 Current Theme 속성을 변경하여 테마를 변경합니다.

데이터 소비자 테마 설정

테마 설정은 데이터 소비자, 특히 DataConsumerThemeBase<T>, DataConsumerTextStyle 및 모든 개발자가 테마 설정 지원을 향상하기 위해 구현할 수 있는 사용자 지정 DataConsumer 클래스에서 상속하는 데이터 소비자에 의해 수행됩니다.

DataConsumerThemeBase<T> 기본 클래스는 기본 데이터 원본의 정수 또는 키 데이터를 사용하여 보조 테마 데이터베이스에서 원하는 최종 값을 조회하는 논리를 제공합니다. 이는 입력 데이터를 테마 키 경로에 매핑한 다음, 해당 테마 키 경로를 사용하여 최종 값을 검색하여 수행됩니다. 이를 통해 모든 요소가 동시에 데이터 바인딩되고 테마가 될 수 있습니다. 예를 들어, 상태가 New, Started 및 Done인 데이터베이스의 상태 필드가 값 0, 1 및 2로 표시된다고 상상해 보세요. 이들 각각은 Sprite 아이콘으로 나타낼 수 있습니다. 데이터 바인딩의 경우 0에서 2 사이의 값을 사용하여 원하는 스프라이트를 조회합니다. 테마 설정 및 데이터 바인딩을 통해 테마 프로필은 테마 프로필에 있는 3개의 올바른 스프라이트 목록을 가리키고 0에서 2 사이의 값을 사용하여 해당 목록에서 올바른 스프라이트를 선택합니다. 이렇게 하면 이러한 아이콘의 스타일이 테마별로 다를 수 있습니다.

런타임 테마 설정과 동적 데이터 바인딩을 함께 사용하는 경우 DataConsumerThemeHelper 클래스를 DataConsumerThemeBase 파생 클래스에 지정하여 테마가 변경되었을 때 이를 알릴 수 있습니다.

런타임 시 테마 교환은 테마 데이터 원본의 데이터를 동일한 데이터 개체 모델 토폴로지에 배치된 새 데이터 집합으로 교환하여 수행됩니다. DataSourceReflection은 각 프로필이 테마를 나타내는 ScriptableObject와 함께 사용할 수 있습니다. 모든 MRTK Core UX 컨트롤의 경우 테마 프로필은 MRTK_UXComponents_ThemeProfile이라는 ScriptableObject입니다. ThemeProvider.cs 도우미 스크립트를 사용하면 이 프로필 또는 모든 ScriptableObject 프로필을 데이터 원본으로 쉽게 사용할 수 있습니다.

동적 데이터에 테마를 적용하는 방법은 대부분의 경우 자동으로 검색되거나 명시적으로 지정할 수 있습니다.

데이텀을 사용하여 테마 데이터 원본에서 올바른 항목을 선택하는 경우 프로세스는 다음과 같습니다.

  • 기본 데이터 원본의 데이터는 올바른 테마 키 경로를 선택하거나 구성하는 데 사용됩니다.
  • 테마 키 경로는 DataConsumerThemeHelper에 지정된 테마 데이터 원본에서 값을 검색하는 데 사용됩니다.
  • 검색된 테마 값을 분석하여 올바른 검색 방법을 자동 검색합니다.
  • 올바른 형식(예: 재료, 스프라이트 또는 이미지)의 최종 데이터 항목은 자동 검색 방법을 사용하여 검색됩니다.

데이터 형식

원하는 개체를 검색하는 데 사용되는 데이터의 예상 데이터 형식은 다음 중 하나일 수 있습니다.

데이터 형식 설명
AutoDetect 데이터가 분석되고 올바른 해석이 자동으로 검색됩니다. 자세한 내용은 아래의 "데이터 형식 자동 검색"를 참조하세요.
DirectValue 데이텀은 원하는 형식 T(예: 재료, 스프라이트, 이미지)로 예상되며 직접 사용됩니다.
DirectLookup 로컬 룩업 테이블에서 원하는 값을 찾는 데 사용되는 정수 인덱스 또는 문자열 키입니다.
StaticThemedValue 지정된 테마 키 경로의 테마 데이터 원본에서 올바른 형식의 정적 테마 개체를 검색합니다.
ThemeKeypathLookup 정수 인덱스 또는 문자열 키는 원하는 테마 키 경로를 찾는 데 사용됩니다.
ThemeKeypathProperty 테마에 제공된 테마 기본 키 경로에 추가될 문자열 속성 이름입니다.
ResourcePath Unity 리소스에서 값을 검색하기 위한 리소스 경로입니다("resource://"로 시작할 수 있음).
FilePath Unity 스트리밍 자산을 검색하기 위한 파일 경로입니다("file://"로 시작할 수 있음).

데이터 형식 자동 검색

자동 검색은 수신된 데이터를 분석하고 자동으로 검색 방법을 결정합니다. 아래 표에서 T는 재료, 스프라이트, 이미지 등 원하는 형식을 나타냅니다. 자동 검색은 프로세스의 두 위치에서 발생할 수 있습니다.

  • 기본 데이텀 값 자체.
  • 기본 데이텀을 통해 검색된 테마 설정 값.
데이텀 형식 고려 사항 테마 도우미 있음 동작
T 해당 없음 Y/N 테마 설정 없이 직접 사용
int 모든 정수 기본 형식 또는 Int32 구문 분석 가능한 문자열 아니요 파생된 GetObjectByIndex(n)에 인덱스로 전달되어 T 형식의 N번째 개체를 검색합니다.
int 모든 정수 기본 형식 또는 Int32 구문 분석 가능한 문자열 로컬 조회에서 N번째 테마 키 경로를 가져온 다음 자동 검색을 통해 테마 개체를 검색하는 인덱스입니다.
문자열 형식: "resource://{resourcePath}" Y/N resourcePath는 Unity 리소스를 검색하는 데 사용됩니다.
문자열 형식: "file://{filePath} Y/N filePath는 스트리밍 자산을 검색하는 데 사용됩니다.
문자열 기타 아니요 파생된 GetObjectByKey()에 키로 전달되어 T 형식의 일치하는 개체를 검색합니다.
문자열 기타 로컬 조회에서 일치하는 테마 키 경로를 가져온 다음 자동 검색을 통해 테마 개체를 검색하는 키입니다.

숫자 상태 값이 포함된 데이터베이스에서 테마 상태 아이콘을 검색하는 예:

  1. 데이터베이스의 상태 아이콘에 대한 키 경로는 status.sprite_index입니다.
  2. status.sprite_index에 대해 검색된 값은 "취소됨" 상태를 의미하는 2입니다.
  3. DataConsumerSprite 조회의 N=2(즉, 세 번째) 항목은 "Status.Icons.Cancelled"로 설정됩니다.
  4. 이는 "테마" 데이터 원본에서 값을 검색하는 데 사용되는 키 경로입니다.
  5. "Status.Icons.Cancelled" 키 경로의 값은 "resource://Sprites/sprite_cancelled"입니다.
  6. 자동 검색은 "Resources/Sprites/sprite_cancelled"에 있는 리소스를 통해 아이콘을 검색해야 한다고 결정합니다.

TextMeshPro StyleSheets

테마 설정은 TMPro 스타일시트를 활성화할 수 있습니다. "TMP 설정" ScriptableObject는 리소스에서 스타일시트가 있어야 하는 위치를 지정합니다. "기본 글꼴 자산 => 경로" 속성입니다.

리소스의 동일한 하위 경로에 앱별 StyleSheets를 배치해야 합니다. 다르게 구성하려면 "TMP 설정"을 일치하도록 업데이트합니다.

새로운 UX 컨트롤을 테마로 만들기

새로운 UX 컨트롤을 개발하는 경우 해당 컨트롤을 사용 가능하게 만드는 것은 비교적 쉽습니다. 컨트롤이 다른 UX 컨트롤에서 이미 사용 중인 재료, 스프라이트 및 기타 자산을 사용하는 한 일반적으로 다양한 게임 개체의 이름을 검색 가능한 방식으로 지정하는 것입니다.

MRTK_UXCore_ThemeProfile에서 상속하고 더 많은 테마 필드를 추가하거나 컨트롤이 고유한 ScriptableObject를 가리키도록 할 수 있습니다. 제공된 항목에 대해 마법과 같은 것은 없습니다. ScriptableObject의 구성이 C# 리플렉션을 통해 개별 데이터 항목에 액세스하는 데 필요한 키 경로를 결정합니다.

BindingConfigurator.cs 스크립트를 새 컨트롤의 최상위 수준에 추가하면 직렬화된 고유한 BindingProfile ScriptableObject를 지정할 수 있습니다. 이렇게 하면 테마 프로필에 제공된 데이터와 테마 가능한 요소를 연결하는 데 필요한 KeyPath 매핑에 필요한 GameObjects 이름이 제공됩니다. 이 스크립트는 사용하려는 테마 설정을 지원하기 위해 런타임에 필요한 DataConsumerXXX 구성 요소를 자동으로 추가합니다.

시작하기

요구 사항

  • Unity 2020.3 LTS 이상
  • TextMeshPro 2.1.4 이상

샘플 장면

첫 번째 단계로 MRTK 예 패키지의 다양한 데이터 바인딩 예 장면을 자세히 살펴보고 다양한 데이터 원본 MonoBehaviours가 구성되는 방식을 살펴봅니다. 일반적으로 데이터 바인딩 스크립트는 프리팹의 최상위 게임 개체 또는 관련 UX 요소 집합에만 배치하면 됩니다.

또한 대부분의 사용 사례에서 기본값은 "기본적으로" 작동하지만 노출된 속성은 고급 사례에 대해 많은 유연성을 제공합니다.

참고

표준 MRTK UX 구성 요소에 대한 테마 설정을 사용하도록 설정하려면 플레이어 설정에서 MRTK_UX_DATABINDING_THEMING_ENABLED 기호를 정의해야 합니다. 이 기호는 테마 설정이 필요하지 않을 때 성능에 미치는 영향이 없음을 보장합니다.

Assets/DataBinding Example/Scenes/DataBindingExamples.scene

다양한 변수 데이터 시나리오를 보여 주는 이 장면. 장면을 로드하고 재생하기만 하면 됩니다. 다음 몇 가지 사항에 주의해야 합니다.

  • TextMeshPro 구성 요소의 텍스트 입력 필드에는 {{ firstName }}과 같은 변수가 있습니다. 이러한 마커는 로컬 키 경로로 직접 사용됩니다.

  • 스프라이트 및 텍스트용 게임 개체에는 데이터 수신 및 뷰 업데이트를 관리하는 데이터 소비자 구성 요소의 일부 형태가 있습니다.

  • 단일 데이터 소비자는 GO 계층 구조의 상위에 배치되어 동일한 형식의 여러 구성 요소에서 공유할 수 있습니다.

  • 데이터 소비자는 GO 계층 구조에서 동일한 게임 개체 또는 상위에 있는 한 자체 데이터 원본을 찾을 수 있습니다.

  • 부모 게임 개체에는 관련 변수 정보 집합을 표시하는 모든 자식 게임 개체에 대한 데이터를 제공하는 데이터 원본 구성 요소가 있습니다.

  • 컬렉션 데이터 소비자는 해당 프리팹을 변수 데이터로 채우는 데 사용할 데이터 소비자를 포함하는 프리팹을 지정합니다.

Assets/UX Theming Example/Scenes/AudioTheming

이 예에서는 테마 설정을 사용하여 피아노 집합과 실로폰 집합 간에 AudioClip을 전환합니다.

Assets/UX Theming Example/Scenes/BatteryLevelExample

이 예는 배터리 잔량을 숫자 값과 아이콘으로 표시하기 위해 테마 설정과 데이터 바인딩을 결합합니다. 테마 설정은 "충전 테마"와 "충전하지 않는 테마"를 선택하는 데 사용됩니다. 다음 목표를 충족하도록 설계되었습니다.

  • 모든 시각적 자산은 테마 프로필 역할을 하는 단일 ScriptableObject에 존재할 수 있습니다.
  • "충전" 상태에 대한 스프라이트의 수는 "충전되지 않은" 상태에 대한 수와 다를 수 있습니다.
  • 보고된 배터리 수준을 특정 스프라이트에 매핑하는 알고리즘은 비선형적일 수 있으며, "충전" 상태와 "충전되지 않은" 상태가 다릅니다.
  • 모든 시각적 자산은 테마 프로필 역할을 하는 단일 ScriptableObject에 존재할 수 있습니다.
  • 충전 상태에 대한 스프라이트의 수는 충전되지 않은 상태에 대한 수와 다를 수 있습니다.
  • 스프라이트가 비선형일 수 있고 충전 상태와 충전 상태가 아닐 수 있는 보고된 배터리 잔량을 매핑하는 알고리즘입니다.

참고

이 데모의 구조는 테마 설정과 데이터 바인딩을 결합한 좋은 예가 아닙니다. 모델과 뷰의 적절한 분리를 위한 프로덕션 애플리케이션에서 실제 배터리 상태(수준 및 충전)는 스프라이트 자체에 대한 리소스 로케이터가 아닌 별도의 데이터 원본에서 제공됩니다.

Assets/UX Theming Example/Scenes/UXThemingExample

이 예는 전체 애플리케이션의 테마를 변경하는 방법과 UX에 표시할 다양한 텍스트 콘텐츠를 관리하기 위한 데이터 원본으로 DataSourceGODictionary를 사용하는 방법도 보여 줍니다. 보다 포괄적인 시나리오에서는 DataSourceReflection 또는 DataSourceGOJson과 같이 보다 유연한 다른 데이터 원본 형식이 필요한 유연성을 제공할 수 있습니다.

첫 번째 데이터 바인딩 프로젝트

다음은 빠르게 시작할 수 있도록 하는 간단한 예입니다.

  1. 새 장면을 만듭니다.
  2. Mixed Reality Toolkit 메뉴에서 장면에 추가 및 구성 옵션을 선택합니다.
  3. 빈 게임 개체를 만들고 이름을 "데이터 바인딩"으로 바꿉니다. DataSourceJsonTest 구성 요소를 추가합니다.
  4. 검사기에서 URL을 https://www.boredapi.com/api/activity로 변경합니다.
  5. UI -> Text - TextMeshPro 개체를 데이터 바인딩 게임 개체에 추가합니다. 캔버스를 추가한 다음 "텍스트(TMP)" 개체를 추가합니다.
  6. 텍스트(TMP) 개체를 선택하고 검사기에서 텍스트 입력을 다음과 같이 변경합니다.

{{ activity }}. It's {{ type }}.

  1. 캔버스 개체를 선택하고 여기에 데이터 소비자 텍스트 구성 요소를 추가합니다.
  2. 프로젝트를 실행합니다. 15초마다 다른 작업이 표시됩니다.

축하합니다. MRTK로 첫 번째 데이터 바인딩 프로젝트를 만들었습니다!

새 데이터 원본 작성

데이터 원본은 하나 이상의 데이터 소비자에게 데이터를 제공합니다. 데이터는 RAM, 디스크 또는 중앙 데이터베이스에서 가져온 알고리즘으로 생성된 모든 것이 될 수 있습니다.

모든 데이터 원본은 IDataSource 인터페이스를 제공해야 합니다. 기본 기능 중 일부는 DataSourceBase라는 기본 클래스에서 제공됩니다. 이 클래스에서 파생하여 필요에 맞는 특정 데이터 관리 기능을 추가할 가능성이 높습니다.

데이터 원본을 구성 요소로 게임 개체에 드롭할 수 있도록 하기 위해 GO가 GameObject를 나타내는 DataSourceGOBase라는 다른 기준 개체가 있습니다. 이는 구성 요소로 GameObject에 놓을 수 있는 MonoBehavior입니다. Unity가 아닌 특정 코어 데이터 원본에 작업을 위임하도록 설계된 씬(thin) 프록시입니다.

데이터 원본은 Unity 편집기 내에서 데이터를 조작하는 기능을 노출할 수 있습니다. 이 경우 파생 클래스는 모든 데이터 원본 논리를 포함하거나 "재고" 데이터 원본을 활용할 수 있지만 데이터 구성을 위한 검사기 필드 또는 기타 수단을 추가할 수도 있습니다.

새로운 데이터 소비자 작성

데이터 소비자는 데이터가 변경되었을 때 알림을 받은 다음 TextMeshPro 구성 요소에 표시된 텍스트와 같은 사용자 환경의 일부 측면을 업데이트합니다.

모든 데이터 소비자는 IDataConsumer 인터페이스를 제공해야 합니다. 기본 기능 중 일부는 DataConsumerGOBase라는 기본 클래스에서 제공됩니다. 여기서 GO는 GameObject를 나타냅니다.

데이터 소비자가 하는 대부분의 작업은 새 데이터를 수용한 다음 프레젠테이션을 위해 준비하는 것입니다. 이는 올바른 프리팹을 선택하는 것처럼 간단할 수도 있고 콘텐츠 관리 시스템과 같은 클라우드 서비스에서 더 많은 데이터를 가져오는 것을 의미할 수도 있습니다.

데이터 수집 항목 자리 표시기 작성

데이터 수집 항목 자리 표시기는 컬렉션의 현재 표시되는 부분과 표시되는 컬렉션을 표시하는 방법, 컬렉션이 작은 정적 목록이든 거대한 백만 레코드 데이터베이스이든 관계없이 관리하는 책임이 있습니다.

모든 항목 자리 표시기는 IDataCollectionItemPlacer 인터페이스를 제공해야 합니다. 기본 기능 중 일부는 DataColletionItemPlacerGOBase라는 기본 클래스에서 제공됩니다. 모든 항목 자리 표시기는 이 클래스에서 파생되어야 합니다.

알려진 제한 사항 및 누락된 기능

  • 아직 Unity의 캔버스 기반 컨트롤 및 스크롤 가능한 목록과 통합되지 않았습니다.
  • .NET INotifyPropertyChanged의 통합은 아직 구현되지 않았습니다.
  • Flickr 및 trymrtk.com에서 이미지를 가져오는 장면 예는 이후 버전의 Unity에서 HTTPS SSL 버그로 인해 HoloLens에서 작동하지 않습니다.
  • 추가 성능 튜닝.
  • 이 릴리스는 데이터 캡처가 아닌 데이터 프레젠테이션에 중점을 둡니다. MRTK UX 컨트롤은 아직 DataSource에서 상태를 설정하도록 연결되지 않았습니다.
  • 목록 데이터에 대한 동적 변경은 점진적으로 업데이트하는 대신 전체 목록을 완전히 새로 고칩니다.
  • 데이터 조작 파이프라인이 아직 구현되지 않았습니다.
  • 슬레이트에 모든 UX 구성 요소를 채우는 것은 아직 완전히 지원되지 않습니다.
  • DataSourceJson 노드는 DataSourceObject와 상호 운용할 수 있도록 IDataNode 인터페이스를 구현해야 합니다.