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

属性

すべてのPlayCanvas Web ComponentはHTML属性を通じて設定します。すべての属性は同じ規約に従うため、一度覚えてしまえば、どのタグがどう動作するかを予測できます。

共通の契約​

すべての属性は、次の3つのルールに従います。

マークアップ結果
属性に有効な値が設定されているその値が適用されます
属性が存在しない（または実行時に削除された）エンジンのデフォルト値が適用されます
属性に無効な値が設定されているコンソール警告が問題を説明し、エンジンのデフォルト値が適用されます

各タグの属性テーブルのデフォルト列は、属性が存在しないときに適用される値を示します。属性を削除するとデフォルト値が復元されるため、実行時に属性を自由に切り替えることができ（例えば、ブラウザの開発者ツールから、または setAttribute() と removeAttribute() を使って）、シーンはリアクティブに更新されます。

無効な値がエンジンに到達することはありません。代わりに、属性名と期待されるフォーマットを示すコンソール警告が表示されます。オーサリング中はコンソールを開いておけば、タイプミスがすぐに見つかります。

Boolean​

Boolean属性は、"false" 以外の値（値なしの属性の空の値を含む）で存在する場合は true、"false" が設定されている場合は false になります。

マークアップ結果
cast-shadows（属性名のみ）true
cast-shadows="true"（または "false" 以外の任意の値）true
cast-shadows="false"false
属性が存在しない、または削除されたエンジンのデフォルト値
<!-- 属性名のみで、デフォルトがfalseのオプションを有効化 -->
<pc-light type="directional" cast-shadows></pc-light>

<!-- "false"を設定して、デフォルトがtrueのオプションを無効化 -->
<pc-scrollview horizontal="false"></pc-scrollview>

数値​

数値属性は、任意の有限数を受け付けます: 整数、小数、負の数、指数表記（"1e3"）。それ以外 — 単位付きの値（fov="60deg"）、空の値（intensity=""）、"Infinity" — は警告をログに出力し、デフォルト値が適用されます。

<pc-camera fov="60" near-clip="0.1"></pc-camera>

列挙型​

列挙型属性は、固定された名前のセットのうちの1つを受け付けます。無効な名前は、有効な名前を列挙する警告をログに出力し、デフォルト値が適用されます。

Invalid value 'bogus' for attribute 'scroll-mode'. Valid values: clamp, bounce, infinite. Using 'bounce'.

エンジンの数値定数は受け付けられません — 宣言的レイヤーは名前のみです。これはJavaScript APIにも適用されます。列挙型の要素プロパティ（scrollbar.orientation など）は、エンジンの数値定数ではなく、常に文字列の名前を受け取り、返します。

<pc-camera tonemap="aces"></pc-camera>

ベクトル​

ベクトル属性は、スペース区切りの数値を取ります — 型のコンポーネント数とちょうど同じ個数です（Vector2は2つ、Vector3は3つ、Vector4は4つ）。コンポーネント間の空白の量は問いません。コンマは文法の一部ではなく、警告とともに拒否されます。

<pc-entity position="0 1.5 0" scale="2 2 2"></pc-entity>

カラー​

カラー属性は、次の3つのフォーマットのいずれかを受け付けます。

フォーマット例
CSSカラー名clear-color="rebeccapurple"
16進コード（#rgb、#rgba、#rrggbb、#rrggbbaa）color="#f00" または color="#ff0000"
0から1の範囲のスペース区切りの3つまたは4つの数値color="1 0.5 0.5" または color="1 0.5 0.5 0.5"
<pc-camera clear-color="#f0f8ff"></pc-camera>
<pc-light color="1 0.8 0.6"></pc-light>

エンティティ参照​

一部の属性は、ドキュメント内の別のエンティティを参照します — 例えば、<pc-button> の image、<pc-scrollbar> の handle、<pc-scrollview> の viewport、content、スクロールバー属性です。参照には次のいずれかを使用できます。

  • CSSセレクター（例: #my-id や pc-entity[name="Player"]）
  • 要素の id（例: my-id）
  • エンティティの name（例: Player）
<pc-scrollbar orientation="vertical" handle="#handle"></pc-scrollbar>

スクリプト属性​

スクリプトは独自の属性を宣言するため、<pc-script> はこれらの規約を、各スクリプト属性の宣言された型に基づいて解析されるプロパティごとの属性で拡張します。詳細はスクリプトで動作を追加するを参照してください。