包含此页的版本:
不含此页的版本:
您可以使用 Image 元素或VisualElement.style.backgroundImage属性以将视觉内容添加到 UI。两者之间的选择取决于您应用的具体要求。有关更多信息,请参阅图像与VisualElement.style.backgroundImage.
您可以使用导入或内置的图像资源来设置背景图像。设置背景图片时,必须选择支持的背景图片类型:
将图像导入项目时,请定义图像导入设置以获得最佳效果。
可以在 UI Builder 中设置背景图像,也可以直接在 USS 中设置背景图像,也可以在 C# 文件中设置背景图像。有关引用项目资产的更多信息,请参阅资产可在游戏或项目中使用的任何媒体或数据。资产可能来自在 Unity 外部创建的文件,例如 3D 模型、音频文件或图像。您还可以在 Unity 中创建一些资产类型,例如动画师控制器、混音器或渲染纹理。更多信息
请参阅术语表.
用户界面生成器:
4. 单击“图像”字段以从您的项目中选择图像资产。
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);
背景图像的缩放模式定义了图像如何缩放以适应视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表.
背景图像支持的缩放模式。
一个:stretch-to-fill拉伸图像以填充视觉元素的整个区域。
乙:scale-and-crop缩放图像以适应视觉元素。如果图像大于视觉元素,则图像将被裁剪。
丙:scale-to-fit缩放图像以适应视觉元素。它类似于拉伸填充模式,但纵横比图像比例尺寸的关系,例如其宽度和高度。
请参阅术语表的图像被保留。
可以在 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);
通常,您可以将 9 切片技术应用于常规 2D 精灵。但是,使用 UI Toolkit,您可以将 9 切片技术应用于纹理、渲染纹理和 SVG 矢量图像。
要应用 9 片,请设置以下内容:
-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# 文件中设置切片值和切片缩放。对于精灵图像,您还可以在精灵编辑器中设置值。
用户界面生成器:
使用“背景”部分中的“切片”字段设置切片值、切片比例和切片类型。
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;
重要提示:
切片与平铺
您可以使用-unity-slice-type将切片的中心和侧面平铺而不是铺平。
要正确支持平铺,请将图像导入为精灵(2D 和 UI),并将网格Unity 的主要图形原语。网格体构成了 3D 世界的很大一部分。Unity 支持三角或四边形多边形网格。Nurbs、Nurms、Subdiv 曲面必须转换为多边形。更多信息
请参阅术语表类型到 Full Rect。