コンポーネントを扱う

概要

Grimoire.jsではコードの再利用性を高めるための手段としてコンポーネントを定めています。これによりユーザーは構築したロジックを、異なるノードに容易に適用することができます。ここでいうコンポーネントとは、全てのノードの基礎となるものです。コンポーネントを組み合わせることにより、一つの特定の機能を持ったノードが作成されます。

学べること

• デフォルトコンポーネントとオプショナルコンポーネントについて
• オプショナルコンポーネントに関するGOMLの記述方法

デフォルトコンポーネントとオプショナルコンポーネント

Grimoire.jsのコンポーネントは、デフォルトコンポーネントとオプショナルコンポーネントの２種類に分かれます。
GOMLに記載される<mesh>などのタグには、タグ名に応じて最初から複数のコンポーネントが付属しています(Transformコンポーネントなど)。これらのコンポーネントをデフォルトコンポーネントと呼びます。
これに対し、ユーザーがGOML等で後から追加したコンポーネントをオプショナルコンポーネントとしています。

オプショナルコンポーネントを追加する際には、そのコンポーネントが依存しているコンポーネントが存在する可能性があります。その際には依存しているコンポーネントも含めて、オプショナルコンポーネントとして明示的にノードに追加することが必要です。

オプショナルコンポーネントの追加

GOMLからノードにオプショナルコンポーネントを追加することが可能です。そのためには、ノードの子要素に追加するコンポーネントを明治する必要があります。そのための記述が以下の通りです。

<camera>タグにマウス操作を可能にするコンポーネントを追加することを例に考えてみます。記法は以下の通りです。これを<camera>タグの子要素に追加することで、コンポーネントの追加は終了です。

1
2
3

<camera.components>
  <MouseCameraControl/>
</camera.components>

MouseCameraControlはgrimoirejs-fundamentalがサポートしているタグです。ユーザはコンポーネントを作成してすることも可能です。詳しくはコンポーネントを作成してみるに記載しています。

対象のタグに、<対象のタグの名前.components>追加するコンポーネントのタグ</対象のタグの名前.components>とする必要があります。

実際にコンポーネントが追加されていることを確認してみましょう。

次はコンポーネントの操作に関して、Javascriptから操作することを学びます。これにより、動的にコンポーネントの追加、変更が可能になります。

javascript側からOptionalComponentを操作してみる