pixijs / gif

Plugin to support playback of animated GIF images in PixiJS.
https://pixijs.io/gif/docs/
MIT License
37 stars 6 forks source link

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

Open gubeils opened 4 weeks ago

gubeils commented 4 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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.