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.
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