iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 26
0
Modern Web

WebGL 與 Three.js 初探系列 第 26

[Day26] aframe ECS 概覽

A-Frame 是一個 ECS 框架,我們昨天有提到。跟 three.js 的開發方式(繼承為主)不同。

ECS模式是遊戲開發中常見的模式,比一般遊戲開發的階層及繼承的架構更有可組合性(composability)。

  • entity 是一個 general 物件,本身並不會 render 其他東西。
  • component 是可以復用的元件,能夠插入到 entity 當中,並且根據參數決定外觀及行為
  • system 負責提供全域空間,負責儲存變數跟管理內部的元件狀態等

用這種方式撰寫程式碼,可以很容易地開發、擴充原本的模組,比起 three.js 的繼承方式更為直覺。

以人為例,我們可以將想像成一個實體:

  • 可以加入手、腳、膚色等 component
  • 可以加入性別、外觀、身高等 component

對於一個人的實體,我們根據不同的需求加入元件。

今天我們就來介紹 entity component system aframe 中的三大物件。

aframe 當中,使用 <a-entity> tag 來表示 entity。因為使用的 web component 的關係,我們可以想像成他是一個比較特別的 tag,有方法可以使用。

以往我們會用 document.querySelector 的方式來獲取 DOM 元素,我們也能夠用 querySelector 來獲取 aframe 中的 tag。

以下是 entity 中的方法。

詳細的介紹我們會在後面的章節提到。

component

我們可以透過 AFRAME.registerComponent 這個 API 來客製化自己的 component。

AFRAME.registerComponent('foo', {
  schema: {},
  init: function () {},
  update: function () {},
  tick: function () {},
  remove: function () {},
  pause: function () {},
  play: function () {}
});

以上為官方網站的程式碼範例。

新增完 component 之後我們就可以直接套用在 entity 上了。
<a-entity foo="20"></a-entity>

System

system 可以幫助分離邏輯跟跟資料數據。我們讓 system 來處理其他數據間溝通的工作,讓 component 專注在呈現跟生命週期的處理。像這種 data logic 跟 life cycle 分離的方式,跟 redux 的概念很像吧!

register system

AFRAME.registerSystem('my-component', {
  schema: {},  // System schema. Parses into `this.data`.
  init: function () {
    
  },
 
});

上一篇
[Day25] webVR 中的 jquery - aframe.js introduction
下一篇
[Day27] aframe 範例實作
系列文
WebGL 與 Three.js 初探30

尚未有邦友留言

立即登入留言