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

コンポーネント

コンポーネントは、エンティティに能力を1つ与えます。cameraコンポーネントを持つエンティティはシーンをレンダリングし、lightコンポーネントを持つエンティティはシーンを照らし、rigidbodyとcollisionのコンポーネントを持つエンティティは落下し、跳ね返り、衝突します。コンポーネントは自分の能力の設定をプロパティとして保持し、1つのエンティティが持てるコンポーネントは各タイプにつき1つまでです。

組み込みのコンポーネント​

各名前は、その環境でのコンポーネントのリファレンスにリンクしています。エンジンでの名前は、addComponent()に渡す名前であり、エンティティ上でそのコンポーネントを保持するプロパティの名前でもあります。entity.camera、entity.rigidbodyなどです。

EngineEditorReactWeb Components役割
animAnim<Anim><pc-anim>アニムステートグラフでブレンドしながらアニメーションを再生します
animationAnimation--レガシー: アニメーションクリップを再生します。Animを使ってください
audiolistenerAudio Listener-<pc-audio-listener>サウンドを聞く地点です
buttonButton-<pc-button>UI要素がホバーとクリックに反応するようにします
cameraCamera<Camera><pc-camera>エンティティの視点からシーンをレンダリングします
collisionCollision<Collision><pc-collision>RigidBodyやトリガーボリュームに形状を与えます
elementElement<Element><pc-element>ユーザーインターフェースの矩形です。イメージ、テキスト、グループがあります
gsplatGSplat<GSplat><pc-gsplat>3D Gaussian Splatをレンダリングします
jointJoint-<pc-joint>アルファ版: RigidBody同士をジョイントでつなぎます
layoutchildLayout Child-<pc-layout-child>レイアウトグループがその要素のサイズを決める方法を上書きします
layoutgroupLayout Group-<pc-layout-group>子のUI要素を行、列、グリッドに並べます
lightLight<Light><pc-light>ディレクショナル、オムニ、スポットのライトです
modelModel--レガシー: モデルアセットをレンダリングします。Renderを使ってください
particlesystemParticle System-<pc-particle-system>パーティクルを放出して描画します
renderRender<Render><pc-render>プリミティブ形状、またはレンダーアセットのメッシュを描画します
rigidbodyRigid Body<RigidBody><pc-rigid-body>エンティティを物理シミュレーションに委ねます
screenScreen<Screen><pc-screen>ユーザーインターフェースのルートです
scriptScript<Script><pc-script>エンティティ上で独自のスクリプトを実行します
scrollbarScrollbar-<pc-scrollbar>スクロールビュー用のスクロールバーです
scrollviewScroll View-<pc-scroll-view>スクロールできるユーザーインターフェースの領域です
soundSound-<pc-sound>サウンドを再生します。3D空間に配置することもできます
spriteSprite<Sprite><pc-sprite>2Dスプライトやスプライトアニメーションを描画します

ReactとWeb Componentsは、ほとんどのアプリケーションが使うコンポーネントをラップしています。ダッシュはラッパーがないことを示しますが、後述のように、コードからエンジンのエンティティにそのコンポーネントを追加することはできます。

コンポーネントの追加​

コンポーネントは、開始時の設定を指定してエンティティに追加します。指定しなかった設定はデフォルト値になります。

const lamp = new pc.Entity('lamp');
lamp.addComponent('light', {
    type: 'omni',
    color: new pc.Color(1, 0.8, 0.6),
    range: 10
});
app.root.addChild(lamp);

addComponent()は新しいコンポーネントを返し、そのコンポーネントはlamp.lightとしても参照できます。エンティティがすでにlightを持っている場合はnullを返し、デバッグ版のエンジンでは警告を出力します。アプリケーションがlightのコンポーネントシステムを登録していない場合もnullを返します。コンポーネントシステムを参照してください。

ラッパーのないコンポーネント​

ReactとWeb Componentsでは、ラッパーのないコンポーネントも、コードからエンジンのエンティティに追加できます。

置かれたエンティティにエンジンのコンポーネントを追加し、アンマウント時に取り除くコンポーネントを書きます。useParent()は、それを囲む<Entity>のエンジンのエンティティを返します。

import { useEffect } from 'react';
import { Entity } from '@playcanvas/react';
import { useParent } from '@playcanvas/react/hooks';

function AudioListener() {
  const entity = useParent();

  useEffect(() => {
    entity.addComponent('audiolistener');
    return () => {
      // エンティティごとアンマウントした場合、そのコンポーネントはすでに破棄されています
      if (entity.audiolistener) entity.removeComponent('audiolistener');
    };
  }, [entity]);

  return null;
}

<Entity name="camera">
  <AudioListener />
</Entity>

プロパティの読み取りと変更​

コンポーネントの設定はプロパティで、いつでも読み取りと変更ができ、コンポーネントはすぐに反応します。ベクトルや色のプロパティを変更するには、新しい値を代入します。

lamp.light.intensity = 2;
lamp.light.color = new pc.Color(1, 0, 0);

console.log(lamp.light.range); // 10

コンポーネントの無効化と削除​

すべてのコンポーネントはenabledプロパティを持っています。無効にしたコンポーネントは働かなくなります。無効なrenderコンポーネントは描画されず、無効なscriptコンポーネントはスクリプトの実行を止めますが、再び有効にするまで設定は保持されます。コンポーネントを削除すると、コンポーネントもその設定も消えます。エンティティ全体を無効にすると、そのすべてのコンポーネントがまとめて無効になります。有効化と無効化を参照してください。

box.render.enabled = false; // boxの描画を止めます
box.render.enabled = true;  // 再び描画します

box.removeComponent('render');

独自の振る舞いの追加​

組み込みのコンポーネントは、エンジンが提供する能力をカバーしています。開くドアからゲームのルールまで、それ以外のすべてについてはスクリプトを書き、scriptコンポーネントでエンティティにアタッチします。1つのscriptコンポーネントは任意の数のスクリプトを実行でき、各スクリプトはthis.entityで自分のエンティティにアクセスします。次のスクリプトは、エンティティを垂直軸の周りに回転させます。

import { Script } from 'playcanvas';

export class Spin extends Script {
    static scriptName = 'spin';

    /**
     * 回転の速さ（度/秒）。
     *
     * @attribute
     */
    speed = 90;

    update(dt) {
        this.entity.rotate(0, this.speed * dt, 0);
    }
}
box.addComponent('script');
box.script.create(Spin, { properties: { speed: 45 } });

コンポーネントシステム​

アプリケーションには、コンポーネントのタイプごとに1つのコンポーネントシステムがあり、そのタイプのすべてのコンポーネントを作成し、毎フレーム更新し、破棄します。システムはコンポーネントと同じ名前でapp.systemsに置かれ、その一部はすべてのコンポーネントが共有する設定を保持しています。

// すべてのRigidBodyを引っ張る重力
app.systems.rigidbody.gravity = new pc.Vec3(0, -1.62, 0);

アプリケーションが追加できるのは、システムを登録したコンポーネントだけです。pc.Applicationは組み込みのシステムをすべて登録し、エディター、React、Web Componentsも同様です。pc.AppBaseは列挙したシステムだけを登録するので、バンドラーはそれ以外をビルドから除外できます。

const options = new pc.AppOptions();
options.graphicsDevice = device;
options.componentSystems = [
    pc.RenderComponentSystem,
    pc.CameraComponentSystem,
    pc.LightComponentSystem,
    pc.ScriptComponentSystem
];

const app = new pc.AppBase(canvas);
app.init(options);

設定の残りについては、Engineをスタンドアロンで使用するを参照してください。

関連情報​