Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug Report: Unable to Load GIF using @pixi/gif with PIXI.js v7.x #22

Open
gubeils opened this issue Jun 1, 2024 · 2 comments
Open

Bug Report: Unable to Load GIF using @pixi/gif with PIXI.js v7.x #22

gubeils opened this issue Jun 1, 2024 · 2 comments

Comments

@gubeils
Copy link

gubeils commented Jun 1, 2024

Hello,
I encountered a similar issue when trying to load a GIF file using @pixi/gif with PIXI.js version 7.x. The initial method I tried failed to load the GIF, returning null, so I attempted another approach. While the second method successfully loaded the GIF, it raised errors whenever the mouse was moved in and out of the canvas area.

Method 1 (Not Working)
Here is the initial method I tried, but the GIF returned null:

import '@pixi/gif';
import { Assets } from 'pixi.js';

async function loadGif() {
  const url = '../../public/assets/year.gif';

  const image = await Assets.load(url);
  console.log('loadGif.image', image);
  app.value.stage.addChild(image);
}

The console.log('loadGif.image', image) statement prints null.

Method 2 (Working but with Errors)
I then tried the following method, which successfully loads the GIF but raises errors when the mouse moves in or out of the canvas:

const url = "http://localhost:5173/assets/good.gif";
try {
  fetch(url)
    .then(res => res.arrayBuffer())
    .then(AnimatedGIF.fromBuffer)
    .then(image => app.value.stage.addChild(image));
} catch (error) {
  console.error('loadGif.error', error);
}

The GIF loads and displays correctly, but moving the mouse in and out of the canvas area causes errors. Below is the error message screenshot:
image
Steps to Reproduce
Install @pixi/gif version 2.1.1 and PIXI.js version 7.x.
Create the above function to load a GIF file.
Observe the console output after calling the loadGif function. The image is null instead of an expected PIXI.Texture or PIXI.Sprite.

Expected Behavior
The Assets.load function should load the GIF and return a valid PIXI.Texture or PIXI.Sprite, which can be added to the app.value.stage.

Actual Behavior
The Assets.load function returns null, making it impossible to add the GIF sprite to the stage.
Additional Information

PIXI.js version: 7.x
@pixi/gif version: 2.1.1
Environment: Working on a Vue 3 application, with the following setup in the onMounted lifecycle hook.
Questions
Is there a specific method I need to use to correctly load a GIF file with @pixi/gif?
1.Are there additional configurations or imports required that I might be missing?
2.Any assistance or guidance you can provide on this issue would be greatly appreciated!
3.For Method 2, what causes the errors when the mouse moves in and out of the canvas, and is there a way to resolve this?
Thank you!

@gubeils
Copy link
Author

gubeils commented Jun 3, 2024

Additionally, I found that this error is because the PixiJS code has a function named hitTestRecursive which contains the following code:
https://github.com/pixijs/pixijs/blob/1ebdfc5a271473eccbafa7670bf6822cf9ff0aa2/src/events/EventBoundary.ts#L530

const isInteractiveMode = this._isInteractive(eventMode);
const isInteractiveTarget = currentTarget.isInteractive();

This shows the error currentTarget.isInteractive is not a function. Does this mean need to write an isInteractive function?

@gubeils
Copy link
Author

gubeils commented Jun 3, 2024

I found that when the eventMode of the sprite is set to 'passive', there is no error. However, related interactions such as 'click' are not triggered.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant