<Screen/>

Screen 将实体变为界面屏幕，布局 Element 后代。默认覆盖屏幕，也可设世界空间。referenceResolution 与 scaleMode 控制不同显示尺寸下的缩放。

用法

实体挂载 Screen，再在其下添加带 Element 的实体以显示文本和图像。

<Entity name="screen">
  <Screen referenceResolution={[1280, 720]} />
  <Entity name="label">
    <Element type="text" text="Hello, World!" />
  </Entity>
</Entity>

此例通过 Screen 和文本 Element 显示居中文本。

演示

屏幕空间文本 - 查看代码

代码

TextExample.jsx

import { Application, Entity } from '@playcanvas/react';
import { Camera, Screen, Element } from '@playcanvas/react/components';
import { useFont } from '@playcanvas/react/hooks';

const TextScene = () => {
  // An MSDF font asset generated with font-tools (https://playcanvas.github.io/font-tools/).
  // Loading the .json automatically pulls in the sibling .png atlas page(s).
  const { asset: font } = useFont('/assets/fonts/source-sans.json');

  if (!font) return null;

  return (
    <Entity>
      {/* A camera to render the UI */}
      <Entity name="camera">
        <Camera clearColor="#1a1a2e" />
      </Entity>

      {/* A screen-space UI screen with a centred line of text */}
      <Entity name="screen">
        <Screen referenceResolution={[1280, 720]} />
        <Entity name="label">
          <Element
            type="text"
            fontAsset={font}
            text="Hello, World!"
            fontSize={84}
            anchor={[0.5, 0.5, 0.5, 0.5]}
            pivot={[0.5, 0.5]}
          />
        </Entity>
      </Entity>
    </Entity>
  );
};

const TextExample = () => (
  <Application>
    <TextScene />
  </Application>
);

export default TextExample;

详见 ScreenComponent。

属性

名称	类型与说明	默认值
screenSpace?	boolean 屏幕是否在屏幕空间渲染。	true
referenceResolution?	[number, number] 屏幕参考分辨率。	[1280, 720]
scaleMode?	"blend" | "stretch" | "fit" 屏幕缩放模式。	"blend"
cull?	boolean 为 true 时不渲染位于屏幕外的子元素，仅在 screenSpace 为 true 时有效。	-
resolution?	[number, number] 设置或获取 ScreenComponent 的宽高。screenSpace 为 true 时，分辨率始终等于 GraphicsDevice#width × GraphicsDevice#height。	-
scaleBlend?	number 设置或获取缩放混合值，范围 0 到 1，仅在 scaleMode 为 SCALEMODE_BLEND 时使用。0 以宽为参考，1 以高为参考，中间值混合两者，默认 0.5。	-
priority?	number 设置或获取屏幕渲染优先级，控制同一图层中 ScreenComponent 的顺序。必须是 0 到 127 的整数，存入 ElementComponent#drawOrder 的高 8 位，默认 0。	-
system?	ComponentSystem 创建此组件的 ComponentSystem。	-
entity?	Entity 此组件挂载的 Entity。	-
enabled?	boolean 设置或获取组件的启用状态。	-