UI Button Click Not Triggering State Change in 8thWall Studio ECS

🧑‍💻 Technical Support
7

Hi!

I’ve reviewed the code and it looks like some fundamentals are missing. The state machine definitions aren’t quite correct and there’s a number of syntax errors. As a really small example I created this simple component that changes a UI element image to give you an idea how to add listeners in a StateMachine.

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

ecs.registerComponent({
  name: 'Flipbook',
  schema: {
    uiElement: ecs.eid,
  },
  schemaDefaults: {
  },
  data: {
    frame: ecs.i32,
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const frames = [
      '',
      'assets/1.png',
      'assets/2.png',
      'assets/3.png',
    ]

    dataAttribute.set(eid, {
      frame: 0,
    })

    ecs.defineState('default')
      .initial()
      .listen(schemaAttribute.get(eid).uiElement, ecs.input.UI_CLICK, () => {
        dataAttribute.mutate(eid, (c) => {
          c.frame = Math.min(c.frame + 1, frames.length - 1)
        })

        ecs.Ui.set(world, eid, {
          image: `${frames[dataAttribute.get(eid).frame]}`,
        })

        console.log(ecs.Ui.get(world, eid).image)
      })
  },
})