Pixi.js: Non-interactive sprites block the click of interactive sprites (and DOM doesn't block mouse over of canvas anymore)?

Created on 26 Apr 2015  ·  23Comments  ·  Source: pixijs/pixi.js

Hopefully these two are close enough to actually fit in the same issue. I am using pixi v3

a.) Whenever I have two overlapping sprites, even if the top sprite has interactive = false, my mouseover on the bottom sprite (with interactive = true) is blocked by the first sprite in question.

b.) When mousing over some DOM elements that I use for our game's HUD, the sprites below it still act as if they are being directly moused over. This didn't use to happen in v2. This is happening with mouseover, but not click.

I was looking for the cdn link for v3 so that I can try to create a jsfiddle for these, but didn't have much luck.

🕷 Bug

Most helpful comment

The trick is setting an empty hitArea to the DisplayObject or DisplayObjectContainer:
mouseDisabledElement.hitArea = new PIXI.Rectangle(0, 0, 0, 0);

All 23 comments

https://rawgit.com/

Is pretty cool. You can just paste the dev bin file link there and it will give you a url that proxy's loading it straight from GitHub.

For example, you can paste in:

https://github.com/GoodBoyDigital/pixi.js/blob/dev/bin/pixi.js

and get out:

https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js

Thanks, I will make some jsfiddle examples today and post em up here.

I'm having problems getting the jsfiddle set up correctly, as I think I need to use an image to illustrate my point, but hopefully I can just give you some code and observations I've made in order to figure out what is going on.

Theoretical Bug Case (Pseudo code snippet):

var bunny = PIXI.Sprite.fromFrame(building.image); 
bunny.interactive = true;
stage.addChild(bunny);
bunny.hitArea = poly;
bunny.on('mouseover',function(data){
      bunny.brighten
});
bunny.on('mouseout',function(data){
      bunny.unbrighten
});
var g2 = new PIXI.Graphics();
    g2.beginFill(0xC03302);
    g2.drawCircle(0, 0, 100);
    g2.endFill(); 
    var cant_touch_this = new PIXI.Sprite(g2.generateTexture());
    cant_touch_this.position.x = bunny.position.x - 100;
    cant_touch_this.position.y = bunny.sprite.position.y - 100;
stage.addChild(cant_touch_this);

The two sprites overlap, bunny's handlers stop working once over the second sprite.

When I do a similar thing in jsfiddle (http://jsfiddle.net/h63mLx7b/) the bug is not present. One of the primary differences here I see, is that in the fiddle I am not using fromImage or fromFrame, but generating a texture. I tried this in the context of my game (using 2 generate textures) and the bug is still present.

The next thing I'm thinking as a possibility is the hitArea, but when I added hitArea to the jsfiddle, it did not recreate the bug. I'm going to continue filing through my code to see if there are any other significant snippets I missed, but perhaps maybe you see something I'm missing? Is there anything in PIXI that has the intended behavior of making a sprite prevent events below it from happening that I may have accidentally included?

Possibly also useful information, bunny has

    bunny.pivot.x = 0.5;
    bunny.pivot.y = 1;
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 1;

Yet another useful tidbit: in the context of my game, the jsfiddle code recreates the bug! So I guess the final question becomes, what global option (or option on the Containers themselves) could be creating this?

wahooooooo I figured it out! That may be a bit of better news for me than you though, assuming this is truly a bug and not intended behavior.

http://jsfiddle.net/h63mLx7b/1/

When the Sprites exist in a container with interactive = true, the bug happens. If you set stage.interactive = false, the bug goes away.

EDIT: Wrong fiddle link at first

@englercj ping. just curious if you've gotten a chance to look at this

I haven't yet, sorry Shadow.

I have a lot of life events going on right now and haven't had much side-project time. I'm hoping to do a bug smash soon, but extremely busy right now :(

no worries man, I understand how it goes :)

Hey peeps - made a little tweak to the dev branch, how this:

http://jsfiddle.net/g3vcfmef/

It's OK now!
Thanks :)

Confirmed working on my end as well. Thanks a bunch!

Actually, the second part of my original question is still posing a problem:

b.) When mousing over some DOM elements that I use for our game's HUD, the sprites below it still act as if they are being directly moused over/clicked. This didn't use to happen in v2. This is happening with mouseover, but not click.

This is causing a bit of a problem as, I try to click one of the DOM HUD elements, the canvas below still triggers a click and my main Container mouseup handler happens, thusly hiding the menu instantly after creating/showing it. I have attempted to use e.stopPropagation in the jquery mouseup handler, to no avail.

stage.on('mouseup',function(data){
console.log("Still triggering");
});

$('body').on('mouseup','#battle-menu:not(.attack-island)',function(e){
e.stopPropagation();
});

battle-menu overlaps stage.

Sorry to re-open this, I should have re-read my original post :(

http://jsfiddle.net/prg9jubt/2/

It's weird, because sometimes the stage click triggers other times, it doesnt. Just click around an see

If it helps at all, this kind of behavior only seems to occur for mouseup. Mousedown and click seem to be solid.

Reverted in 5344062ef4657857ce6a20bea4681e5d66c1c2b2 for #1765. We are looking into the best way to solve these issues.

@englercj So just to make sure I follow, the overlapping sprite bug I mentioned exists in the master branch of pixi again while y'all look into a way to fix it better?

Just wanna make sure I know where I stand/if I can just move on from this for now to work on other things

Yes, that is correct.

Ok, thanks for the update @englercj

fixed! :+1:

Which scenario was fixed? If my container's interactive=true, and a particles emitter is blocking view of an interactive sprite, the mouse events for that sprite are still not firing. Obviously if I set the container's interactive=false, then the events fire. However, I require that the container be interactive so that the map can be dragged and zoomed. I am using the latest dev version of the code.

The trick is setting an empty hitArea to the DisplayObject or DisplayObjectContainer:
mouseDisabledElement.hitArea = new PIXI.Rectangle(0, 0, 0, 0);

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zcr1 picture zcr1  ·  3Comments

gaccob picture gaccob  ·  3Comments

MRVDH picture MRVDH  ·  3Comments

Makio64 picture Makio64  ·  3Comments

madroneropaulo picture madroneropaulo  ·  3Comments