animatedSingle behaviour

[ben-randle-core]

Hi, I've just set up a little project using pixi.js 7.2.4 (to be precise) and v5.0.8 of @pixi/particle-emitter. I've been unable to get the animatedSingle behavior type to work. I am seeing correct results when trying to use textureSingle behavior type though. It could be my setup perhaps but I don't think that would explain the discrepancies I'm seeing.

For example:

                {
                    type: 'textureSingle',
                    config: {
                        texture: PIXI.Texture.from('coin-anim-01.png')
                    }
                },

The above works absolutely fine and I see exactly what I would expect. however:

                {
                    type: 'animatedSingle',
                    config: {
                        anim: {
                            framerate: 25,
                            loop: true,
                            textures: [
                                PIXI.Texture.from('coin-anim-01.png'),
                                PIXI.Texture.from('coin-anim-02.png'),
                                PIXI.Texture.from('coin-anim-03.png'),
                                PIXI.Texture.from('coin-anim-04.png'),
                                PIXI.Texture.from('coin-anim-05.png'),
                                PIXI.Texture.from('coin-anim-06.png')
                            ]
                        }
                    }
                },

This yields no particles at all visible on the screen when compared to the previous config. After having a quick look at your docs over here:

particle-emitter/src/behaviors/AnimatedTexture.ts

Line 212 in d82acc7

export class SingleAnimatedTextureBehavior implements IEmitterBehavior

I don't appear to be doing anything too far away from the ordinary. I've also tried using PIXI.Assets.get('coin-anim-01.png') which yielded similar results.

In addition to the above problem I have also noticed that whenever the particle emitter is running and I move the mouse within the PIXI canvas I get the following stack error:

currentTarget.isInteractive is not a function
TypeError: currentTarget.isInteractive is not a function
    at EventBoundary.hitTestMoveRecursive (http://localhost:8080/dist/main.js:15355:47)
    at EventBoundary.hitTestMoveRecursive (http://localhost:8080/dist/main.js:15337:32)
    at EventBoundary.hitTestMoveRecursive (http://localhost:8080/dist/main.js:15337:32)
    at EventBoundary.hitTestMoveRecursive (http://localhost:8080/dist/main.js:15337:32)
    at EventBoundary.hitTestMoveRecursive (http://localhost:8080/dist/main.js:15337:32)
    at EventBoundary.hitTestMoveRecursive (http://localhost:8080/dist/main.js:15337:32)
    at EventBoundary.hitTest (http://localhost:8080/dist/main.js:15274:34)
    at EventBoundary.createPointerEvent (http://localhost:8080/dist/main.js:15722:35)
    at EventBoundary.mapPointerMove (http://localhost:8080/dist/main.js:15477:20)
    at EventBoundary.mapEvent (http://localhost:8080/dist/main.js:15264:20)

After a quick search I came to here: pixijs/pixijs#9380
However using the fix that Zyie suggested here: https://github.com/pixijs/pixijs/wiki/Upgrading-PixiJS
I have had no apparent change in results.

[andrewstart]

Would you be able to share your project for me to look at?

[ben-randle-core]

Hi @andrewstart i've made the project as a whole available here: https://github.com/BAUR0/ts-project

[andrewstart]

The isInteractive stuff I have no idea about, but probably stems from a similar issue that the Texture class that this library imports from @pixi/core isn't the same as the one exported by pixi.js - this was not the case in previous versions of pixi.js, as far as I know, and looking at the installed node modules doesn't seem to be an issue where everything got its own copy of the dependency - is it an issue with webpack?

If you are able to fix the interaction thing and the particle visibility is still a problem, a workaround of {texture: PIXI.Texture.from('coin-anim-01.png')} for each texture will do the trick.

[BAUR0]

Thanks for the workaround Andrew, I've put that into my project and the coins are animating now. It hasn't had any affect on the interactivity error coming from pixi.js, I do suspect this is something weird with webpack/TS. Do you plan to add support into @pixi/particle-emitter for the new way in which pixi.js is exporting its Textures?

[andrewstart]

PixiJS doesn't have a new way of exporting textures - your Typescript config combined with newer module features in Node/Webpack/etc were resulting in your imports of pixi.js pulling in the .js (CommonJS) version of the entire library while particle-emitter was pulling in the .mjs (ESModule) version of the dependencies it needed - thus the particle sprites were not configured with interaction, and if (x instanceof Texture) failed because everything was from different copies of the library.

Using these settings seems to fix it.

"module": "ES2022",
"moduleResolution": "NodeNext", 
``` seems to fix it.

[levymateus]

i have an issue similar to this when i use particle-emitter and an mouse event occur.
When i click in any area of the scene when the particles-emitter is running ... I get the error:

currentTarget.isInteractive is not a function
TypeError: currentTarget.isInteractive is not a function

I'm using pixi.js@^7.3.1 and @pixi/particle-emitter@^5.0.8.
With pixi.js@^7.2.4 i have the same problem.

I solve the problem defining the eventMode to "none" in the particles container. But the config above not works for me.

[andrewstart]

Sounds like the same configuration issue, see above.