SCREEN_TOUCH_START event not triggering when component is touched

Hi all,

I am running the following code block on this project:

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

ecs.registerComponent({
  name: 'startScreen',
  schema: {
    loadingUI: ecs.eid,
    onboardingUI: ecs.eid,
    startButton: ecs.eid,
    startButtonText: ecs.eid,
  },
  schemaDefaults: {
  },
  data: {
  },
  stateMachine: ({world, eid, schemaAttribute}) => {
    const startGame = ecs.defineTrigger()

    const {
      loadingUI,
      onboardingUI,
      startButton,
      startButtonText,
    } = schemaAttribute.get(eid)

    const handleStart = () => {
      console.info('handleStart')
      ecs.ScaleAnimation.set(world, startButton, {
        autoFrom: true,
        toX: 0,
        toY: 0,
        toZ: 0,
        loop: false,
        duration: 1000,
        easeOut: true,
        easingFunction: 'Elastic',
      })
      setTimeout(() => {
        ecs.Hidden.set(world, onboardingUI, {})
        startGame.trigger()
      }, 1000)
      console.info('handleStart')
    }

    ecs.defineState('onboarding')
      .onEnter(() => {
        ecs.Ui.mutate(world, startButtonText, (cursor) => {
          cursor.text = 'loading'
        })

        const onxrloaded = () => {
          ecs.Ui.mutate(world, startButtonText, (cursor) => {
            cursor.text = 'start'
          })

          world.events.addListener(startButton, ecs.input.SCREEN_TOUCH_START, handleStart)
        }

        window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)
      })
      .onExit(() => {
        world.events.removeListener(startButton, ecs.input.SCREEN_TOUCH_START, handleStart)
        world.deleteEntity(onboardingUI)
      })
      .initial()
      .onTrigger(startGame, 'gameStarted')
  },
  add: (world, component) => {
    ecs.Ui.set(world, component.schema.loadingUI, {
      width: window.innerWidth, height: window.innerHeight,
    })
  },
})

The start UI boots up and shows, however no touch event will trigger the animation. I’m not convinced this is a code issue as I’m following along with a this sample project. The gist is that the SCREEN_TOUCH_STARTevent doesn’t seem to be occuring when the component is touched. Any help would be massively appreciated!

Here’s the general component layout as well.

How are your buttons set up in the scene?


The start button is in front of the rest of the scene and is set to track the camera. I set a physics collider on the top level StartScreen entity so you can see the area it takes up.