ECS in A-Frame

ECS : Entity-Component-System

1. Entity : <a-entity> element와 prototype, component가 연결되는 컨테이너 object, scene안에서 object의 기반

2. Component : <a-entity>안의 HTML attribute

object로서 1) schema, 2) 생명주기 handler, 3) 메서드를 포함한다.

AFRAME.registerComponent(name, definition)으로 등록

모든 로직은 component로 구현됨.

appearance, gestures, behaviors, interactivity with other objects.

3. System : <a-scene>안의 HTML attribute

AFRAME.registerSystem(name, definition)으로 등록

로직, component의 행동을 Data 컨테이너로 다루는 개념이 시스템

Declarative DOM-Based ECS

1. Query Selectors를 이용한 다른 Entity의 참조 : ID, Class, Data Attribute로 Entity에 대한 참조를 얻을 수 있다.

=> document.querySelector('#player');

2. 이벤트와 분리된 Entity 통신 : DOM은 이벤트를 수신하고 방출하는 기능을 제공, Component는 단순히 이벤트를 내뿜을 수 있음.  다른 구성 요소는 서로 호출하지 않고도 해당 이벤트를 들을 수 있음.

=> ball.emit('collided');

3. 생명주기 관리 위한 DOM API

=>.setAttribute, .removeAttribute, .createElement, and .removeChild

4. Attribute 선택자를 이용한 Entity-Filtering : 특정 Component를 가지거나, 가지지 않은 Entity를 가져오는 작업이 가능

=> document.querySelector('[enemy]:not([alive]');