Search the Community

Hey there! I'm extending the button class right now and I was wondering if it is possible to call a custom function when the mouse hovers over the button, since it already does the checking to change the pointer. MyButton.prototype._pointerOverHandler = function() { console.log("check"); }; This doesn't do the trick, I guess because _pointerOverHandler is a protected internal function. If there is no better way then to check for mouseover myself in the buttons update cycle, then so be it, just tell me - I just want to make sure I don't miss anything. Any help is greatly appreciated! Thank you

Hello everyone. I also opened an issue on github, you can check via here: https://github.com/pixijs/pixi.js/issues/3616 Tested on versions `4.x.x` including latest `4.3.3`, I face this issue with `mouseover` and `mouseout `events in the following cases. 1) I have a rectangle (graphic object) that moves back and forth through the canvas. When I place my cursor in the middle of the canvas, as the shape moves and crosses over my cursor, `mouseover` and `mouseout` events fail to register in a random pattern. 2) For the second case, the rectangle doesn't move, but this time I cross over the shape with my mouse. As I move my mouse fast , `mouseover `and `mouseout` events fail to register in a random pattern as well. Here you can check the code JsBin Below I also share javascript file /* * Mouse events randomly fail to register when delta is large or * rectangle width is small, or there's no animation but you * simply move your mouse fast over the rectangle. * Tested on versions 4.x.x including latest 4.3.3 */ let delta = 15; const width = 40; const renderer = PIXI.autoDetectRenderer(400, 200) document.body.appendChild(renderer.view) const stage = new PIXI.Container() const rect = new PIXI.Graphics() rect.beginFill(0xf8d41f,1) rect.drawRect(0, 0, width, 200) rect.endFill() rect.interactive = true stage.addChild(rect) rect.on('mouseover', function() { console.log("1 mouseover") this.alpha = 0.2 }) rect.on('mouseout', function() { console.log("2 mouseout") this.alpha = 1 }) animate() function animate() { if (delta > 0 && rect.position.x >= 400) { delta = -delta } if (delta < 0 && rect.position.x <= 0) { delta = -delta } rect.x += delta renderer.render(stage) requestAnimationFrame(animate) }

The PIXI.sprite, which is underneath a PIXI.particles.Emitter, has some bound mouse events - mouseover and click... but they are being blocked by the particles. When mousing over the sprite or clicking on it, the event is not fired. I found someone having the same issue, and his solution was to set the containing PIXI.container's interactive property to false: https://github.com/pixijs/pixi.js/issues/1725 However, in my situation, I require that the container be interactive for dragging and zooming the map. How can I allow the sprite's mouse events to be fired, regardless of whether a particles emitter (or even another non-interactive sprite) is overlaid on top of it in respect to the z-axis - while still keeping the container's interactive=true?

Hi, I have something like that (simplified version for the playground) : http://www.babylonjs-playground.com/#272WDW#23 But when we move the mouse over the hole, the user don't necessarily know that he can click on the hole. So what I would like is an effect to know that we can click on. At the beggining, I thought to make a little zoom on the image which is behind the hole but i'm not convinced by this effect. (http://www.babylonjs-playground.com/#272WDW#24 - But, nice work iiceman ) What I thought, would be that at mouseover, display a border all around the edge of the hole (inner side) with a little blur effect. I don't find an exemple to illustrate what I say, I hope that what I say is understandable. I know it's possible to enable the edges of a polygon (but i don't know how), so i think we can use that, but I don't find anything like this on the forum or the documentation Thanks !

I'm having a strange issue, I have not encountered before. When dragging a sprite over another sprite, mouse events underneath dragged sprite are not firing. For example if I have a SpriteA, which has mouseover event. If I simply drag my mouse over it, event would work just fine. However, if i'm dragging another sprite (SpriteB) over SpriteA, mouseover event of SpriteA is not detected. I know I have done this before where it worked, but I cant figure out whats going on right now. Is there some setting that allows a sprite to be "click-through" ? Thank you! Edit: Just in case it makes a difference, some additional information: I am dragging an "item" from one item slot to another. Both item and each slot is a sprite. When dragging an item, I need to know over which slot its currently positioned to know where to move it. Similarly this could be handled on mouseup event, but strangely mouseup event is firing for ORIGINAL slot, not the slot that mouse is hovering over.

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!

Hello everyone, I need help on something. I wonder if it's possible to make something like a "drop down menu" when the mouse hovers one mesh. I've got the problem minimized by overriding the right button click. But this option is not viable (since it's a bad practice). So.. I use the left button to point the place where the mesh will move to, the only solutions that occurs to me it's the mouseover event. Any suggestions? Thanks in advance.