当场景的背景类型设置为纹理时,画布的渲染区域会在相机渲染前会按照填充规则填上对应的纹理。
依据路径 层级面板 -> 选中 Scene -> 检查器面板 -> Background 栏 设置 Mode 为 Texture,然后选择期望的纹理,可以看到场景的背景发生实时变化。
同样的,在脚本中也可通过如下代码进行设置:
// 获取当前场景的背景实例
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, AspectFitHeight 或 Fill , 默认为 BackgroundTextureFillMode.AspectFitHeight |
通过 background.textureFillMode = BackgroundTextureFillMode.AspectFitWidth
设置纹理适配模式。
目前纹理适配模式有以下三种:
填充模式 | 说明 |
---|---|
AspectFitWidth | 保持宽高比,把纹理宽缩放至 Canvas 的宽,上下居中。 |
AspectFitHeight | 保持宽高比,把纹理高缩放至 Canvas 的高,左右居中。 |
Fill | 把纹理的宽高填满 Canvas 的宽高。 |