Add ability to add networked entity to non-networked parent

[Agupta00]

Add ability to add networked entity to non-networked parent

[vincentfretin]

Your example is very abstract, so I'm not sure what you propose is really needed for your use case. Do you have dynamic number of children entities or is this a static number of children? If it's dynamic, your proposition may make sense. If not usually you can add networked component on a root parent and with a networked template that use selector you can sync only a child or even a grandchild properties.

Anyway feel free to experiment, if you have a change in the code that is not too complex with an example, we can discuss on the PR and see if we merge it or not.

[Agupta00]

Thank you for your response. Here is an example if it makes it more clear. Perhaps there is a better way to do things in NAF?

// html

<!-- Copyright (c) 2022 8th Wall, Inc. -->

<a-scene
  networked-scene="debug: true; connectOnLoad: false;"
  >
  
  <a-assets>
    <template id="portal-template">
      <a-entity image-target-portal="name: portal"></a-entity>
    </template>

    <template id="offset-template">
      <a-entity id="offset" position="0 -.7 0"></a-entity>
    </template>

    <template id="avatar-template">
      <a-entity
        class="avatar"
        random-color
        character-animation
        gltf-model="#robot_model"
        scale="0.08 0.08 0.08"
        shadow>
      </a-entity>
    </template>
  </a-assets>
  
  <a-camera id="camera" position="0 1 0.5" rotation="-20 0 0"></a-camera>
  
  <a-entity id="img-portal" networked="template:#portal-template"> //1

    <a-entity id= "offset" networked="template:#offset-template"> //2
        <a-entity
          id="character"
          position="0 0 -0.5"
          character-input
          networked="template:#avatar-template" //3 
          >
        </a-entity>
  
      <a-entity gltf-model="#sky"></a-entity>
      
    </a-entity>

  </a-entity>
  
</a-scene>

//js

const addNAFSchemas = () => {
  NAF.schemas.add({
    template: '#avatar-template',
    components: [
      'position',
      'rotation',
      'random-color',
    ],
  })

  NAF.schemas.add({
    template: '#portal-template',
    components: [
      // We don't want to sync the position and rotation of portal-template. The portal template is
      // used to translate the robot positions to where the image target is in the world.
      // Position and rotation are added by default if we don't include a template, but since
      // we don't include position and rotation in this custom template, they are not synced.
      // 'position',
      // 'rotation',
      'unused',  // We have to include a field here otherwise NAF will give us an undefined error.
    ],
  })

  NAF.schemas.add({
    template: '#offset-template',
    components: [
      // 'position',
      // 'rotation',
      'unused',
    ],
  })
}

addNAFSchemas()

You can see here I am adding nested networked components just so my "avatar" can end up as a child of id=offset.

My proposal is instead to add attachToElementId on the avatar networked component so it knows where to end up in another client's scene.

        <a-entity
          id="character"
          position="0 0 -0.5"
          character-input
          networked="template:#avatar-template; attachToElementId: offset" ///<------ (tell it who to end up as a child off)
          >
        </a-entity>

[Agupta00]

Also I am trying to create a pull request but when I run:

git push origin master

I get:

remote: Permission to networked-aframe/networked-aframe.git denied to Agupta00.
fatal: unable to access 'https://github.com/networked-aframe/networked-aframe.git/': The requested URL returned error: 403

Do you know what the fix here is by chance?

I can succesfully run this:

ssh -T [email protected]

Hi Agupta00! You've successfully authenticated, but GitHub does not provide shell access.

[vincentfretin]

The https url is different from the ssh url. If the ssh works, then use the ssh url: [email protected]:networked-aframe/networked-aframe.git

[vincentfretin]

Your example appears to be complex to just sync just 'position', 'rotation', 'random-color' of the avatar indeed. Not sure what your random-color component is, but it may be the wrong thing to sync, maybe you want to sync geometry color instead but that's a different issue.

Did you look at using a template with selector? See documentation
https://github.com/networked-aframe/networked-aframe#syncing-custom-components
You shouldn't need a template and empty schema like that.
Something like that (I may have overly simplified your example because I don't understand what are all those entities are for but I hope you get the idea):

<a-scene
  networked-scene="debug: true; connectOnLoad: false;"
  >
  
  <a-assets>
    <template id="avatar-template">
      <a-entity image-target-portal="name: portal">
        <a-entity class="offset" position="0 -.7 0"> // I changed id="offset" by class="offset" here
          <a-entity
            class="avatar"
            random-color
            character-animation
            gltf-model="#robot_model"
            scale="0.08 0.08 0.08"
            shadow>
          </a-entity>
        </a-entity>
      </a-entity>
    </template>
  </a-assets>
  
  <a-camera id="camera" position="0 1 0.5" rotation="-20 0 0"></a-camera>
  
  <a-entity id="img-portal" networked="template:#avatar-template"></a-entity>
  
</a-scene>

const addNAFSchemas = () => {
  NAF.schemas.add({
    template: '#avatar-template',
    components: [
      {
        selector: '.avatar',
        component: 'position'
      },
      {
        selector: '.avatar',
        component: 'rotation'
      },
      {
        selector: '.avatar',
        component: 'random-color'
      },
    ],
  })
}

addNAFSchemas()

[Agupta00]

Hmm, is there a security setting that might need to be changed on the repo? Maybe you could add me as a contributor? I have tried the ssh url from two different computers but have not been able to run git push -u origin master. I can however successfully run ssh -T [email protected] and run git push -u origin master on a repo that I own.

In regards to the example, yes I have seen selectors. However the complexity isn't around syncing childeren. It comes from the issue that the childeren are added to the root scene (unless there is a networked parent). From this logic: https://github.com/networked-aframe/networked-aframe/blob/master/src/NetworkEntities.js#L128

Anyways it might be easier if I open a PR :)

[vincentfretin]

Creating a fork and opening a PR is the way to go yes.

It comes from the issue that the childeren are added to the root scene (unless there is a networked parent).

What you said is right. But for your use case is this really an issue? If you do something like I described in #400 (comment) doesn't it work properly? It's not obvious to me that your really need something else. If you create a runnable example on glitch, I may understand it better.