Search the Community

Hi, I'd like to develop some automated UI tests for my PixiJS application (PixiJS 4.8.1). My test procedure should look something like this later: const test = new UITest() test.click({x: 100, y: 80}) test.drag({x: 100, y: 80}, {x: 120, y: 40}) test.dblClick({x: 200, y: 120}) etc. For this I have to trigger events. I know that the InteractionManager and DisplayObject inherit from EventEmitter. Which option is the best way to trigger events? 1. directly on the canvas element? const originalEvent = new MouseEvent('click', { bubbles: true, cancelable: true, ... }) app.view.dispatchEvent(originalEvent) 2. or via app.renderer.plugins.interaction.onPointerUp (originalEvent) for example? 3. or via app.renderer.plugins.interaction.emit(originalEvent) Unfortunately, I have not yet managed to trigger an event with these three ways ? What already worked was to call the emit method directly on a PIXI.DisplayObject, but I needed to create a PIXI.InteractionEvent object myself, which was quite expensive ... Thanks in advance! Siddi

I'm trying to se my interaction mode to true so I can set my sprite to follow my cursor. I've managed to do this before i Added ES6 and webpack. Here is a code example: import * as PIXI from 'pixi.js'; // App with width and height of the page const app = new PIXI.Application({ width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAAA, }); document.body.appendChild(app.view); let player = new PIXI.Sprite.from('assets/dirt.png'); player.anchor.set(0.5); player.x = app.view.width / 2; player.y = app.view.height / 2; app.stage.addChild(player); const movePlayer = function (e) { let pos = e.data.global; player.x = pos.x; player.y = pos.y; } app.stage.interactive = true; app.stage.on("pointermove", movePlayer); Console screenshot: https://i.imgur.com/w4fAcb9.png I think that the problem may be related to webpack somehow ;(

Hi all It looks like the default time to register a tap on an object is indefinite. Meaning that a tap event is just simply just touch on and touch off, regardless of time between. Is this the case, or is there a setting to shorten it within the interaction manager?

Hi all, have continued working on my little game prototype. Nothing much there atm except an animated background (a few clouds moving, and a Spine based animated cactus). Ive just started dropping in some sprites for the HUD but getting an error from Interaction manager as soon as myButton.interactive=true and myButton.buttonMode = true are set. Cannot read property 'pointerType' of undefined at Interactionmanager.processPointerMove Any clues? Using 4.52 Production (non-min)

Hey Guys, I wonder how to access the default initalized InteractionManager? Referring to this thread: There seems to be a InteractionManager already initialized. I have the same problem like the threadstarter in the referred thread. My events are registered two times since I have initalized my own InteractionManager to change the defaultCursorStyle. How can I access the interactionmanager created by PIXI?

Hi everyone, the interaction in Pixi confuses me. I have the following simple structure: <div> <canvas id='pixi-container'></canvas> <div id='event-catcher'></div> </div> Both the canvas and the event-catcher have the same width/height and are positionned on top of each other: event-catcher on top of pixi-container. I then use the setTargetElement to tell pixi that I want event-catcher to catch the events. myRenderer.plugins.interaction.setTargetElement(document.getElementById('event-catcher')); However in my stage I have some sprites and DisplayObjectContainers that have onclick events that are not being fired. If I remove the event-catcher div it will work properly and click events are fired. Do I misunderstand the use of setTargetElement in Pixi? Thank you for any help.

Hello, I've got a problem that is starting to impact the performance of my game and I found through profiling that the MouseMove & ProcessMouseMove, are binded to the window "mousemove" event. They do fire correctly, but I simply need them to fire once per frame. ( They fire 5 - 10 times per frame which is normal ) Is there a way to do this in pixi with interactionFrequency, or do I need to do some hack ? Thanks in advance

In v2 stage had InteractionManager, but v3 has no stage what is analog of // animate loopvar mouse = stage.interactionManager.mouse;player.x = mouse.global.x;player.y = mouse.global.y;and another questions - has any working v3 examples already exist ?

Hello, Let's say that i have an "Interactive" Sprite Button (sprite.interactive = true) ready for receiving click/touch events, and above of it there is a big TilingSprite (with the size of all screen) to create a Flash effect. The tiling sprite is visible (tilingSprite.visible = true) and its alpha oscillate between 0.1 to 0.5. The problem is when i want to touch/click the Sprite button nothing happens... The only way to receive a touch/click event is by setting tilingSprite.visible = false. Is there any way to set the interaction manager to "bypass" some elements like some TilingSprites or others?

I recently upgraded from PIXI 1.5.4 to 2.2 and I am getting this error when I drag the mouse on the canvas: Uncaught TypeError: Cannot read property 'length' of undefined PIXI.InteractionManager.collectInteractiveSprite PIXI.InteractionManager.collectInteractiveSprite PIXI.InteractionManager.rebuildInteractiveGraph PIXI.InteractionManager.onMouseMove It appears to be PIXI.InteractionManager.prototype.collectInteractiveSprite hitting a child node with no children array. if (child.children.length > 0) { this.collectInteractiveSprite(child, iParent); }Any clues as to what is going on? This problem also occurs in PIXI 1.6.0

Is there a way to convert window.clientX / window.clientY to PIXI stage? I have this scenario: container.touchmove = container.mousemove = function(data){ currentPlayer.drawTo(data.getLocalPosition(container).x, data.getLocalPosition(container).y);}but I need to listen and input mouse coords from the whole window, as when the user is dragging outside the stage, it stops drawing. this is what I need: $(window).on('mousemove', function(ev){ var point = windowPointToPIXI ???? getLocalPosition(container); where point.x and point.y would be the same as the one from previous: data.getLocalPosition(container) Then I can call: currentPlayer.drawTo(point.x, point.y);});

Hey, I'm trying to set a mousedown and touchstart in a Spine object, but this don't dispatch a event. After this I tried to set a hitArea in spine, but this don't made diference. What I can do?