Nrthugu

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>