Version: 6000.3
语言: 中文
相对和绝对定位
图像导入设置

设置背景图像

您可以使用 Image 元素或VisualElement.style.backgroundImage属性以将视觉内容添加到 UI。两者之间的选择取决于您应用的具体要求。有关更多信息,请参阅图像与VisualElement.style.backgroundImage.

使用图像资产设置背景图像

您可以使用导入或内置的图像资源来设置背景图像。设置背景图片时,必须选择支持的背景图片类型:

  • 纹理渲染游戏对象、精灵或 UI 元素时使用的图像。纹理通常应用于网格表面,以赋予其视觉细节。更多信息
    请参阅术语表
  • 精灵2D 图形对象。如果你习惯于在3D中工作,精灵本质上只是标准纹理,但有一些特殊的技术可以组合和管理精灵纹理,以提高开发过程中的效率和便利性。更多信息
    请参阅术语表
  • 渲染纹理(Render texture)一种特殊类型的纹理,在运行时创建和更新。要使用它们,请先创建一个新的渲染纹理,并指定要渲染到其中的摄像机之一。然后,你可以在材质中使用渲染纹理,就像使用常规纹理一样。更多信息
    请参阅术语表
  • UI Toolkit矢量图像

将图像导入项目时,请定义图像导入设置以获得最佳效果。

可以在 UI Builder 中设置背景图像,也可以直接在 USS 中设置背景图像,也可以在 C# 文件中设置背景图像。有关引用项目资产的更多信息,请参阅资产可在游戏或项目中使用的任何媒体或数据。资产可能来自在 Unity 外部创建的文件,例如 3D 模型、音频文件或图像。您还可以在 Unity 中创建一些资产类型,例如动画师控制器、混音器或渲染纹理。更多信息
请参阅术语表
.

用户界面生成器

  1. 选择要修改的元素。
  2. 检查器一个 Unity 窗口,显示有关当前选定游戏对象、资产或项目设置的信息,允许您检查和编辑值。更多信息
    请参阅术语表
    面板,展开背景。
  3. 从图像类型下拉列表中选择图像类型。

选择背景图片类型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);

使用 UI Toolkit 的 9 切片图像

通常,您可以将 9 切片技术应用于常规 2D 精灵。但是,使用 UI Toolkit,您可以将 9 切片技术应用于纹理、渲染纹理和 SVG 矢量图像。

要应用 9 片,请设置以下内容:

  • 切片值:切片值是像素计算机图像中的最小单位。像素大小取决于您的屏幕分辨率。像素光照是在每个屏幕像素下计算的。更多信息
    请参阅术语表
    图像的左、右、上、下切片的值。这些值是相对于图像的枢轴点的。例如,如果枢轴点位于图像的中心,则左切片值是从图像左边缘到枢轴点的像素数。
  • 切片比例:切片比例是在应用 9 片技术后应用于图像的乘数。请注意,对于精灵,Unity 会调整-unity-slice-scale由精灵的pixels-per-unit值与面板的reference sprite pixels per unit value,默认情况下是100.例如,如果精灵的pixels-per-unit16,比例调整为16/100 = 0.16.因此,如果将比例设置为2px,最终尺度为2px * 0.16px = 0.32px.对于纹理和矢量图像,Unity 不会对您设置的切片比例值进行额外调整。
  • 切片类型:切片类型决定图像中心是否slicedtiled.Sliced 类型缩放中心,而 Tiled 类型平铺中心和侧面。

您可以使用 UI Builder 设置切片值和切片缩放,也可以直接在 USS 中或 C# 文件中设置切片值和切片缩放。对于精灵图像,您还可以在精灵编辑器中设置值。

用户界面生成器

使用“背景”部分中的“切片”字段设置切片值、切片比例和切片类型。

UI Builder 9 切片
UI Builder 9 切片

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 文档或场景场景包含游戏的环境和菜单。将每个唯一的场景文件视为一个独特的关卡。在每个场景中,你放置你的环境、障碍物和装饰品,基本上是将你的游戏设计和构建成碎片。更多信息
    请参阅术语表
    .
  • 未设置的切片值为零。例如,如果设置了“顶部”、“底部”和“右侧”切片属性,但将“左侧”切片留空,则“左侧”切片为零。
  • 在 USS 中设置的切片值将覆盖在 Sprite 编辑器中设置的切片值。

切片与平铺

您可以使用-unity-slice-type将切片的中心和侧面平铺而不是铺平。

中间的字母被划线的切片图像示例。
中间的字母被划线的切片图像示例。
平铺图像示例,其中中心和侧面的字母被平铺。
平铺图像示例,其中中心和侧面的字母被平铺。

要正确支持平铺,请将图像导入为精灵(2D 和 UI),并将网格Unity 的主要图形原语。网格体构成了 3D 世界的很大一部分。Unity 支持三角或四边形多边形网格。Nurbs、Nurms、Subdiv 曲面必须转换为多边形。更多信息
请参阅术语表
类型
Full Rect

其他资源

相对和绝对定位
图像导入设置