UI

创建根画布

根画布是 UI 的基础,但不是所有的 UICanvas 都是根画布,接下来为大家演示如何在场景中创建根画布。

编辑器使用

添加 UICanvas 节点

层级面板 添加 Canvas 节点

设置属性

选中添加了 Canvas 组件的节点,可以在 检查器面板 设置相关的属性

根画布

如果新添加的画布节点的父亲或祖先节点已经包含激活的 UICanvas 组件,那么此画布不包含任何渲染与交互的功能。

属性

属性名描述
renderMode画布的渲染模式
renderCamera当画布设置为 ScreenSpaceCamera 模式时,对应的渲染相机
distance当画布设置为 ScreenSpaceCamera 模式时,画布相较于相机的距离
resolutionAdaptationMode画布的适配模式,可以按需选择宽度适配或者高度适配等模式
referenceResolution画布在做尺寸适配时,依据的设计分辨率
referenceResolutionPerUnit画布中的单位与世界空间中单位的比例关系
sortOrder画布的渲染排序优先级

脚本开发

// Add camera
const cameraEntity = root.createChild("Camera");
const camera = cameraEntity.addComponent(Camera);
 
// Add UICanvas
const canvasEntity = root.createChild("canvas");
const canvas = canvasEntity.addComponent(UICanvas);
 
// Set renderMode to `ScreenSpaceOverlay`
canvas.renderMode = CanvasRenderMode.ScreenSpaceOverlay;
// Set renderMode to `ScreenSpaceCamera`
canvas.renderMode = CanvasRenderMode.ScreenSpaceCamera;
canvas.renderCamera = camera;
// Set Reference Resolution
canvas.referenceResolution.set(750, 1624);
// Set Adaptation Mode
canvas.resolutionAdaptationMode = ResolutionAdaptationMode.WidthAdaptation;

这篇文档对您有帮助吗?