배경 이미지 설정
이미지 요소 또는 VisualElement.style.backgroundImage 프로퍼티를 사용하여 UI에 시각적 콘텐츠를 추가할 수 있습니다. 애플리케이션의 특정 요구 사항에 따라 두 가지 중에서 선택합니다. 자세한 내용은 이미지와 VisualElement.style.backgroundImage를 참조하십시오.
이미지 에셋으로 배경 이미지 설정
임포트한 이미지 에셋 또는 빌트인 이미지 에셋을 사용하여 배경 이미지를 설정할 수 있습니다. 배경 이미지를 설정할 때는 지원되는 배경 이미지 유형을 선택해야 합니다.
참고:
- SVG 이미지를 배경 이미지로 사용하려면
com.unity.vectorgraphics패키지를 설치해야 합니다. - 이미지를 프로젝트로 임포트할 때 가장 직관적인 결과를 얻기 위해 이미지 임포트 설정을 정의합니다.
UI 빌더에서 또는 USS에서 직접 또는 C# 파일에서 배경 이미지를 설정할 수 있습니다.
USS 예시:
MyElement {
background-image: url("path/to/imageFile.png");
}
C# 예시:
// Use the AssetDatabase method to load the texture.
myElement1.style.backgroundImage = AssetDatabase.LoadAssetAtPath<Texture2D>("path/to/imageFile.png");
// Use the AssetDatabase method to load the sprite.
myElement2.style.backgroundImage = new StyleBackground(AssetDatabase.LoadAssetAtPath<Sprite>("path/to/spriteAssetFile.png"));
// Load the texture from the project's Resources folder.
myElement3.style.backgroundImage = Resources.Load<Texture2D>("imageFile");
// Load the sprite from the project's Resources folder.
myElement4.style.backgroundImage = new StyleBackground(Resources.Load<Sprite>("spriteAssetFile"));
// Use the Unity Editor's default resources.
myElement5.style.backgroundImage = EditorGUIUtility.FindTexture("CloudConnect");
myElement6.style.backgroundImage = EditorGUIUtility.IconContent("FolderOpened Icon").image;
배경 이미지의 스케일 모드 설정
배경 이미지의 스케일 모드는 이미지가 시각적 요소에 맞게 조정하는 방식을 정의합니다.
배경 이미지에 지원되는 스케일 모드
A: 시각적 요소의 전체 영역을 채우기 위해 이미지를 늘리는 stretch-to-fill입니다.
B: 이미지 크기를 시각적 요소에 맞게 조정하는 scale-and-crop입니다. 이미지가 시각적 요소보다 크면 이미지가 잘립니다.
C: 이미지 크기를 시각적 요소에 맞게 조정하는 scale-to-fit입니다. stretch-to-fill 모드와 유사하지만 이미지의 종횡비가 유지됩니다.
UI 빌더에서 또는 USS에서 직접 또는 C# 파일에서 스케일 모드를 설정할 수 있습니다.
USS 예시:
MyElement {
-unity-background-scale-mode: scale-and-crop;
}
C# 예시:
// Set the scale mode to scale-and-crop.
myElement.style.backgroundPositionX = BackgroundPropertyHelper.ConvertScaleModeToBackgroundPosition(ScaleMode::ScaleAndCrop);
myElement.style.backgroundPositionY = BackgroundPropertyHelper.ConvertScaleModeToBackgroundPosition(ScaleMode::ScaleAndCrop);
myElement.style.backgroundRepeat = BackgroundPropertyHelper.ConvertScaleModeToBackgroundRepeat(ScaleMode::ScaleAndCrop);
myElement.style.backgroundSize = BackgroundPropertyHelper.ConvertScaleModeToBackgroundSize(ScaleMode::ScaleAndCrop);
UI 툴킷을 사용한 9슬라이스 이미지
일반적으로 9슬라이스 기법을 일반 2D 스프라이트에 적용할 수 있습니다. 하지만__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 툴킷을 사용하면 9슬라이스 기법을 텍스처, 렌더 텍스처, SVG 벡터 이미지에 적용할 수 있습니다.
9슬라이스를 적용하려면 다음을 설정하십시오.
- 슬라이스 값: 슬라이스 값은 이미지의 왼쪽, 오른쪽, 상단, 하단 슬라이스에 대한 픽셀 값입니다. 이 값은 이미지의 피벗 포인트를 기준으로 합니다. 예를 들어 피벗 포인트가 이미지의 중앙에 있는 경우 왼쪽 슬라이스 값은 이미지의 왼쪽 가장자리에서 피벗 포인트까지의 픽셀 수입니다.
-
슬라이스 스케일: 슬라이스 스케일은 9슬라이스 기법을 적용한 후 이미지에 적용되는 멀티플라이어입니다. 스프라이트의 경우 Unity는 패널의
reference sprite pixels per unit value를 기준으로 스프라이트의pixels-per-unit값으로-unity-slice-scale을 조정합니다. 기본값은100입니다. 예를 들어 스프라이트의pixels-per-unit이16이면 스케일은16/100 = 0.16으로 조정됩니다. 따라서 스케일을2px로 설정하면 최종 스케일은2px * 0.16px = 0.32px입니다. 텍스처 및 벡터 이미지의 경우 Unity는 설정한 슬라이스 스케일 값을 추가로 조정하지 않습니다.
UI 빌더 또는 USS에서 직접 또는 C# 파일에서 직접 슬라이스 값과 슬라이스 스케일을 설정할 수 있습니다. 스프라이트 이미지의 경우 스프라이트 에디터에서 값을 설정할 수도 있습니다.
UI 빌더:
Background 섹션의 Slice 필드를 통해 슬라이스 값과 슬라이스 스케일을 설정합니다.
USS 예시:
MyElement {
-unity-slice-left: 10px;
-unity-slice-right: 10px;
-unity-slice-top: 10px;
-unity-slice-bottom: 10px;
-unity-slice-scale: 2px;
}
C# 예시:
MyElement.style.unitySliceLeft = 10px;
MyElement.style.unitySliceRight = 10px;
MyElement.style.unitySliceTop = 10px;
MyElement.style.unitySliceBottom = 10px;
MyElement.style.unitySliceScale = 2px;
중요:
- USS로 설정된 슬라이스 값은 연결된 시각적 요소의 이미지에만 적용됩니다. 이 값은 다른 시각적 요소나 다른 UI 문서나 씬에서 사용되는 동일한 이미지에는 적용되지 않습니다.
- 슬라이스 값을 설정하지 않으면 0이 됩니다. 예를 들어 상단, 하단, 오른쪽 슬라이스 속성을 설정하고 왼쪽 슬라이스를 비워 두면 왼쪽 슬라이스는 0이 됩니다.
- USS에서 설정한 슬라이스 값은 스프라이트 에디터에서 설정한 슬라이스 값을 오버라이드합니다.