跳到主要内容

<pc-screen>

<pc-screen> 添加 Screen 组件，作为二维界面根节点。其下 <pc-element> 按屏幕单位布局，绘制在摄像机视图上或场景面板中。

未设置属性时为世界空间屏幕，默认局部尺寸 640 × 320。实体默认缩放下宽达 640 米，32 × 32 元素也宽 32 米。HUD 或菜单应像下例一样设置 screen-space；世界面板则缩小实体，详见尺寸与缩放。

用法

属性​

属性类型默认值说明
enabledBoolean（布尔）"true"组件启用状态
priorityNumber（数字）"0"屏幕绘制优先级，0 到 127。较高者覆盖较低者，并优先接收输入
reference-resolutionVector2"640 320"设计参考分辨率，按宽高指定。Blend 按实际画布相对参考尺寸缩放
resolutionVector2"640 320"世界空间屏幕局部宽高。屏幕空间分辨率由画布决定，此项无效
scale-blendNumber（数字）"0.5"Blend 下的宽高权重，0 仅宽，1 仅高，0.5 等权；None 时忽略
scale-modeEnum（枚举）"none""none" | "blend"。None 不缩放，屏幕空间中一个单位为一个绘制缓冲像素；Blend 按画布与 reference-resolution 比例及 scale-blend 加权缩放，需启用 screen-space
screen-spaceBoolean（布尔）"false"是否按画布大小覆盖摄像机视图；否则按实体变换放在世界中，由 resolution 定义尺寸
缩放仅适用于屏幕空间

世界空间屏幕不支持此缩放，引擎会将 scale-mode 强制设回 none。 因此使用 scale-mode="blend" 时，必须同时设置 screen-space。

示例​

屏幕空间屏幕包含文本，Blend 使其随画布缩放。可单击全屏或编辑 text 观察：

实时示例
<pc-app>
    <pc-asset src="https://developer.playcanvas.com/assets/fonts/arial.json" type="font" id="arial"></pc-asset>
    <pc-scene>
        <pc-entity name="camera">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <pc-entity name="ui">
            <!-- A 2D screen that scales with the canvas -->
            <pc-screen screen-space="true" scale-mode="blend" reference-resolution="640 320"></pc-screen>
            <!-- Text rendered on the parent screen -->
            <pc-entity name="title">
                <pc-element type="text" anchor="0.5 0.5 0.5 0.5" pivot="0.5 0.5"
                            font-asset="arial" font-size="48" color="#ff8a3c"
                            text="Hello, World!"></pc-element>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript 接口​

可以通过 ScreenComponentElement API创建和操作元素。

component 是底层 ScreenComponent，就绪前为 null，其余功能可通过它访问。

另请参阅​

示例：二维屏幕、界面布局和滚动视图。