翻譯：A-Frame 的 Entity-Component-System 概念
此文概略翻譯自 A-Frame 的文件「Entity-Component-System」0.5 版，主要是自己學一下 ECS 的概念，文短就順手翻一下。再度預告四月我有打算要辦 WebVR 聚會，請有興趣的看官緊盯 MozTW 的 Facebook 專頁。
此文概略翻譯自 A-Frame 的文件「Entity-Component-System」0.5 版，主要是自己學一下 ECS 的概念，文短就順手翻一下。再度預告四月我有打算要辦 WebVR 聚會，請有興趣的看官緊盯 MozTW 的 Facebook 專頁。
Entity-Component-System
A-Frame 是採用「實體-組件-系統」（Entity-Component-System，下稱 ECS）模式的框架。ECS 是遊戲開發界常見的模式，強調組合性而非傳統程式的層次、繼承型的結構：
- 實體（Entity）是泛用物件，不做也不顯示什麼。
- 組件（Component）是可重複利用的模組，放進實體中以賦予其外觀、行為或功能。置入後即可生效。
- 系統（System）則提供環境、服務，並管理組件。
我們藉著 ECS 模式，在實體中放進各種可重複利用的組件，打造複雜且能做許多事的實體。若換作傳統的繼承概念，要擴充一個物件就得自己開個新的類別了。
ECS 讓開發者通往無邊無際的創意，可以撰寫、分享、使用許多能添加或增強功能的組件。
概念
請想像ㄧ架機具，它是個實體：
- 我們可以加入顏色組件來影響其顏色
- 也可以加入引擎組件來影響其速度，其中有馬力及重量等等屬性
- 還可以考慮加入輪胎組件，有著抓地力那類的屬性來影響其摩擦力
我們可以混搭各種不同組件，藉此創造出各種不同功能與樣貌的機具，例如汽車、飛機、摩托車甚至是船（此時就不會加裝上輪胎這個組件了）。
實體組成
A-Frame 將這樣的模式轉化如下：
- HTML 的元素即為實體
- HTML 的屬性即為組件
- 而組件的屬性就由 HTML 的屬性值定義
舉例來說，若要從一個最原始的實體來組成一個茄紅色的球面，我們可以加上 geometry 及 material 等組件。而由於這兩個組件都可以設定多個屬性，我們可用行內樣式的語法來定義其屬性。
<a-entity geometry=”primitive: sphere; radius: 1.5" material=”color: tomato; metalness: 0.7"></a-entity>
接著，我們還可以放進更多組件，以添加我們想要有的外觀、行為、功能等，例如加上 light 令其發光、加上 sound 令其發聲、加上 physics 令其受重力影響兼具碰撞判斷等：
我們也能加進其他人開發的組件。無論是誰寫了個有爆炸效果的組件，又或是個能利用 canvas 作為物件表面材質的 組件，我們都可以用 HTML 的方式拉進自己的 A-Frame 程式並且立刻使用。 ECS 是個極富彈性跟擴充性的模式。
喜歡這篇文章嗎？讓更多人有機會閱讀
留言
留言透過 giscus 存在 GitHub，用 GitHub 帳號登入就能留言。