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

<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を設定してください。

例​

<pc-app>
    <pc-asset src="assets/fonts/arial.json" type="font" id="arial"></pc-asset>
    <pc-scene>
        <pc-entity>
            <!-- 2Dスクリーンを定義 -->
            <pc-screen></pc-screen>
            <!-- 親スクリーンにテキストをレンダリング -->
            <pc-entity>
                <pc-element type="text" font-asset="arial" text="Hello, World!"></pc-element>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース​

ScreenComponentElement APIを使用して、<pc-screen>要素をプログラムで作成および操作できます。