Shared Values when Trying to Change One Component Instance

🧑‍💻 Technical Support
1

Hi Support,

So I have 12 objects in a scene each with the same component on them. For some reason, when a button is pressed that runs one of the functions, it shows that each object clicked value has changed when it should only be on one of them. I’m trying to figure out a way to only get a value from data to only change on the instance of that component but for some reason it changes it on them all. It also doesn’t change the clicked variable to true in Tick, it still shows false.

import * as ecs from '@8thwall/ecs'

const SingleWorldButton = ecs.registerComponent({
  name: 'SingleWorldButton',
  schema: {
    startIcon: ecs.eid,
    mainbutton: ecs.eid,
    CheckMark: ecs.eid,
    Word: ecs.eid,

  },
  schemaDefaults: {

  },
  data: {
    clicked: ecs.boolean,
    // Add data that cannot be configured outside of the component.
  },

  add: (world, component) => {
    const {startIcon, mainbutton, Word, CheckMark} = component.schema

    world.events.addListener(startIcon, ecs.input.SCREEN_TOUCH_START, () => {
      console.log('startIcon clicked, expected eid:', component.eid)
      BaseAppear(world, component, startIcon, mainbutton)
    })

    world.events.addListener(mainbutton, ecs.input.SCREEN_TOUCH_START, () => {
      Clicker(world, CheckMark, Word, component)
    })
  },
  tick: (world, component) => {
    console.log('Tick', component.eid, component.data.clicked)
  },
})

function BaseAppear(world, component, startIcon, mainbutton) {
  ecs.Disabled.set(world, startIcon)
  ecs.Hidden.remove(world, mainbutton)
  component.data.clicked = true
}

function Clicker(world, check, word, component) {
  if (component.data.clicked) {
    component.schema.checkOn = !component.schema.checkOn
    if (component.schema.checkOn) {
      ecs.Hidden.remove(world, check)
      ecs.Hidden.remove(world, word)
    } else {
      ecs.Hidden.set(world, check)
      ecs.Hidden.set(world, word)
    }
  }
}

How do I change the value of the data variable and make sure that it only changes it on that component and not all the others?

Thanks,

Leonard

2

You should use StateMachines instead of the default component logic. I’ve had mixed results modifying the data on a component like this, instead I would recommend using dataAttribute.