pixi-fusion/dist/src/hooks/useAnimatedSprite.js

This module offers a set of common components needed for playing games.

import { useEffect, useMemo } from "react";
import { AnimatedSprite, Spritesheet } from "pixi.js";
import { useTextures } from "./useTexture";
import { useObject } from "./useObject";
export const useAnimatedSprite = ({ texture, spritesheet: spritesheetJSON, animation, animationSpeed = 1, isPlaying, ...options }) => {
    const textureKeys = useMemo(() => {
        return [...(texture ? [texture] : [])];
    }, [texture]);
    const { textures, isFetched } = useTextures({ keys: textureKeys });
    const spritesheet = useMemo(() => {
        if (isFetched) {
            const sheet = new Spritesheet(textures[0], spritesheetJSON);
            sheet.parse();
            return sheet;
        }
        return null;
    }, [spritesheetJSON]);
    const sprite = useMemo(() => {
        if (spritesheet?.animations?.[animation]) {
            return new AnimatedSprite({ textures: spritesheet?.animations?.[animation] });
        }
        return null;
    }, [texture, spritesheetJSON, animation]);
    useObject({ object: sprite, ...options });
    useEffect(() => {
        if (sprite) {
            sprite.animationSpeed = animationSpeed;
        }
    }, [animationSpeed, sprite?.uid]);
    useEffect(() => {
        if (sprite) {
            if (isPlaying) {
                sprite.play();
            }
            else {
                sprite.stop();
            }
        }
    }, [isPlaying, sprite?.uid]);
    return sprite;
};