pixijs/pixijs-scene-gif

Que fait pixijs-scene-gif ?

Utilisez cette compétence lors de l'affichage de GIF animés dans PixiJS v8. Couvre l'import side-effect pixi.js/gif, le chargement via Assets.load retournant un objet GifSource, la lecture avec GifSprite (play/stop/currentFrame/animationSpeed), les options autoPlay/loop, les callbacks onComplete/onLoop/onFrameChange, le partage de GifSource, clone et destroy. Déclencheurs : GifSprite, GifSource, pixi.js/gif, animationSpeed, currentFrame, autoPlay, onComplete, onFrameChange, options du constructeur, GifSpriteOptions.

Utilisation

import { Assets, Sprite } from 'pixi.js';
import 'pixi.js/gif'; // Import side-effect requis

// Charger le GIF
const gifSource = await Assets.load('chemin/vers/votre.gif');

// Créer un sprite à partir du GIF
const sprite = Sprite.from(gifSource);// Génère un GifSprite

// Ou utiliser directement GifSprite
import { GifSprite } from 'pixi.js/gif';
const gifSprite = new GifSprite(gifSource, {
  autoPlay: true,
  loop: true,
  animationSpeed: 1,
});

app.stage.addChild(gifSprite);

// Contrôle de la lecture
gifSprite.play();
gifSprite.stop();
console.log(gifSprite.currentFrame); // Image actuelle

// Callbacks
gifSprite.onComplete = () => console.log('Animation terminée');
gifSprite.onLoop = () => console.log('Boucle terminée');
gifSprite.onFrameChange = (frame: number) => console.log('Nouvelle image :', frame);

// Partager GifSource entre plusieurs sprites
const sprite2 = Sprite.from(gifSource);

// Cloner un GifSprite
const clone = gifSprite.clone();

// Détruire
gifSprite.destroy();

Options du constructeur (GifSpriteOptions)

Option	Type	Défaut	Description
autoPlay	boolean	true	Démarre la lecture automatiquement
loop	boolean	true	Boucle l'animation
animationSpeed	number	1	Vitesse de lecture (1 = normale)

Remarques

• L'import side-effect pixi.js/gif est obligatoire pour enregistrer les formats GIF dans le chargeur d'assets.
• Assets.load retourne un objet GifSource (et non un Texture standard).
• Utilisez Sprite.from(gifSource) ou new GifSprite(gifSource) pour créer le sprite animé.
• GifSprite étend Sprite et conserve toutes ses propriétés et méthodes.
• Pour partager une même source entre plusieurs sprites, passez le même objet GifSource.
• clone() crée une copie indépendante avec sa propre lecture.
• destroy() libère les ressources associées.

Exemple avec changement d'image et appel

// Définir un appel onComplete
const gifSprite = new GifSprite(gifSource, {
  onComplete: () => {
    console.log('GIF terminé !');
    // Rejouer après 2 secondes
    setTimeout(() => gifSprite.play(), 2000);
  },
});