How is `<pixiAnimatedSprite>` meant to work?

[haydn]

This might be a bug or it could be a documentation request.

I've trying to use <pixiAnimatedSprite> like this:

<pixiAnimatedSprite
  autoPlay={true}
  loop={true}
  textures={textures}
/>

It renders the first frame no problem, but it's not playing the animation. The textures list definitely has all the animation frames in it. Is there something I'm missing?

[nassiyaww]

Same thing with me.

[HtmlSeniorDev]

I have same error.

SPRITESHEET

{
  "frames": {
    "LOGO_ANIMATION0000.png": {
      "frame": {
        "x": 1,
        "y": 1,
        "w": 800,
        "h": 117
      },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {
        "x": 0,
        "y": 39,
        "w": 800,
        "h": 117
      },
      "sourceSize": {
        "w": 800,
        "h": 200
      }
    },
    "LOGO_ANIMATION0001.png": {
      "frame": {
        "x": 803,
        "y": 1,
        "w": 800,
        "h": 117
      },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {
        "x": 0,
        "y": 39,
        "w": 800,
        "h": 117
      },
      "sourceSize": {
        "w": 800,
        "h": 200
      }
    },
    "LOGO_ANIMATION0002.png": {
      "frame": {
        "x": 1,
        "y": 120,
        "w": 800,
        "h": 117
      },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {
        "x": 0,
        "y": 39,
        "w": 800,
        "h": 117
      },
      "sourceSize": {
        "w": 800,
        "h": 200
      }
    },
    "LOGO_ANIMATION0003.png": {
      "frame": {
        "x": 803,
        "y": 120,
        "w": 800,
        "h": 117
      },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {
        "x": 0,
        "y": 39,
        "w": 800,
        "h": 117
      },
      "sourceSize": {
        "w": 800,
        "h": 200
      }
    },
    "LOGO_ANIMATION0004.png": {
      "frame": {
        "x": 803,
        "y": 120,
        "w": 800,
        "h": 117
      },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {
        "x": 0,
        "y": 39,
        "w": 800,
        "h": 117
      },
      "sourceSize": {
        "w": 800,
        "h": 200
      }
    },
    "LOGO_ANIMATION0005.png": {
      "frame": {
        "x": 803,
        "y": 120,
        "w": 800,
        "h": 117
      },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {
        "x": 0,
        "y": 39,
        "w": 800,
        "h": 117
      },
      "sourceSize": {
        "w": 800,
        "h": 200
      }
    }
  },
  "animations": {
    "LOGO_ANIMATION": [
      "LOGO_ANIMATION0000.png",
      "LOGO_ANIMATION0001.png",
      "LOGO_ANIMATION0002.png",
      "LOGO_ANIMATION0003.png",
      "LOGO_ANIMATION0004.png",
      "LOGO_ANIMATION0005.png",
    ]
  },

React Component

import { memo, useMemo } from "react";
import { Assets, Spritesheet, Texture } from "pixi.js";
import { sceneWidth } from "@app/pixi-app-settings.ts";

export const AnimatedLogo = memo(() => {
  //Pre Load from bundle
  const atlas: Spritesheet = useMemo(() => Assets.get("logo-anim.json"), []);

  const textures = useMemo(() => {
    const frameNames = atlas.data.animations!.LOGO_ANIMATION;
    return frameNames.map((frame: string) => ({
      texture: Texture.from(frame),
      time: 100,
    }));
  }, []);

  return (
    <pixiAnimatedSprite
      autoPlay={true}
      loop={true}
      anchor={0.5}
      layout={{
        position: "absolute",
        top: 120,
        left: sceneWidth / 2 - 420,
      }}
      textures={textures}
    />
  );
});

If you use refs and create imperatively, then the animation works as it should.

import { memo, useEffect, useMemo, useRef } from "react";
import { AnimatedSprite, Assets, Container, Texture } from "pixi.js";
import { sceneWidth } from "@app/pixi-app-settings.ts";

export const AnimatedLogo = memo(() => {
  const containerRef = useRef<Container>(null);
  const animatedSpriteRef = useRef<AnimatedSprite | null>(null);
  const atlas = useMemo(() => Assets.get("logo-anim.json"), []);

  useEffect(() => {
    const animationContainer = containerRef.current;

    if (!animationContainer || !atlas?.data?.animations?.LOGO_ANIMATION) {
      return;
    }

    const frameNames = atlas.data.animations.LOGO_ANIMATION;
    const textures = frameNames.map((frameName: string) => Texture.from(frameName));

    const sprite = new AnimatedSprite(textures);
    sprite.anchor.set(0.5);
    sprite.x = 0;
    sprite.y = 0;
    sprite.animationSpeed = 0.5;
    sprite.loop = true;
    sprite.play();

    animatedSpriteRef.current = sprite;
    animationContainer.addChild(sprite);

    return () => {
      if (animationContainer && animatedSpriteRef.current) {
        animationContainer.removeChild(animatedSpriteRef.current);
        animatedSpriteRef.current.destroy();
        animatedSpriteRef.current = null;
      }
    };
  }, []);

  return (
    <pixiContainer
      ref={containerRef}
      layout={{
        position: "absolute",
        top: 120,
        left: sceneWidth / 2 - 420,
      }}
    />
  );
});

[thejustinwalsh]

Hey, so this is a fun one...

@trezy, after the constructor for AnimatedSprite runs with the intial props, @pixi/react is caling applyProps which in turn calls set textures(value: AnimatedSpriteFrames), where this setter calls gotoAndStop(0) stopping your animation as soon as it starts.

While I agree it is a bug due to side efects of applying the props, I am not sure what the correct resolution is, as it doesn't look like a trivial fix up front.

For fun, I tried ading autoUpdate={true} after my textures prop, however this setter aborts early because _autoUpdate is already set to true.

Calling play() in an effect should be a reliable workaround in the meantime.

import { memo, useMemo } from "react";
import { Assets, Spritesheet, Texture } from "pixi.js";

export const AnimatedLogo = memo(() => {
  const ref = useRef<AnimatedSprite>(null);
  const atlas: Spritesheet = useMemo(() => Assets.get("logo-anim.json"), []);

  useEffect(() => {
    ref.current?.play();
  }, []);

  return (
    <pixiAnimatedSprite
      ref={ref}
      textures={atlas.animations["LOGO_ANIMATION"]}
      anchor={0.5}
      loop={true}
    />
  );
});

[spassvogel]

I was facing this bug too and I agree with OP the fact that autoPlay from pixijs is not respected is kind of a problem. I understand why pixi-js does gotoAndStop() when the textures change, obviously the current frame could be higher than the amount of newly set textures.

I noticed something whilst stepping through the code. The textures setter goes off first, then the constructor (which can have autoPlay, thus triggering play() and then the textures setter goes off again (via applyProps). But it's basically setting textures to itself

Can't applyProps check whether the prop its trying to set is already the value that the underlying pixi object has, and if yes, dont act? Or would there be unintended side effects?

            else if (!isReadOnlyProperty(currentInstance as Record<string, unknown>, key))
            {
                // @ts-expect-error Typescript is grumpy because this could be setting a readonly key, but we're already handling that in the conditional above. 🤷🏻‍♂️
                if (currentInstance[key] !== value) {
                   currentInstance[key] = value
                }
            }

[devanfarrell]

Can confirm autoPlay does not work. I got it to work without the useEffect though with a ref. I tend to avoid useEffect at all costs.

export const Chicken = () => {
  const { chickenSprites } = useSpritesContext();

  return (
    <pixiAnimatedSprite
      ref={(ref) => {
        ref?.play();
      }}
      textures={chickenSprites.animations.bounce}
      autoPlay
      loop
      animationSpeed={0.03}
      x={200}
      y={200}
    />
  );
};