Image 요소를 사용하여 애플리케이션에서 그래픽 에셋을 추가할 수 있습니다. 이는 이미지 갤러리, 제품 목록, 렌더링 미리보기, 사용자 프로필과 같은 시각적 콘텐츠를 UI에 표시할 수 있는 다용도의 강력한 툴입니다.
UXML 또는 C# 코드를 사용하여 Image 요소를 UI에 추가하고 이미지 소스를 --unity-image USS 커스텀 프로퍼티에 제공해야 합니다.
--unity-image-size USS 커스텀 프로퍼티를 사용하여 이미지 확대/축소 모드를 설정할 수 있습니다. 또한 --unity-image-tint-color USS 커스텀 프로퍼티를 사용하여 이미지 틴트 컬러를 설정할 수도 있습니다.
다음 UXML 예시에서는 인라인 스타일을 사용하여 이미지 소스를 추가합니다.
<ui:Image style="--unity-image: url('path/to/image');"/>
Image 요소의 크기와 레이아웃뿐만 아니라 요소 내 이미지의 크기와 레이아웃도 설정할 수 있습니다. 이를 통해 특정 영역에 맞게 크기를 조정하거나 다른__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 요소에 맞게 정렬하는 등, UI에서 이미지가 표시되는 방식을 제어할 수 있습니다. 또한 사용자가 이미지를 클릭하거나 탭하여 동작을 트리거하도록 하는 등의 상호 작용을 Image 요소에 추가할 수 있습니다. 불투명도를 조정하거나 컬러 필터를 적용하는 등 Image 요소와 이미지 자체에 스타일을 적용할 수 있습니다.
VisualElement.style.backgroundImage
Image 요소와 VisualElement.style.backgroundImage 프로퍼티를 모두 사용하여 UI에 시각적 콘텐츠를 추가할 수 있습니다. 둘 중 무엇을 선택할지는 애플리케이션의 구체적인 용도와 요구 사항에 따라 달라집니다.
Image 요소는 일반적으로 이미지 갤러리나 사용자 프로필의 아바타와 같은 UI 특정 영역 내의 이미지를 표시하는 데 사용됩니다. 이를 통해 크기 조정, 확대/축소, 자르기를 비롯한 옵션을 활용해 이미지 모양을 더욱 세밀하게 조정할 수 있습니다. 이미지의 크기에 따라 레이아웃의 요소 크기가 결정되기를 원한다면 Image를 사용하십시오. 또한 Image 요소에 다른 요소를 추가하여 오버레이를 생성하거나 상호 작용을 더할 수도 있습니다. 그러나 Image의 인스턴스를 여럿 사용하는 경우에는 성능이 저하되지 않도록 고정된 너비와 높이를 지정하십시오.
VisualElement.style.backgroundImage 프로퍼티는 이미지를 UI 요소의 배경으로 설정하는 데 사용됩니다. 이는 UI의 주요 콘텐츠나 기능을 손상시키지 않으면서 시각적 흥미를 더하고 싶을 때 유용하게 활용됩니다. 또한 VisualElement.style.backgroundImage 프로퍼티를 사용하면 USS를 사용하여 다양한 요소의 소스 이미지를 편리하게 변경할 수 있습니다.
일반적으로 이미지의 모양과 레이아웃을 보다 세밀하게 제어해야 할 때는 Image 요소를 사용하고, 단순히 UI 요소에 배경 이미지를 추가하려는 경우에는 VisualElement.style.backgroundImage 프로퍼티를 사용하는 것이 좋습니다. 그러나 두 가지 방법 모두 사용 가능하며 필요에 따라 동일한 UI에서 둘을 함께 사용할 수 있습니다.
참고:
style.backgroundImage 프로퍼티도 지원합니다. Image 요소에 이미지 소스가 설정되어 있고 투명하지 않은 경우 배경 이미지가 표시되지 않습니다.
C# 클래스: Image
네임스페이스: UnityEngine.UIElements
기본 클래스: VisualElement
이 요소는 다음 속성을 해당 기본 클래스에서 상속합니다.
| 이름 | 유형 | 설명 |
|---|---|---|
focusable |
boolean |
요소에 포커스를 맞출 수 있으면 true입니다. |
tabindex |
int |
포커스 링에서 포커스를 맞출 수 있는 항목을 정렬하는 데 사용되는 정수입니다. 0보다 크거나 같아야 합니다. |
이 요소는 또한 다음 속성을 VisualElement에서 상속합니다.
| 이름 | 유형 | 설명 | |
|---|---|---|---|
content-container |
string |
자식 요소가 추가되며, 일반적으로 요소 자체와 동일합니다. | |
data-source |
Object |
상속된 모든 데이터 소스를 재정의하는 이 VisualElement에 데이터 소스를 할당합니다. 이 데이터 소스는 모든 자식이 상속합니다. | |
data-source-path |
string |
데이터 소스에서 값에 이르는 경로입니다. | |
data-source-type |
System.Type |
이 VisualElement에 할당 가능한 데이터 소스 유형입니다. 이 정보는 디자인 시 효과적인 데이터 소스를 지정할 수 없는 경우, UI Builder가 데이터 소스 경로 필드를 어느 정도 완성하기 위한 힌트로만 사용됩니다. |
|
language-direction |
UIElements.LanguageDirection |
요소의 텍스트 방향성을 나타냅니다. 이 값은 요소의 자식으로 전파됩니다. languageDirection을 RTL로 설정하면 텍스트를 뒤집고 줄 바꿈과 자동 줄 바꿈을 적절하게 처리함으로써 RTL(오른쪽에서 왼쪽으로 쓰기)에 대한 기본 지원이 추가됩니다. 그러나 포괄적인 RTL 지원은 제공되지 않는데, 이 경우 문자 순서 변경과 OpenType 폰트 기능 지원이 포함된 텍스트 셰이핑이 필요하기 때문입니다. 향후 업데이트를 통해 언어, 스크립트 및 폰트 기능 사양을 처리하기 위한 추가 API가 포함된 포괄적인 RTL 지원을 제공할 예정입니다. 이 프로퍼티의 RTL기능을 향상하기 위해 사용자는 Unity 에셋 스토어에서 사용 가능한 타사 플러그인을 탐색해 ITextElementExperimentalFeatures.renderedText를 활용할 수 있습니다 |
|
name |
string |
이 VisualElement의 이름입니다. 이 프로퍼티를 사용하여 특정 요소를 타게팅하는 USS 선택자를 작성할 수 있습니다. 요소에는 일반적으로 고유한 이름을 부여해야 합니다. |
|
picking-mode |
UIElements.PickingMode |
마우스 이벤트나 IPanel.Pick 쿼리 중에 이 요소를 선택할 수 있는지 여부를 결정합니다. |
|
style |
string |
VisualElement 스타일 값을 설정합니다. |
|
tooltip |
string |
사용자가 요소를 잠시 동안 가리킬 경우 정보 상자 안에 표시할 텍스트입니다. 에디터 UI에서만 지원됩니다. | |
usage-hints |
UIElements.UsageHints |
VisualElement에 대한 고수준의 의도된 사용 패턴을 지정하는 힌트 값 조합입니다. 이 프로퍼티는 VisualElement가 아직 Panel에 포함되어 있지 않을 때만 설정할 수 있습니다. Panel에 포함되면 이 프로퍼티는 사실상 읽기 전용이 되며, 변경을 시도하면 예외가 발생합니다. 적절한 UsageHints를 지정하면 시스템에서 예상하는 사용 패턴에 따라 특정 작업을 처리하거나 가속하는 방법에 대해 더 나은 결정을 내릴 수 있습니다. 이러한 힌트는 동작이나 시각적 결과에는 영향을 주지 않으며 패널과 그 안의 요소의 전반적인 성능에만 영향을 미칩니다. 항상 적절한 UsageHints를 지정하는 것이 좋지만, 일부 UsageHints는 특정 조건(예: 타겟 플랫폼의 하드웨어 제한 등)에서 내부적으로 무시될 수 있다는 점에 유의하십시오. |
|
view-data-key |
string |
트리 확장 상태, 스크롤 위치, 줌 레벨 등과 같은 보기 데이터 지속성에 사용됩니다. 이 키는 뷰 데이터 스토어의 뷰 데이터를 저장하고 로드하는 데 사용됩니다. 이 키를 설정하지 않으면 연결된 VisualElement의 지속성이 비활성화됩니다. 자세한 내용은 보기 데이터 지속성을 참고하십시오. |
다음 표는 모든 C# 공용 프로퍼티 이름과 관련 USS 선택자의 리스트입니다.
| C# 프로퍼티 | USS 선택자 | 설명 | |||
|---|---|---|---|---|---|
ussClassName |
.unity-image |
이 유형인 요소의 USS 클래스명입니다. | disabledUssClassName |
.unity-disabled |
비활성화된 로컬 요소의 USS 클래스명입니다. |
다음 표에서는 USS의 Image 요소에만 사용할 수 있는 커스텀 프로퍼티에 대해 간략하게 설명합니다.
| 프로퍼티 | Type | 설명 |
|---|---|---|
--unity-image |
문자열 | 이미지 파일의 소스입니다. 이미지 에셋을 참조하는 자세한 방법은 에셋을 참조하십시오. |
--unity-image-size |
문자열 | 이미지 확대/축소 모드입니다. 사용 가능한 값은 stretch-to-fill, scale-and-crop, scale-to-fit입니다. |
--unity-image-tint-color |
문자열 | 이미지 틴트 컬러입니다. |