Touch events not triggered on Sprite

[zzzdino]

Hi there, I'm able to render a sprite, adjust rotation etc, however I'm not able to receive any touch events on the sprite.

...
sprite.interactive = true;
sprite.on("pointerdown", () => { 
  console.log("touch");
})

Is there another sprite property that I need to set, other than interactive?

I've also tried other event names tap, touchstart etc, however none of these work.

Thanks for any help.

[EvanBacon]

yeah those are browser DOM events, they aren't supported.

[lanzosuarez]

What's the environment you're using man that you managed to install it successfully? @zzzdino

[zzzdino]

@EvanBacon Ok, would I be correct in thinking that in order to add support for capturing touch events on a Sprite, I'd need to implement PanResponder then detect whether the touch was within the Sprite bounds? Something along the lines of:

<Expo.GLView
    {...PanResponder.create({
      onPanResponderGrant: ({ nativeEvent }) => {
        const { locationX, locationY } = nativeEvent.touches;
        nativeEvent.touches.map(
          ({ locationX, locationY }) => {
            // check whether locationX & locationY are within Sprite bounds
          }
        );
      }
    }).panHandlers}
   ...
</Expo.GLView>

@lanzosuarez I'm on macOS

[EvanBacon]

@zzzdino Yeah you will need to implement a native touch system. You could also shim out the browser touch events but it will require some effort. Here is an example of the native solution: https://github.com/expo/expo-pixi/blob/43471c8821c95ede15147a84f005f043d3edd4df/examples/comprehensive/components/PixiBaseView.js#L25-L30

[flybayer]

@zzzdino have you made any progress on expo-pixi touch events? I'm going to need this myself very soon.

[flybayer]

@EvanBacon can you elaborate on PixiBaseView and TouchableView? I need Pixi touch events and am not sure how to take these examples and make them work. Thanks!

[baochungit]

I'm glad that I've succeed of passing native touch events to PIXI.InteractionManager. It was quite tricky. I had to fake some window properties such as window.ontouchstart, window.TouchEvent and also extended the _transformEvent function (from the expo-pixi examples).

Some other keys for anyone who are stuck:

• to bypass the IE 11 check in PIXI.InteractionManager class: -> app.renderer.plugins.interaction.interactionDOMElement.parentElement = {};

• to emit touch event: -> app.renderer.plugins.interaction.interactionDOMElement.emitter.emit(eventType, event);