跳到主要内容

用户界面

几乎所有应用都需要界面，例如 HUD、菜单、按钮、对话框、场景标签或 XR 面板。PlayCanvas 既支持将实体组成的界面作为场景的一部分绘制在画布内，也支持用 HTML 和 CSS 在画布外构建界面，很多应用会结合两者。

三维场景上叠加的游戏界面：滚动列表、圆形头像、生命和能量条、一排按钮以及工具栏

画布内界面由组件组成。屏幕是根节点，下方的元素构成图像、文本和组，按钮、布局组和滚动视图等组件则添加交互行为。无论使用编辑器、直接使用引擎、PlayCanvas React 还是 Web Components，都能使用这些组件。本章各页先统一解释概念，再展示在不同开发方式下的用法。

两种界面构建方式​

画布内界面HTML 与 CSS
世界空间与 XR屏幕可放入场景，并支持 XR仅覆盖在画布之上
文本输入无内置支持文本框、自动补全、屏幕键盘
无障碍访问屏幕阅读器和键盘导航无法识别使用合适元素即可支持
样式与布局锚点、布局组、九宫格精灵CSS 及浏览器布局和动画
字体与表情由字体文件生成 MSDF 字体，表情通过画布字体实现支持 Web 字体与表情
编辑器在编辑器中构建和预览编写 HTML、CSS 资源或文件
画布捕获包含在画布截图和视频中不包含在画布捕获中
性能随场景绘制，支持批处理由浏览器在画布之外布局和绘制

画布内界面适合 HUD、场景或 XR 中的界面，以及必须出现在画布内容中的信息。HTML 适合菜单、设置、表单和长文本。两者可以配合，例如 HTML 设置页暂停带画布 HUD 的应用，详见 HTML 与 CSS。

构建单元​

组件作用编辑器ReactWeb ComponentsAPI
屏幕界面的根节点，可覆盖在视图上或位于场景中屏幕<Screen><pc-screen>ScreenComponent
元素图像、文本或组元素<Element><pc-element>ElementComponent
按钮悬停／按下状态和点击事件按钮引擎组件<pc-button>ButtonComponent
布局组将子项排列为行、列和网格布局组引擎组件<pc-layout-group>LayoutGroupComponent
布局子项覆盖布局组对子项尺寸的处理布局子项引擎组件<pc-layout-child>LayoutChildComponent
滚动视图在遮罩视口内滚动内容滚动视图引擎组件<pc-scroll-view>ScrollViewComponent
滚动条轨道上的可拖动滑块，用于滚动视图和滑块控件滚动条引擎组件<pc-scrollbar>ScrollbarComponent

PlayCanvas React 提供 Screen 和 Element 组件。其余功能通过引擎组件添加，各页会给出所需的小型辅助组件。

本章内容​

  • 入门：配置不同开发方式下的界面，并构建第一个界面。
  • 布局
    • 屏幕：屏幕空间与世界空间、自适应缩放、像素比和优先级。
    • 元素：锚点、轴心、边距、尺寸与组元素。
    • 布局组：自动排列子项的行、列和网格。
    • 安全区域：避免界面被刘海和圆角遮挡。
  • 图像
    • 图像元素：颜色、纹理、精灵、九宫格、三维图像和自定义材质。
    • 遮罩：按矩形或形状裁切子项。
  • 文本
    • 文本元素：字号、换行、适配、两端对齐、标记、描边和阴影。
    • 字体：创建和加载字体资源，选择字符。
    • 本地化：翻译、复数、语言区域和各语言字体。
  • 交互
    • 输入：鼠标、触摸、XR 事件、冒泡，以及隔离界面与游戏输入。
    • 按钮：悬停和按下状态、染色、精灵与事件。
    • 滚动视图：通过拖动、滚轮和滚动条滚动内容。
  • 常用控件：进度条、滑块、开关、对话框、列表和拖放等。
  • 世界空间与 XR
  • HTML 与 CSS：通过 DOM 在画布上方构建界面。
  • 绘制顺序与性能：界面绘制机制与优化。
  • 故障排查：常见问题及成因。

另请参阅​