← Руководство

Установить фоновые изображения

Вы можете использовать либо элемент Изображение, либо свойство VisualElement.style.backgroundImage для добавления визуального контента в свой UI. Выбор между ними зависит от специфических требований вашего приложения. Дополнительную информацию см. в Изображение против VisualElement.style.backgroundImage.

Установка фоновых изображений с помощью элемента изображения

Для установки фонового изображения можно использовать импортированный или встроенный ресурс изображения. При установке фонового изображения необходимо выбрать поддерживаемый тип фонового изображения:

Когда вы импортируете изображение в свой проект, определите настройки импорта изображений для лучших результатов.

Вы можете установить фоновое изображение в UI Builder, непосредственно в USS или в C# файлах. Дополнительную информацию о ссылках на ресурсы проекта см. в Ассеты.

UI Builder:

Выберите элемент, который требуется изменить.
В панели Inspector разверните 1. Справочная информация.
Выберите тип образа из раскрывающегося списка типа образа.
Нажмите в поле Изображение, чтобы выбрать изображение из проекта.

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 = Background.FromTexture2D(EditorGUIUtility.IconContent("FolderOpened Icon").image as Texture2D);

Установить режим масштабирования для фонового изображения

Режим масштабирования для фонового изображения определяет, каким образом изображение масштабируется для соответствия визуальному элементу.

Поддерживаемые режимы масштабирования фонового изображения.
A: stretch-to-fill растягивает изображение так, чтобы оно заполнило всю область визуального элемента.
B: scale-and-crop масштабирует изображение по размеру визуального элемента. Если изображение больше визуального элемента, оно обрезается.
C: scale-to-fit масштабирует изображение по размеру визуального элемента. Этот режим похож на растягивание с заполнением, но сохраняет соотношение сторон изображения.

Вы можете установить режим масштабирования в UI Builder, непосредственно в 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);

9-срез изображений с UI Toolkit

Как правило, вы можете применить технику 9-слойного рисования к обычному 2D Sprite. Однако, с UI Toolkit, вы можете применить технику 9-слойного рисования к Текстурам, Текстурам Рендринга и Векторным изображениям SVG.

Чтобы применить 9-срез, установите следующие параметры:

Значения фрагментов: Значения фрагментов представляют собой пиксельные значения для левого, правого, верхнего и нижнего фрагментов изображения. Значения относятся к точке поворота изображения. Например, если точка поворота находится в центре изображения, значение левого фрагмента представляет собой число пикселей от левого края изображения до точки поворота.
Масштаб фрагмента: Масштаб фрагмента представляет собой множитель, который применяется к изображению после применения метода 9-фрагментов. Обратите внимание, что для спрайтов Unity регулирует -unity-slice-scale на значение pixels-per-unit фрагмента по отношению к значению reference sprite pixels per unit valueпанели, которое по умолчанию равно 100. Например, если pixels-per-unit фрагмента равняется 16, масштаб регулируется 16/100 = 0.16. Поэтому, если вы установите масштаб на 2px, окончательный масштаб будет 2px * 0.16px = 0.32px. Для текстурных и векторных изображений Unity не производит дополнительных настроек установленного вами значения масштаба фрагмента.
Тип фрагмента: Тип фрагмента определяет, является ли центр изображения sliced или tiled. Тип Sliced масштабирует центр, в то время как тип Tiled мозаизирует центр и стороны.

Вы можете установить значения фрагмента и масштаб фрагмента с помощью UI Builder, или непосредственно в USS, или в C# файлах. Для изображения спрайта, вы также можете установить значения в Редакторе Спрайт. Для более подробной информации, см. Справка вкладки Редактора Спрайт для окна Редактора Спрайт.

UI Builder:

Используйте поля Слит в разделе 1. Справочная информация для установки значений, масштаба и типа фрагмента.

USS пример:

MyElement {
    -unity-slice-left: 10px;
    -unity-slice-right: 10px;
    -unity-slice-top: 10px;
    -unity-slice-bottom: 10px;
    -unity-slice-scale: 2px;
    -unity-slice-type: tiled;
}

C# пример:

MyElement.style.unitySliceLeft = 10px;
MyElement.style.unitySliceRight = 10px;
MyElement.style.unitySliceTop = 10px;
MyElement.style.unitySliceBottom = 10px;
MyElement.style.unitySliceScale = 2px;
MyElement.style.unitySliceType = SliceType.Tiled;

Важно:

Значения фрагмента, установленные с помощью USS, применяются только к изображению в связанном визуальном элементе. Значения не применяются к тому же изображению, используемому в других визуальных элементах, в других документах UI или в сцене.
Например, если вы установили атрибуты Top, Bottom и Right для сегмента, но оставили левый сегмент пустым, то левый сегмент будет иметь значение 0.
Значения нарезки, заданные в USS, переопределяют значения, заданные в Sprite Editor.

Срезанный против плиточного

Вы можете использовать -unity-slice-type для того, чтобы центр и стороны фрагмента были покрыты плиткой вместо того, чтобы быть растянутыми.

Пример изображения с разрезом, где буквы в центре растянуты.

Пример мозаичного изображения, в котором буквы в центре и по бокам мозаичны.

Чтобы правильно поддерживать мозаику, импортируйте изображение как Sprite (2D и UI) и установите Mesh Type на Full Rect.