翻譯:A-Frame 的 Entity-Component-System 概念

此文概略翻譯自 A-Frame 的文件「Entity-Component-System」0.5 版,主要是自己學一下 ECS 的概念,文短就順手翻一下。再度預告四月我有打算要辦 WebVR 聚會,請有興趣的看官緊盯 MozTW 的 Facebook 專頁


Entity-Component-System

A-Frame 是採用「實體-組件-系統」(Entity-Component-System,下稱 ECS)模式的框架。ECS 是遊戲開發界常見的模式,強調組合性而非傳統程式的層次、繼承型的結構:

我們藉著 ECS 模式,在實體中放進各種可重複利用的組件,打造複雜且能做許多事的實體。若換作傳統的繼承概念,要擴充一個物件就得自己開個新的類別了。

ECS 讓開發者通往無邊無際的創意,可以撰寫、分享、使用許多能添加或增強功能的組件。

概念

請想像ㄧ架機具,它是個實體:

  • 我們可以加入顏色組件來影響其顏色
  • 也可以加入引擎組件來影響其速度,其中有馬力重量等等屬性
  • 還可以考慮加入輪胎組件,有著抓地力那類的屬性來影響其摩擦力

我們可以混搭各種不同組件,藉此創造出各種不同功能與樣貌的機具,例如汽車、飛機、摩托車甚至是船(此時就不會加裝上輪胎這個組件了)。

實體組成

A-Frame 將這樣的模式轉化如下:

  • HTML 的元素即為實體
  • HTML 的屬性即為組件
  • 而組件的屬性就由 HTML 的屬性值定義

舉例來說,若要從一個最原始的實體來組成一個茄紅色的球面,我們可以加上 geometrymaterial 等組件。而由於這兩個組件都可以設定多個屬性,我們可用行內樣式的語法來定義其屬性。

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

接著,我們還可以放進更多組件,以添加我們想要有的外觀、行為、功能等,例如加上 light 令其發光、加上 sound 令其發聲、加上 physics 令其受重力影響兼具碰撞判斷等:

我們也能加進其他人開發的組件。無論是誰寫了個有爆炸效果的組件,又或是個能利用 canvas 作為物件表面材質的 組件,我們都可以用 HTML 的方式拉進自己的 A-Frame 程式並且立刻使用。 ECS 是個極富彈性跟擴充性的模式。



喜歡這篇文章嗎?讓更多人有機會閱讀

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.