Overriding the equivollent to 'containsPoint' to implement pixelPerfect click without conflict?

[RichardSneyd]

Hi,

I'm working on pixelPerfect input, and I have it working (if I attach my own containsPoint method directly to the Spine object), however, this ends up conflicting with the build-in input system for pixi-spine, which appears not to use containsPoint at all. Basically, I want to disable this other system on a per-object level (I'm not looking to hack the prototype). Can anyone point me in the right direction? I've been searching through the data in the console for clues etc, but I can't seem to figure out what the relevant methods are etc.

[ivanpopelyshev]

build-in input system for pixi-spine, which appears not to use containsPoint at all.

there's no build-in input system for pixi-spine.

[RichardSneyd]

OK. But it is being handled somwhere, and it's not in containsPoint, because the method doesn't exist on Spine objects. So, where is it being handled, is really what I'm asking?

As in, if I do something like (pseudo):

spineObj.interactive = true; 
spineObj.on('somemouseevent',...blabla);

then, for example, I click on the object, and it returns as a valid click, in a regular Sprite, containsPoint returns true or false for this. I'm trying to identify the equivolent for Spine objects. I hope that makes more sense to you.

[RichardSneyd]

This seems to do the trick:

 removeChildrenRefs(spineObject: any) {
    spineObject.children.forEach((c: any) => {
      c.children.forEach((c2: any) => {
        c2.containsPoint = () => {
          return false;
        }
      });
    });

Afterwards, if you add a containsPoint method to the parent object, it will fire. Thanks for clue (no separate system) :)

[ivanpopelyshev]

try

spineObject.interactiveChildren = false;

[RichardSneyd]

Ah. That would be simpler woudn't it. Thank you!

[doup]

@RichardSneyd can you share the code you used? I've upgraded a three years old project to the latest Pixi & @pixi/spine and now the mouseover events are not working… there isn't even a method to handle mouse events. I previously had:

this.animation = new Spine(animationData);
this.animation.interactive = true; // THIS FAILS
this.animation.on('mouseover', () => {}); // THIS FAILS

Thanks!

[doup]

OK, looks like a type issue, the properties are there, but the types are wrong. If cast to any it compiles and works correctly. It's weird though, I've tried to cast to as unknown as DisplayObject but it says that interactive is not present.

But it should be: https://pixijs.download/dev/docs/PIXI.DisplayObject.html#interactive

[doup]

Apparently I was missing "esModuleInterop": true in tsconfig.json; with that setting it works correctly.