コンポーネントの作成

概要

この章ではGrimoire.jsで使用可能なコンポーネントを作成してみます。基本的なコンポーネントを作成することを通して、コンポーネント自作のための手順を学びましょう。

学べること

  • コンポーネントの作成

コンポーネントの作成

コンポーネントを定義するにはregisterComponentメソッドを用います。javascriptからコンポーネントを定義してみましょう。

  • attributes - コンポーネントの属性を定義します
    • default - 属性の初期値を設定します
    • converter - 属性値の型を定義します。下の例ではNumberを指定しているので、数字として扱われます。
  • $awake - コンポーネントの初期化時に呼び出されます
  • $update - 毎フレーム呼び出されます

$awakeや$updateなどのライフサイクルイベントの中ではthis.nodeでコンポーネントの属しているノードを取得できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gr.registerComponent('Rotate', {
  attributes: {
    speed: {
      default: '1',
      converter: 'Number',
    },
  },
  $mount: function() {
    this.phi = 0;
  },
  $update: function() {
    this.phi += this.getAttribute('speed');
    this.node.setAttribute('rotation', this.phi + ',' + this.phi + ',' + this.phi);
  },
});

最後に作ったコンポーネントを既存のmeshに動的に追加するために、ノードに対してaddComponentを行います。
この操作はGOMLがパースされてから行うべきなので、gr(function() {})の中で行います。

1
$$('mesh').addComponent('Rotate');

それでは確認してみましょう。

基本的なコンポーネントの制作に関しては以下の通りです。コンポーネント開発はユーザーの好きな環境で行うことができます。TypeScriptを用いた開発も可能です。

詳しくは、こちらを参照してください。

次はGOMLのノードを実際に作成してみます。

ノードを作ってみる

Edit this page on Github