Search the Community

I've found some strange behavior in interactivity events of display object inside a masked container. Not sure if this is a bug or just a questionable decision; anyway, it poses some problems. Generally interactive display objects receives events such as "pointermove" or "pointerupoutside" at any time, whether pointer is over them or not. Same applies to masked display objects, by the way. But if you place an interactive display object inside a masked container, events fire only when pointer is over masked area. All events, including "pointerupoutside", so there's no way to keep track of pointer position and button state. Look at this codepen. Have anyone faced this problem? I guess I can assign event listeners to the stage container or nearest parent without mask, and it will probably work, but seems a little bit dirty to me. Is there a better solution?

This is an extension of post : After hitting play on demo : https://preview.c9users.io/nafroman/bensvid/test.html and move the mouse you can see different screens and with up and down arrows zoom in and out but I am confused as how I can set the mouse so it doesnt go further past the video's bounds. I am wondering if anyone can take a look at my code and suggest any optimisations that can be done to make the playback better

I've a visible sprite at the center of my canvas, but following http://pixijs.github.io/examples/index.html#/demos/interactivity.js gives no result. Events are never actionned. Edit: as I tried on this.stage and my hud was on top, it was not working. Then I have to create a new GUI stage on top of the hud this.renderer.render(this.stage); this.renderer.render(this.hud.container);

Just wondering are there any solutions to ignore zero alpha channel on png images for mouse events. I make sprite from image with complex form and transparent area on it. And when I make it interactive mouse reacts on this transparent areas and it looks ugly. I know I can check pixels under mouse, and if there is no solution I'll have to do it. For example in flash there is library interactivePNG which do such things. Just wondering are there something similar for pixi.js?

Hello everyone! I'm currently working with the latest version of PIXI.js (4.1.1) and have a problem with masked container. Code example: var stage = new PIXI.Container(), mask = new PIXI.Graphics(), gameStage = new PIXI.Container(); mask.drawRect(0, 0, 1100, 630); mask.endFill(); gameStage.mask = mask; stage.addChild(rectangle); stage.addChild(gameStage); gameStage contains a list of interactive buttons but I can't interact with any element behind the mask.

Hello, I'm working on a close source project so the amount of example code I can supply is relatively limited, so let me see if just simply describing my problem will help. We have three containers, linePoints and lineSegments, these containers are children of the line container. They are all interactive and in buttonMode We have two types of sprites, the points, and segments, these are children within their respective containers. These sprites are created also interactive and in buttonmode with events tied to them. Points get all of the drag related events (mosedown, mouseup etc) and Segments get just the click event. The structure : line(container, interactive) -linePoints(container, interactive) -points(sprite, interactive, draggable) -lineSegments(container, interactive) -segments(sprite, interactive, clickable) The problem : My points are drawn on top of the line segments, yet when I click on them to drag them around, this fires the click event on the lines lying beneath them (which actually creates a new point, so things get a bit messy) So my question is, are click events supposed to fall through sprites and activate on sprites underneath them in the draw order? If so then is there a way to properly block this from happening ? What I've tried : binding null to the click event on the points: point.on("click", null) debinding the click event on the points : point.off("click") - thought I couldnt actually find documentation on .off() so I'm not sure this even does anything changing the size of my points to be absolutely sure they are covering the lines - the clicks are definitely "falling through" and not just sneaking around, I'm clearly getting two interaction events at the same time here, one on the point when I mousedown to drag, and one on the line underneath it. So there's my issue, if this really isn't enough to explain or illustrate the problem, I can make a fiddle on request, but I'd like to avoid doing the extra work if it's not required. It's efficiency not laziness! Thanks all in advance

Hi, I was noticing similar bugs for a while, but now I see its not my fault. http://jsfiddle.net/43xf0oor/ Move the mouse over bitmap, then to left upper, stage corner, see the flickering, also rectangle gets chopped. Is this suppose to be buggy and cacheAsBitmap shouldnt be used on interactive display objects? Thanks

Hey all, I am trying to make a very basic prototype of a Paint-like applications. Is it possible to bind a mousemove event to the Stage that I create? If I bind an event like this: el = this.renderer.view;el.addEventListener('mousemove', function(e){ console.log('move); });I don't get a log event, so I assume that Pixi is catching and squashing the event. What's the Pixi way of binding mousedown, mousemove, and mouseup events to a Stage instance? Do I need to create an interactive, but transparent Graphics instance to cover the entire thing and have it handle the events? Thanks!