런타임 바인딩을 사용하여 여러 프로퍼티에 바인딩

버전: 6000.0+

이 예시는__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 빌더에서 데이터 소스 에셋의 여러 프로퍼티를 UI 컨트롤에 바인딩하는 방법을 보여줍니다.

개요 예시

이 예시에서는 Vector3 프로퍼티와 float 프로퍼티를 포함하는 데이터 소스 에셋을 만듭니다. float 프로퍼티는 읽기 전용 프로퍼티로서 Vector3 프로퍼티의 x, y, z 값의 합계를 반환합니다. 본 예시는 Vector3 프로퍼티를 Vector3Field에, float 프로퍼티를 FloatField에 바인딩합니다. UI에서 Vector3 프로퍼티를 변경하면 FloatField에 Vector3 프로퍼티의 x, y, z 값의 합계가 표시됩니다.

이 예시는 UI가 변경될 때 To Source 바인딩 모드를 사용하여 데이터 소스를 업데이트하는 방법도 보여줍니다.

이 예시에서 만든 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 가이드입니다. 시작하기 전에 먼저 다음을 숙지하십시오.

• UI 빌더
• UXML

데이터 소스 에셋 생성

바인딩하려는 프로퍼티를 포함하는 데이터 소스 에셋을 만듭니다.

1. 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.
2. 프로젝트의 Assets 폴더에 다음 내용을 포함하는 ExampleMultiPropertiesObject.cs라는 C# 스크립트를 생성합니다.

using Unity.Properties;
using UnityEngine;
using UnityEngine.UIElements;

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleMultiPropertiesObject : ScriptableObject
{
    [Header("Bind to multiple properties")]

    [CreateProperty]
    public Vector3 vector3Value;
    
    [CreateProperty]
    public float sumOfVector3Properties => vector3Value.x + vector3Value.y + vector3Value.z;
}

예시 오브젝트 에셋 생성

1. Assets > Create > Example MultiProperties Object를 선택합니다. 그러면 프로젝트의 Assets 폴더에 데이터 소스 에셋이 생성됩니다.
2. 에셋의 이름을 ExampleMultiPropertiesObject.asset으로 변경합니다.

UI 만들기

이전 단계에서 생성한 데이터 소스 에셋에 바인딩하는 UI를 생성합니다. 이 예시에서는 Vector3Field와 FloatField가 자식 요소인 VisualElement를 포함하는 UXML 파일을 생성해 봅시다.

1. 프로젝트의 Assets 폴더에서 ExampleMultiPropertiesObject.uxml이라는 UXML 파일을 생성합니다.
2. ExampleObject.uxml 파일을 더블 클릭하여 UI 빌더에서 엽니다.
3. Hierarchy 패널에서 VisualElement를 추가합니다.
4. Vector3Field, FloatField를 VisualElement의 자식 요소로 추가합니다.

데이터 소스에 Vector3Field 바인딩

이전 단계에서 만든 데이터 소스 에셋에 UI를 바인딩합니다.

1. VisualElement의 Inspector 패널에서 Bindings > Data Source > Object로 이동하여 ExampleMultiPropertiesObject를 선택합니다.

2. Vector3Field의 Inspector 패널에서 Value 프로퍼티를 오른쪽 클릭하여 Add binding을 선택합니다.

3. Add Binding 창의 Data Source Path 목록에서 vector3Value를 선택합니다.

4. Binding Mode 목록에서 To Source를 선택합니다. 이렇게 하면 UI가 변경될 때 데이터 소스가 업데이트됩니다.

   

5. Add binding을 선택하여 변경 사항을 저장합니다.

데이터 소스에 플로트 바인딩

FloatField의 value 프로퍼티를 데이터 소스 에셋의 sumOfVector3Properties 프로퍼티에 바인딩합니다.

1. Float의 Inspector 패널에서 Value 프로퍼티를 오른쪽 클릭하고 Add binding을 선택합니다.
2. Add Binding 창의 Data Source Path 목록에서 sumOfVector3Properties를 선택합니다.
3. Binding Mode 목록에서 To Target을 선택합니다. 이렇게 하면 데이터 소스가 변경될 때 UI가 업데이트됩니다.
4. Add binding을 선택하여 변경 사항을 저장합니다.
5. 저장한 뒤 UI 빌더를 닫습니다. ExampleMultiPropertiesObject.uxml 파일은 다음과 같습니다.

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" 
xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:VisualElement data-source="MulPropertyObject.asset" name="VisualElement" style="flex-grow: 1;">
        <engine:Vector3Field label="Vec3 Field">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="vector3Value" binding-mode="ToSource" />
            </Bindings>
        </engine:Vector3Field>
        <engine:FloatField label="Float Field" name="FloatField">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="sumOfVector3Properties" binding-mode="ToTarget" />
            </Bindings>
        </engine:FloatField>
    </engine:VisualElement>
</engine:UXML>

UI Builder 프리뷰 모드에서 바인딩 테스트

UI 빌더에서 바인딩을 테스트하려면 Vector3 프로퍼티의 값을 업데이트하십시오. 바인딩이 올바르게 설정되면 값이 데이터 소스 에셋에 복제됩니다.

1. UI Builder 뷰포트에서 Preview를 선택합니다.
2. Vector3Field의 X, Y, Z 필드에 무작위 숫자를 입력합니다. FloatField에 입력한 숫자의 합이 표시됩니다.
3. 프로젝트의 Assets 폴더에서 ExampleMultiPropertiesObject.asset 파일을 선택합니다. ExampleObject.asset의 인스펙터 창에 있는 Vector3 Value가 입력한 숫자로 변경됩니다.

추가 리소스

• 런타임 바인딩 시작하기
• 런타임 바인딩 유형 컨버터 만들기
• 런타임 데이터 바인딩 만들기
• 데이터 소스 정의