CODEWITHSUNDEEP
mouseeventpixi.js
Meysam Ghorbani
Meysam Ghorbani

Reputation: 105

pixiJS ignore mouse event

I have a UI layer and a Game layer. that the UI layer falls transparently on the Game layer. And when I click on the sprites inside the Game layer. I do not receive events. I want the events to reach the bottom layer as well. I tried the codes but it didn't work.

        ui.on('pointerdown',e=>{
        e.preventDefault()
        e.stopPropagation()
        e.stopImmediatePropagation()
    })

Upvotes: 0

Views: 877

Answers (2)

Xu Chen
Xu Chen

Reputation: 46

With new feature in pixi.js v7+, you can use EventBoundary to reach your goal. Just receive these events sent from the UI layer, and forward them to the Game layer, with the code like this:

const boundary = new PIXI.EventBoundary(GameLayerRoot);
[
  'pointerdown',
  'pointerup',
  'pointermove',
  'pointerover',
  'pointerout',
  'wheel',
].forEach((event) => {
  UIArea.addListener(event, (e) => boundary.mapEvent(e));
});

Upvotes: 1

BuyMyBeard
BuyMyBeard

Reputation: 76

Pretty sure it's a limitation of Pixijs to avoid firing multiple events when there is overlap of containers with interactive property set to true. It will only fire the event on the container that is in foreground (the last one added to the stage).

You can probably work around it by either creating PIXI.Graphics for your UI elements with alpha set to 0 and interactive set to true, or create an entire Interactive elements layer and checking for overlap between elements.

Edit: I still don't understand what you are trying to accomplish, and you potentially could have to rethink your project.

The other way you could accomplish this is by ignoring the interactive attribute, adding a click event on the entire document, and checking with your containers which one has implemented a IClickable interface you made up, then checking if the pointer position overlaps with the interactive area you calculate manually for each container. you can then fire an event for all sprites under your pointer, even if they are on top of each other.

Upvotes: 0

Related Questions