Myujth

I have multiple components that define a tick method and I need to control the execution order. With the following components:

AFRAME.registerComponent('component-a', 
 tick: function () console.log('ComponentA'); 
);

AFRAME.registerComponent('component-b', 
 tick: function () console.log('ComponentB'); 
);

AFRAME.registerComponent('component-c', 
 tick: function () console.log('ComponentC'); 
);

And the following entity:

<a-entity component-a component-b component-c></a-entity> 

I want to guarantee the following tick order: component-a, component-b, component-c

A-Frame does not have a built-in way to define tick execution order. Ticks will execute in the order in what components are initialized. One can easily control the execution by having a manager component that calls the components methods in the desired order:

AFRAME.registerComponent('manager', 
 tick: function () 
 const el = this.el;
 el.components['component-a'].print();
 el.components['component-b'].print();
 el.components['component-c'].print();
 
);

AFRAME.registerComponent('component-a', 
 print: function () console.log('ComponentA'); 
);

AFRAME.registerComponent('component-b', 
 print: function () console.log('ComponentB'); 
);

AFRAME.registerComponent('component-c', 
 print: function () console.log('ComponentC'); 
);

On the following entity:

<a-entity manager component-a component-b component-c>