<Screen/>

<Screen/> コンポーネントは <Entity/> を、<Element/> の子要素をレイアウトする 2D UI スクリーンにします。デフォルトでは画面空間（2D オーバーレイ）でレンダリングされますが、シーン内 UI のためにワールド空間に配置することもできます。referenceResolution と scaleMode を使って、さまざまな表示サイズに合わせて UI をスケールする方法を制御します。

使い方

<Screen/> を <Entity/> にアタッチし、<Element/> を持つエンティティをネストしてテキストや画像を描画します。

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

この例では、<Screen/> とテキストの <Element/> を使って、中央揃えの画面空間テキストを表示します。

Demo

画面空間のテキスト - View Code

Code

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;

PlayCanvas ドキュメントの Screen Component で詳細を確認できます。

プロパティ

Name	Type	Default
screenSpace?	boolean Whether the screen is rendered in screen space.	true
referenceResolution?	[number, number] The reference resolution of the screen.	[1280, 720]
scaleMode?	"blend" | "stretch" | "fit" The scale mode of the screen.	"blend"
cull?	boolean If true, then elements inside this screen will not be rendered when outside of the screen (only valid when screenSpace is true).	-
resolution?	[number, number] Sets the width and height of the ScreenComponent. When screenSpace is true, the resolution will always be equal to GraphicsDevice#width by GraphicsDevice#height . Gets the width and height of the ScreenComponent.	-
scaleBlend?	number Sets the scale blend. This is a value between 0 and 1 that is used when scaleMode is equal to SCALEMODE_BLEND. Scales the ScreenComponent with width as a reference (when value is 0), the height as a reference (when value is 1) or anything in between. Defaults to 0.5. Gets the scale blend.	-
priority?	number Sets the screen's render priority. Priority determines the order in which ScreenComponents in the same layer are rendered. Number must be an integer between 0 and 127. Priority is set into the top 8 bits of the ElementComponent#drawOrder property. Defaults to 0. Gets the screen's render priority.	-
system?	ComponentSystem The ComponentSystem used to create this Component.	-
entity?	Entity The Entity that this Component is attached to.	-
enabled?	boolean Sets the enabled state of the component. Gets the enabled state of the component.	-