How to add the gif to the specified position and size?

[xeoshow]

Hello,

I am trying below code, and just would like to add the image.gif to the specified position (x, y) with the specified size (width, height) or specified scale, How should I do? Is the image variable a texture or sprite?

Thanks v much.

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

const app = new Application();
const image = await Assets.load('image.gif');
app.stage.addChild(image);

[bigtimebuddy]

The image is a Sprite. So you can set position and scale like you would with a Sprite.

[gubeils]

Bug Report: Unable to Load GIF using @pixi/gif with PIXI.js v7.x
Description
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:

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!

[bigtimebuddy]

@gubeils could you please make a new issue, this is unrelated to the initial post above. Also do you have a functional reproduction of this? That would be very helpful.

[gubeils]

I have created a new issue, the link is:
#22