背景

纹理

当场景的背景类型设置为纹理时,画布的渲染区域会在相机渲染前会按照填充规则填上对应的纹理。

设置纹理背景

依据路径 层级面板 -> 选中 Scene -> 检查器面板 -> Background 栏 设置 ModeTexture,然后选择期望的纹理,可以看到场景的背景发生实时变化。

同样的,在脚本中也可通过如下代码进行设置:

// 获取当前场景的背景实例
const background = scene.background;
// 设置背景类型为纹理
background.mode = BackgroundMode.Texture;
// 将一张 2D 纹理设置为背景纹理
background.texture = await engine.resourceManager.load<Texture2D>({
  url: "XXX.jpg",
  type: AssetType.Texture2D,
});
// 设置填充模式为铺满
background.textureFillMode = BackgroundTextureFillMode.Fill;

属性

需要注意的是,背景的相关属性都在场景的 background 属性中,获取到该属性实例后才修改相关属性才能生效。

属性作用
texture设置背景纹理
textureFillMode设置背景纹理的填充模式,可选 AspectFitWidth, AspectFitHeightFill , 默认为 BackgroundTextureFillMode.AspectFitHeight

填充模式

通过 background.textureFillMode = BackgroundTextureFillMode.AspectFitWidth 设置纹理适配模式。

目前纹理适配模式有以下三种:

填充模式说明
AspectFitWidth保持宽高比,把纹理宽缩放至 Canvas 的宽,上下居中。
AspectFitHeight保持宽高比,把纹理高缩放至 Canvas 的高,左右居中。
Fill把纹理的宽高填满 Canvas 的宽高。
最后更新于 七月 11, 2024

这篇文档对您有帮助吗?