Search code examples
javascriptmultiplayeraframe

networked-aframe assign different position to new user


I have a problem in my multiplayer A-Frame environment that I set up with networked-aframe.

I want the first three users that connect to have a different spawn location and any additional user to spawn at the third location, but I can't get it to work. Here's what I have so far in Html:

 <a-entity id="player" 
networked="template:#avatar-template;showLocalTemplate:true;" 
camera 
positioner=""
wasd-controls 
look-controls>
<a-cursor></a-cursor>  
</a-entity>

And here is the JS Component for it:

AFRAME.registerComponent('positioner', {
init: function() {

        var el = this.el,
            counter = 0;

        if (counter == 0) {
            el.setAttribute('position', {x:-16,  y:6,  z:-10});
            counter++;
        }
        else if(counter == 1) {
            el.setAttribute('position', {x:-10,  y:6,  z:-10});
            counter++;
        }
        else {
            el.setAttribute('position', {x:-5,  y:6,  z:-10});
            counter++;
        }
}
});

I found out that I have to sync additional components which I am doing like this:

var avatarSchema = {
template: '#avatar-template',
components: [
'positioner',
'position',
'rotation',
'scale',
{
  selector: '.head',
  component: 'material'
},
{
  selector: '.hairs',
  component: 'show-child'
}


]
};
       NAF.schemas.add(avatarSchema);

It's a big project so there's a lot more code. If you need anything else like the scene setup or the avatar setup let me know and I will add it.


Solution

  • I have a workaround, for I don't fully understand how the component works.
    I found there is a player list under the reference NAF.entities.entities
    I made a component attached to the scene:

    AFRAME.registerComponent('foo',{
      init:function(){
        setTimeout(function(){   
          console.log(Object.keys(NAF.entities.entities));
          console.log(Object.keys(NAF.entities.entities)[0]);
          console.log(Object.keys(NAF.entities.entities).length);
        },5000);
      }
    });
    

    The first log gives me an array of the players id's.
    The second one gives the id of the first element.
    The last gives me the number of the players.

    You can check for the number of players on load, and depending which player loads, You set his position attribute.

    if(NAF.. == 1) this.el.setAttribute('position',firstPos);
    if(NAF.. == 2) this.el.setAttribute('position',secondPos);
    if(NAF.. > 2) this.el.setAttribute('position',third);
    


    Working glitch here: glitch.com/edit/#!/sudden-antler


    Of course instead of waiting 5 seconds i should be listening to a loaded event, I'll look into it once im not so busy.
    If anyone manages to do this properly with this component, please comment, because i tried to do the position onConnect ( too early, the other players entities are still not loaded ), tried waiting till the scene loads, but the closest i got is by dynamically creating the player when i get the number of players, after a fixed time.