Entity Component System (ECS)

This week we will be exploring how to add interactivity to our A-Frame objects. We will also cover what an Entity Component System (ECS) is, why it is important and where else in the industry the concept is used.

Entity Component System

A-Frame uses what is called an Entity Component System (ECS). An ECS is used to easily create different and unique entities within the world. Think of an entity as an object. This object could:​

• Be a box that’s green​
• Be a sphere that bounces​
• Be 3D model with an animation​
• Be a light source inside a building​
• Be a position to play a sound effect from​

Essentially, an entity can be whatever we want! it’s the term used when we described a “physical” or “tangible” thing within the application. Entities are placeholder objects to which we plug-in components to provide the appearance, behavior, and functionality.

Wh​at an ECS allows us to do is to easily attach additional information or properties to entities within our application. For example, imagine that we have just created 3 boxes using <a-box>. By default, each of these boxes looks and behaves the exact same way. However, we want to use each of these boxes for something separate.

• The first box is part of the scenery and needs a material and texture added to it.
• The second box is part of the game and needs to detect collisions with another object
• The third box is destructible and needs to break apart on command.

Each of these boxes is made from and behaves with, the exact same code. But with an ECS, we can add or change certain behaviors of each entity, making them each unique.

Where else are ECSs used?

Many other Game Engines used within the industry operate on an ECS at heart. Unity, is one of these examples. Unity has an intuitive and easy-to-use interface that allows the user to easily adapt and change individual entities to create new objects.

Unity also allows the user to save this new collection of components and objects as prefabs. This allows for rapid production but also easier bug fixing, as fixing a bug in one of the components will automatically update all other objects that use the same component.

How is it used in A-Frame

In A-Frame we have been using pre-made objects such as <a-box> and <a-sphere>. Each of these objects comes with some components already attached to them, such as the material and mesh of the object. If we want to create an “empty” entity, we can use the <a-entity> tag.

<a-entity> </a-entity>

This entity currently has no appearance, behavior, or functionality. The only properties it (and every single entity/object) has, are:

• Position
• Rotation
• Scale
• Visibility

If we want this entity to be visible to the user, we can add the geometry and materials components to this object. To add these components to the entity, we simply edit the HTML element as if we were adding attributes.

<a-entity geometry material> </a-entity>

Similar to HMTL, we can also edit these attributes. This allows us to better change the appearance or behavior of the entity to suit our application.

<a-entity geometry="primitive:sphere" material="color:blue"> </a-entity>

Note: Editing the attributes and properties of A-Frame elements requires you to follow the same conventions as HTML. A quick refresher of this is:

• When writing HTML tags and attributes, it’s important to keep everything lower case for the best results.
• We edit the attribute by using the following format: attributeName="property1:value"
• An attribute can also have multiple properties changed at once: attributeName="property1: value; property2: value; property3: value"
• The attribute name must be followed by = " " with all the information about that attribute contained within the quote marks.
• When updating the value of a property, we use a colon ' : ' to specify what the value will be.
• If we have multiple properties being edited, we use a semi-colon ' ; ' to break them up into a list.

What are some examples

Using an ECS allows us to generate any combination of components we can think of. This allows us to create very specific objects and fine-tune them individually from one another.

Here are some more examples of objects that have been created using A-Frame. Try and guess what their purposes are:

 <a-entity id="backgroundMusic" 
 sound="src: #forestbgm; autoplay: false; loop: true; positional: false; rolloffFactor: 0; volume: 0.2"
></a-entity>

<a-entity gltf-model="assets/models/LightBulb.gltf" 
 position="-8.42639 10.45481 -3.96505" 
 light="angle: 90; color: #e8bc5e; distance: 20; type: point; intensity: 1.25"
 lightflicker>
</a-entity>

 <a-entity id="Stegosaurus"
 dinosaur="walking: true ; walkingAnimSpeed: 1"
 scale="1.25 1.25 1.25"
 position="10 -25 -20"
 rotation="0 0 0"
 game-activated
 sound ="src: #StegoSound; poolSize: 3; distanceModel:linear">
 </a-entity>

As we can see, an Entity-Component-System (ECS) allows us to create unique objects by adding components that can change the appearance, behavior, and functionality of an object. Each of the components can be edited further, individually from other entities. This allows us to finely tune each entity in our scene to behave how we want. To learn more about entities, visit the official documentation for A-Frame here.

Next lesson we will use this new knowledge to add additional components to our existing objects. Adding in ‘OnClick’ events and triggering animations to play.