たんたんとがんばる

ruby, Ruby on Rails, React etc.

A-FRAMEのentity-component-system patternをざくっと理解する

A-FRAMEとはmozilla製のhtmlタグやわずかなjavascriptだけで3Dプログラミングができるという魔法のようなjavascriptライブラリです。
A-FRAMEはentity-component-system patternというパターンを基礎にしています。 今日はざくっと公式HPの文章を意訳しつつ整理してゆきます。

aframe.io

エンティティ、コンポーネント、システムのまとめ

  • エンティティはいろいろな用途に使われるオブジェクトで、本質的には何も描画しない
  • コンポーネントは外観や動作(かつ/または)機能を提供するために、エンティティに差し込まれる再利用可能なモジュール。
  • システムはグローバルスコープ、サービス、コンポーネントのクラス群のマネージメントを行う

エンティティとコンポーネントの関係をさらに具体化する

例えば、「車」をエンティティに例えると、コンポーネントは以下のイメージ

これらのコンポーネントは他の乗り物(飛行機とかバイクとかボートとか)にも適用できるかも(タイヤは除く)

配置(サンプルコード)

例えば、トマト色の球をエンティティに配置する場合、「形状(geometry)」や「外観(material)」のようなコンポーネントをアタッチする。 これらのコンポーネントたちは複数の属性を持ち、それらは以下のようにインラインで定義可能。

<a-entity geometry="primitive: sphere; radius: 1.5" material="color: tomato; metalness: 0.7"></a-entity>

あれこれ欲しい外観や動作や機能を加えるために、もっともっとコンポーネントを追加できる。
光らせるために「ライト(light)」コンポーネントを追加したり、あるいは音を鳴らすために「サウンド(sound)」コンポーネントを追加したり、あるいはまた重力や衝突検知時に作用できるように「物理(physics)」コンポーネントを追加したり、というように。
他の人やサードパーティ製のコンポーネントも追加できる(中略)。

肝心のA-FRAMEとは何かとか、entity-component-system patternのスゴさとかは別に書くかもです♪