I’m working with PixiJS 8 and facing an issue where sprites created from a spritesheet display the entire sheet instead of just their individual frames. Despite correctly slicing the spritesheet into frames, the resulting textures still show the whole spritesheet when rendered.

Below is the relevant part of my code:

        // Define the number of frames and frame size
        const frameWidth = 32;
        const frameHeight = 32;
        const numFrames = 4;
        const framesPerRow = Math.floor(baseTexture.width / frameWidth);

        console.log('Sprite sheet details:', {
            totalWidth: baseTexture.width,
            totalHeight: baseTexture.height,
            frameWidth,
            frameHeight,
            numFrames,
            framesPerRow
        });

        // Create an array of textures from the sprite sheet
        const textures = [];
        for (let i = 0; i < numFrames; i++) {
            const x = (i % framesPerRow) * frameWidth;
            const y = Math.floor(i / framesPerRow) * frameHeight;
            const rectangle = new PIXI.Rectangle(x, y, frameWidth, frameHeight);
            const texture = new PIXI.Texture(baseTexture, rectangle);
            textures.push(texture);
            console.log(`Created texture for frame ${i}:`, texture);
        }

        // Create the animated sprite
        pet = new PIXI.AnimatedSprite(textures);
        console.log('Created AnimatedSprite:', pet);

        pet.animationSpeed = 0.1;
        pet.play();
        pet.scale.set(2, 2);
        app.stage.addChild(pet);

Here’s what I’ve confirmed so far:

• The rectangle dimensions are correct, as logged (e.g., Rectangle for frame 0: x=0, y=0, width=32, height=32).
• The base texture’s size is correctly logged as 128×32.

This is the spritesheet im working with:

This is what i’m seeing render (the whole sheet at once):