メインコンテンツまでスキップ

<pc-screen>

<pc-screen>タグは、スクリーンコンポーネントを定義するために使用されます。

使用法
  • <pc-entity>の直接の子である必要があります。

属性​

属性タイプデフォルト説明
enabledBoolean"true"コンポーネントの有効状態
priorityNumber"0"レンダリング優先度 (0-255)
reference-resolutionVector2"640 320"「幅 高さ」の値としての参照解像度
resolutionVector2"640 320"「幅 高さ」の値としてのスクリーン解像度
scale-blendNumber"0.5"scale-modeが"blend"のときに、resolutionとreference-resolutionをどのように重み付けするか。0（resolutionに従う）から1（reference-resolutionに従う）まで。scale-modeが"none"のときは無視されます
scale-modeEnum"none"スクリーンがコンテンツをスケーリングする方法: "none" | "blend"。"none"はresolutionでレンダリングしreference-resolutionを無視します。"blend"はscale-blendで重み付けしながら両者の間でスケーリングし、ある解像度で設計したUIを別の解像度でも使えるようにします。screen-spaceが必要です
screen-spaceBoolean"false"スクリーン空間でレンダリングするかどうか
スケーリングはスクリーン空間のスクリーンにのみ適用されます

ワールド空間のスクリーンはスケーリングに対応しておらず、エンジンはその場合scale-modeを"none"に戻します。効果を得るには、scale-mode="blend"とあわせてscreen-spaceを設定してください。

例​

テキスト要素をホストするスクリーンスペースのスクリーンです。scale-mode="blend" により、キャンバスのリサイズに合わせてUIがスケールします — フルスクリーンボタンで確認したり、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">
            <!-- キャンバスに合わせてスケールする2Dスクリーン -->
            <pc-screen screen-space="true" scale-mode="blend" reference-resolution="640 320"></pc-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を使用して、<pc-screen>要素をプログラムで作成および操作できます。