pixi.js
    Preparing search index...

    Interface AnimatedSpriteOptions

    Constructor options used for AnimatedSprite instances. Allows configuration of animation playback, speed, and texture frames.

    // Create a basic animated sprite
    const sprite = new AnimatedSprite({
        textures: [
            Texture.from('walk1.png'),
            Texture.from('walk2.png'),
            Texture.from('walk3.png')
        ],
        animationSpeed: 0.1,
        loop: true
    });

    // Create with spritesheet frames and callbacks
    const sheet = await Assets.load('character.json');
    const animatedSprite = new AnimatedSprite({
        textures: sheet.animations['walk'],
        autoPlay: true,
        updateAnchor: true,
        onComplete: () => console.log('Animation complete'),
        onFrameChange: (frame) => console.log('Current frame:', frame),
        onLoop: () => console.log('Animation looped')
    });

    // Create with custom timing for each frame
    const customTimingSprite = new AnimatedSprite({
        textures: [
            { texture: Texture.from('frame1.png'), time: 100 },
            { texture: Texture.from('frame2.png'), time: 200 },
            { texture: Texture.from('frame3.png'), time: 300 }
        ],
        autoUpdate: true
    });
    interface AnimatedSpriteOptions {
        animationSpeed?: number;
        autoPlay?: boolean;
        autoUpdate?: boolean;
        loop?: boolean;
        onComplete?: () => void;
        onFrameChange?: (currentFrame: number) => void;
        onLoop?: () => void;
        textures: AnimatedSpriteFrames;
        updateAnchor?: boolean;
    }

    Hierarchy

    Index

    Properties

    animationSpeed? autoPlay? autoUpdate? loop? onComplete? onFrameChange? onLoop? textures updateAnchor?

    Properties

    animationSpeed?: number

    The speed that the AnimatedSprite will play at. Higher is faster, lower is slower.

    // Create an AnimatedSprite with a slower animation speed
    const animation = new AnimatedSprite({
        textures: [Texture.from('frame1.png'), Texture.from('frame2.png')],
        animationSpeed: 0.5 // Slower animation
    });

    // Update the animation speed to make it faster
    animation.animationSpeed = 2; // Faster animation

    1
    autoPlay?: boolean

    Whether to start the animation immediately on creation. If set to true, the animation will start playing as soon as the AnimatedSprite is created. If set to false, you will need to call the play method to start the animation.

    // Create an AnimatedSprite that starts playing immediately
    const animation = new AnimatedSprite({
        textures: [Texture.from('frame1.png'), Texture.from('frame2.png')],
        autoPlay: true
    });

    // Create an AnimatedSprite that does not start playing immediately
    const animation = new AnimatedSprite({
        textures: [Texture.from('frame1.png'), Texture.from('frame2.png')],
        autoPlay: false
    });
    animation.play(); // Start the animation manually

    false
    autoUpdate?: boolean

    Whether to use Ticker.shared to auto update animation time. This is useful for animations that need to be updated every frame. If set to false, you will need to manually call the update method to update the animation.

    // Create an AnimatedSprite that does not auto update
    const animation = new AnimatedSprite({
        textures: [Texture.from('frame1.png'), Texture.from('frame2.png')],
        autoUpdate: false
    });

    // Manually update the animation in your game loop
    ticker.add((ticker) => {
        animation.update(ticker);
    }

    true
    loop?: boolean

    Whether or not the animation repeats after playing.

    true
    onComplete?: () => void

    User-assigned function to call when an AnimatedSprite finishes playing.

    animation.onComplete = () => {
        // Finished!
        console.log('Animation complete');
    };

    null
    onFrameChange?: (currentFrame: number) => void

    User-assigned function to call when an AnimatedSprite changes which texture is being rendered.

    animation.onFrameChange = (currentFrame) => {
        // Updated!
        console.log('Current frame:', currentFrame);
    };

    null
    onLoop?: () => void

    User-assigned function to call when loop is true, and an AnimatedSprite is played and loops around to start again.

    animation.onLoop = () => {
        // Looped!
    };

    null
    textures: AnimatedSpriteFrames

    An array of Texture or frame objects that make up the animation.

    // Create an AnimatedSprite with an array of textures
    const animation = new AnimatedSprite({
        textures: [
            Texture.from('frame1.png'),
            Texture.from('frame2.png'),
            Texture.from('frame3.png')
        ]
    });
    * // Create an AnimatedSprite with an array of frame objects
    const animation = new AnimatedSprite({
        textures: [
            { texture: Texture.from('frame1.png'), time: 100 },
            { texture: Texture.from('frame2.png'), time: 200 },
            { texture: Texture.from('frame3.png'), time: 300 }
        ]
    });

    AnimatedSpriteFrames For the type of the textures array

    updateAnchor?: boolean

    Update anchor to [Texture's defaultAnchor]Texture#defaultAnchor when frame changes.

    Useful with [sprite sheet animations]Spritesheet#animations created with tools. Changing anchor for each frame allows to pin sprite origin to certain moving feature of the frame (e.g. left foot).

    Note

    Enabling this will override any previously set anchor on each frame change.

    // Create an AnimatedSprite with updateAnchor enabled
    const animation = new AnimatedSprite({
        textures: [Texture.from('frame1.png'), Texture.from('frame2.png')],
        updateAnchor: true
    });

    Texture#defaultAnchor For the default anchor of the texture

    false

    Settings

    Member Visibility

    On This Page

    Properties